スマホ用の固定フッターメニューの設定方法

記事上のウィジェットエリア

このページでは、スマホ画面下部に固定表示されるフッターメニューの使用方法・設定方法について紹介いたします。

以下、「固定フッターメニュー」とは、以下のオレンジ枠で囲まれた部位のことを指します。

スマホ固定フッターメニュー
目次
目次前広告表示エリア

固定フッターメニューを表示させる方法

固定フッターメニューを表示するには、「外観」>「メニュー」から、「固定フッターメニュー(SP)」にチェックを入れて有効化する必要があります。

以下のように、表示したいメニューを作成してから「固定フッターメニュー(SP)」にチェックをいれて保存してください。

固定フッターメニューの設定画面
固定フッターメニューの設定画面

各メニュー項目の設定方法

固定フッターメニューの設定方法
  1. メニューに表示されるアイコン下のラベル名
  2. メニューに表示されるアイコンを指定するためのクラス名

SWELLで使用できるアイコンについては、こちらのページでまとめています。

メニューに「説明」欄がない場合

実はこの「説明」欄はデフォルト状態では非表示になっていますので、以下の手順を参考にして表示状態へ切り替えてください。

  1. まず、メニューの編集画面の右上に表示されている「表示オプション」をクリックします。
  2. 上からチェックリストが表示されてくるので、「説明」という項目にチェックを入れてください。
メニューの説明を表示
「表示オプション」をクリックした状態

特殊なメニュー項目について

固定フッターメニューには、

  • 「メニュー開閉ボタン」
  • 「フリーワード検索ボタン」
  • 「ページトップボタン」
  • 「目次メニュー」

といった、少し特殊なボタン項目を追加することも可能です。

これらのについては、
「外観」>「カスタマイザー」>「サイト全体設定」>「下部固定ボタン・メニュー」から設定可能です。

固定フッターメニューのボタン追加画面
固定フッターメニューのボタン追加画面

上記画像下部の入力エリアにて、アイコン下部に表示されるラベル名は自由に設定できます。
ただし、これらの特殊ボタンのアイコンは自由に設定することはできません。

「ページトップボタン」を固定フッターメニューに追加している場合、通常の「ページトップボタン」は自動的に非表示となります。

目次メニューについて

ver 1.2.2より、「目次メニュー」が使用可能になりました。

目次メニューは、投稿ページおよび固定ページにて本文上に目次を表示しているページでのみ、固定フッターメニューに追加される形で表示されます。

目次のないページでの表示例
目次のないページでの表示例
目次のあるページでの表示例
目次のあるページでの表示例

固定フッターメニューの色の設定方法

メニューの「文字色」・「背景色」・「背景の不透明度」についても、カスタマイザーから設定可能です。

固定フッターメニューのカラー設定
固定フッターメニューのカラー設定
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる