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

img_3142

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

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

メニューの準備

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/>タグを入れると改行して表示できます。

例)ホーム

例)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

にある

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

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

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

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

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

11行目の

を追記しました。

ad

ad

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

情報配信中

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

Copyright© アフィリエイトのAFFINGER , 2017 All Rights Reserved.