SWELLでスマホ用固定フッターを表示する方法【WordPressテーマ】

そんな疑問にお答えします。

WordPressテーマのSWELLでスマホの下部に表示される「スマホ固定フッター」の設定方法を紹介します！

手順通りに設定すれば簡単なのでぜひ試してみてくださいね。

【SWELL】『スマホ固定フッター』とは

スマホ固定フッターとは、スマホで表示した際に画面下に表示させるメニューの事です。

このスマホ固定フッターは任意のカテゴリーや記事を設定することができ、使い方によってはユーザービリティを高めることができますよ。

SWELLを使うからにはぜひとも設定した方がいい機能だと思います。

【SWELL】スマホ固定フッターの表示方法

まず、スマホ画面の下に固定フッターを表示させていきましょう。

スマホ用固定フッター表示

まず、左側メニューの『外観』⇒『カスタマイズ』をクリックします。

次に『メニュー』をクリックします。

次に「メニューを新規作成」をクリックします！

まず、「メニュー名」に好きな名称を入れます。
あくまでSWELL内で管理するメニュー名なので好きな名前でOKです。

次にメニュー位置の「固定フッター（SP）」にチェックを入れ「次」をクリックします。

次は「項目を追加」をクリックです！

ここからは自分の好きな項目を登録していきます。

ちなみに僕はカスタムリンク一つとカテゴリーページを3つ表示しています。

HOMEメニューの作り方

では次にホームメニューを作っていきましょう。

まず、「カスタムリンク」を選択します。

当ブログの場合は
URL＝http://blognavi.org
リンク文字列＝HOME

ブログのトップ画面を固定ページで作っている方は「固定ページ」でもHOMEボタンを作れます

これでホームメニューは完成です

【SWELL】メニューにアイコンを表示させる方法

ここまで終わった段階だとメニューが文字になっているはず。

これから上記画像のようにアイコンを設定していきましょう。
当ブログだと上記画像のようなアイコンにしています。

アイコンの設定は各メニューの【説明】欄にアイコン名を入力

アイコンを表示させる場合は各メニュー欄の【説明】にアイコン名を入力していきましょう。

SWELLで使えるアイコンは下記「SWELL公式サイト」で確認してください。

ちなみに当ブログは、HOME＝icon-home　BLOG=icon-book　SWELL=icon-swell　運営報告＝icon-megaphone

を使用しています。

【SWELL】スマホ固定フッターの詳細設定

次にスマホ固定フッターメニューの色、検索窓、目次の表示非表示を設定していきましょう。

まず、「外観」⇒「カスタマイズ」⇒「サイト全体設定」をクリックします。

次に一番下にある「下部固定ボタン・メニュー」をクリックしましょう。

「スマホ用固定フッターメニューの設定」で文字やアイコン色、検索ボタンを配置するなど選択することができます。

本サイトは「検索ボタン」「目次メニュー」「ページトップボタン」はメニューの幅を圧迫する為、非表示にしています。

ちなみに背景色と固定フッターの文字色は次の通りです。

• 背景色＝#fff（白色）
• 文字色＝#191970

色をオリジナルにカスタマイズしたい場合は次のサイトを参考に選ぶと便利ですよ。
※別サイトの新規タブが開きます

SWELLでスマホの固定フッターを表示してユーザービリティを上げていこう

以上でSWELLの「スマホ用固定フッターの表示方法」の解説は終了です。

本サイトの場合はトップページとカテゴリー3つをメニューとして表示していますが、固定ページや別サイトへのリンクを張ることも可能です。

つまり自由自在！

アイコンを入れてオシャレにするもよし、友人のサイトを紹介するもよし、何をやってもOKです。

しかし、ユーザーの利便性を考えるのであればカテゴリーかおすすめ記事をまとめた固定ページをメニュー表示するのが一番いいかなと思います。

どんどんカスタマイズして、あなただけのメニューを作ってみてください。

もし、まだSWELLを導入していない方は下記記事をご覧ください。

今回は以上です。
終わり。