【SANGOを自分でカスタマイズ】モバイル用フッター固定メニューをシンプルにする

モバイル用フッター固定メニューのカスタマイズ

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
モバイル用フッター固定メニューをシンプルにカスタマイズした方法を説明。
POINT
このカスタマイズは固定フッターメニューを使いやすくできないかと思って作成したものです。ナビドロワー部分にフォローボタンやシェアボタンを入れればタッチする回数は変わらずにボタンをシンプルにできます。

今回のカスタマイズはマテリアルデザインに反しています。(マテリアルデザインではメニューを目立つボタンにするのは禁止されています)


こんな感じに変更

Before

カスタマイズ前

After

カスタマイズ後


このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズをする準備

モバイル用フッター固定メニューを設定する

この設定方法は公式カスタマイズページで紹介されています。

手順どおりやれば設定できます
参考 モバイル用フッター固定メニューの設定方法 | SANGOカスタマイズガイドSANGOカスタマイズガイド

ただしこのカスタマイズではメニュー[#sng_menu]しか作成しません

MENくん

かなり詳しく書いてあります

今回のカスタマイズ用に変更

カスタマイズの設定

とりあえずメニューを作る

とりあえず、モバイル固定フッターメニューを作成していない方は
WordPress①外観②メニュー③④モバイル固定フッターメニューを作成します。
ここは公式カスタマイズガイドで詳しく書いてあります。

カスタムリンクでナビドロワーメニュー設定

⑤-1カスタムリンクに以下の内容を入力していただくと、⑤-2の用に表示されます。

入力する内容
URL#sng_menu
ナビゲーションラベル<label for=”drawer__input”><i class=”fa fa-bars” aria-hidden=”true”></i>MENU</label>

こちらの2つをコピー・貼り付けメニューに追加すると⑤-2のように表示されます。

入力に注意
コードをそのままコピーして貼り付けた場合、 ” ” の部分を消してもう一度 ” ” を半角で入力してください。
MENくん

これでフッター部分がメニューだけになりました!

メニューを保存して終了

あとは⑥モバイル用フッター固定メニューにチェックを入れて、⑦メニューを保存すれば設定は完了です。

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズのコードを追加

さて、フッターのメニュー部分をカスタマイズしていきます。

style.css(追加するコード:モバイル用フッター固定メニュー)
style.css(追加するコード:モバイル用フッター固定メニュー)

コードを追加したら、style.cssの保存アップデートキャッシュを削除して更新します。

MEMO
上に戻るボタンを設定していない方は、上に戻るのコードをまるっと消してください。またbackgroundcolorの部分はお好きな色に変更してください。
MENくん

意外とコードが少ない!

 

 

手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • モバイル用フッター固定メニューの設定
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

実はこのカスタマイズは、まだ未完成なんですよね