スマホ用フッターメニューの追加

img_3142

スマートフォンで閲覧した時に少しスクロールすると下からメニューが表示されるオプションの設定方法です。

[toc]

スマホ用フッターメニューの作成方法

メニューの準備

2017-01-24_20h39_36

まずは「外観」>「メニュー」にて専用のメニューを作成します。

2017-01-24_20h45_38

スマホ用フッターメニューを有効化すると「TOPに戻るボタン」が自動で非表示になりますので上記のように「#wrapper」をリンク先としてTOPに戻るボタンを作成することをおすすめします。

ステ子
「AFFINGER管理」の「ページ内スムーススクロールを使用する」を設定するとスルスル戻ります

2017-01-24_21h45_07

Webアイコンの挿入

2017-01-24_20h41_20

メニューにはWebアイコン「fontawesome」も使用できます。
使用したいアイコンのコードをコピーして以下の様に記述します。

2017-01-24_20h46_15

2017-01-24_20h46_35

コードとテキストの間に<br/>タグを入れると改行して表示できます。

例)ホーム

<i class="fa fa-home" aria-hidden="true"></i><br/>ホーム

例)TOP

<i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>TOP

他にもいろいろな可愛いアイコンがありますよ。

2017-01-24_21h51_17

fontawesome

※New Icons in 4.7にはまだ未対応です

メニューの設定

2017-01-24_20h46_56

設定が終わったら①「スマートフォンフッター用メニュー」にチェックを入れて②「メニューを保存」をクリック

ステ子
メニュー数は3~4くらいが適当かと思います。

表示の設定

2017-01-24_20h47_57

「AFFINGER管理」の「メニュー設定」でSAVEすれば完了です。

カラーの変更

2017-01-24_20h49_53

カスタマイザーの「メニューカラーの設定」にて背景やテキストカラーを変更できます。

※モバイルアンカー広告を設定していると表示が被ります(広告を下にスライドすると表示される)

フォントサイズの変更

「外観」>「テーマの編集」>style.css

/*--------------------------------
スマホフッターメニュー
---------------------------------*/
#st-footermenubox {
position: fixed;
bottom: 0px;
right: 0px;
width:100%;
height:auto;
box-sizing:border-box;
padding:10px;
background:#fff;  
box-shadow:0px 0px 5px;
}
#st-footermenubox a {
text-decoration: none;
}
#st-footermenubox ul.menu  {
display:table;
table-layout: fixed;
width:100%;
}
#st-footermenubox ul.menu li{
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:13px;
}

にある

#st-footermenubox ul.menu li{
display:table-cell;
vertical-align:middle;
text-align:center;
font-size:13px;
}

のfont-sizeを任意のサイズに変更して下さい。

Webアイコンサイズを変えたい場合は以下をその下に追記

#st-footermenubox ul.menu li .fa{
font-size:13px;
}

コチラもサイズは適宜変更して下さい。

追記修正(2017 1/25 19:35)

一部公開後に修正を加えました。

#st-footermenubox {
position: fixed;
bottom: 0px;
right: 0px;
width:100%;
height:auto;
box-sizing:border-box;
padding:10px;
background:#fff;  
box-shadow:0px 0px 5px;
z-index:9999;
}

11行目の

	z-index:9999;

を追記しました。

広告が溶け込む魔法の子テーマ「JET」

大人気!

詳しく見る

情報配信中

記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

投稿日:2017年1月24日 更新日:

Copyright© AFFINGER(WING) , 2018 All Rights Reserved Powered by AFFINGER5.