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

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

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

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

POINT

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

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

こんな感じに変更

Before

カスタマイズ前

After

カスタマイズ後

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズをする準備

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

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

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

参考モバイル用フッター固定メニューの設定方法 | 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
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加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;
}

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

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

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

.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の保存＞アップデート＞キャッシュを削除して更新します。

MEMO

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

意外とコードが少ない！

他にもいっぱいあるよ

【圧倒的SANGOカスタマイズまとめ】～ようこそ、沼への入口へ～ホームへ戻る

手順まとめ

手順をザクッと説明

変更手順

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

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

2
コメント( ˶ˆ꒳ˆ˵ )

新しい順古い順いいね順

コメントした人

じん

お世話になります。
このメニューを導入しました。

追加でシェアボタンも設置したいのですが、「モバイル固定フッターメニュー」に設定できるのは一つ？だからもう一つボタンを増やすというのは不可能なのでしょうか？？

返信した人

くまさん

じんさん、コメントありがとうございます( ˶ˆ꒳ˆ˵ )
for-men運営者のくまです。

おっしゃるとおり、このページで紹介したカスタマイズ方法だけでは複数設置は難しいです‪( ˙꒳˙ᐢ )

シェアボタンを追加で設置したい場合は、
メニューではなく、ウィジェットを使ったカスタマイズで対応できます。

for-menで記事を書いておりませんので、こちらのサイトを参考にしてみてください(* ‘ᵕ’ )

【SANGO】スマホフッター固定の丸いシェアボタンを設置する

よろしくお願いします(´ω｀)ﾉ