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

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」

大人気!

詳しく見る