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

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

[toc]

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

メニューの準備

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

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

ステ子

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

Webアイコンの挿入

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

コードとテキストの間に<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

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

fontawesome

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

メニューの設定

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

ステ子

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

表示の設定

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

カラーの変更

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

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

フォントサイズの変更

「外観」＞「テーマの編集」＞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行目の