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

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事では
モバイル用フッター固定メニューをシンプルにカスタマイズした方法を説明。

POINT

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

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

こんな感じに変更

Before

カスタマイズ前

After

カスタマイズ後

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズをする準備
- 1.1 モバイル用フッター固定メニューを設定する
- 1.2 今回のカスタマイズ用に変更
2 カスタマイズのコードを追加
3 手順まとめ

カスタマイズをする準備

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

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

手順どおりやれば設定できます

参考モバイル用フッター固定メニューの設定方法 | SANGOカスタマイズガイドSANGOカスタマイズガイド

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

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

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

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

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

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

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

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

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

入力に注意

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

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

メニューを保存して終了

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

カスタマイズ方法

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

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

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

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

コメントあり（style.css）

style.css（追加するコード：モバイル用フッター固定メニュー）

/*--------------------------------------
  モバイル用フッター固定メニュー
--------------------------------------*/
.fixed-menu ul {/*メニュー部分*/
    width: auto;/*幅調整*/
    padding: 0.2em 1.1em;/*内側の余白設定*/
    right: 10px;/*位置調整（右からの距離）*/
    left: auto;/*位置調整（左からの距離）*/
    bottom: 10px;/*位置調整（下からの距離）*/
    border-radius: 50%;/*円にする*/
    background: #ff5959!important;/*背景色（強制）*/
}
.fixed-menu a {/*メニューの文字*/
    color: #fff!important;/*文字の色（強制）*/
}
.fixed-menu ~ .totop {/*上に戻るボタンの位置*/
    bottom: 80px;/*位置調整（下からの距離）*/
}
.totop {/*上に戻るボタン*/
    background: #fff!important;/*背景色（強制）*/
    border: 1px solid #424242;/*枠線*/
    width: 64px;/*幅調整*/
    height: 64px;/*高さ調整*/
}
.totop .fa {/*上に戻るボタンのアイコン*/
    line-height: 58px;/*行の高さ*/
    font-size: 1.15em;/*アイコンの大きさ*/
    color: #424242;/*アイコンの色*/
}
.fixed-menu {/*フッターメニューの余白設定*/
    margin-bottom: 0;/*下の余分な余白を削除*/
}

/*--------------------------------------

モバイル用フッター固定メニュー

--------------------------------------*/

.fixed-menu ul {/*メニュー部分*/

width: auto;/*幅調整*/

padding: 0.2em 1.1em;/*内側の余白設定*/

right: 10px;/*位置調整（右からの距離）*/

left: auto;/*位置調整（左からの距離）*/

bottom: 10px;/*位置調整（下からの距離）*/

border-radius: 50%;/*円にする*/

background: #ff5959!important;/*背景色（強制）*/

}

.fixed-menu a {/*メニューの文字*/

color: #fff!important;/*文字の色（強制）*/

}

.fixed-menu ~ .totop {/*上に戻るボタンの位置*/

bottom: 80px;/*位置調整（下からの距離）*/

}

.totop {/*上に戻るボタン*/

background: #fff!important;/*背景色（強制）*/

border: 1px solid #424242;/*枠線*/

width: 64px;/*幅調整*/

height: 64px;/*高さ調整*/

}

.totop .fa {/*上に戻るボタンのアイコン*/

line-height: 58px;/*行の高さ*/

font-size: 1.15em;/*アイコンの大きさ*/

color: #424242;/*アイコンの色*/

}

.fixed-menu {/*フッターメニューの余白設定*/

margin-bottom: 0;/*下の余分な余白を削除*/

}

コメントなし（style.css）

style.css（追加するコード：モバイル用フッター固定メニュー）

/*--------------------------------------
  モバイル用フッター固定メニュー
--------------------------------------*/
.fixed-menu ul {
    width: auto;
    padding: 0.2em 1.1em;
    right: 10px;
    left: auto;
    bottom: 10px;
    border-radius: 50%;
    background: #ff5959!important;
}
.fixed-menu a {
    color: #fff!important;
}
.fixed-menu ~ .totop {
    bottom: 80px;
}
.totop {
    background: #fff!important;
    border: 1px solid #424242;
    width: 64px;
    height: 64px;
}
.totop .fa {
    line-height: 58px;
    font-size: 1.15em;
    color: #424242;
}
.fixed-menu {
    margin-bottom: 0;
}