次回から『ぶろなび』と検索ください。

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

悩んでいる人

WordPressテーマの「SWELL」でスマホの下に表示されるメニューを作りたいです。
表示方法とおすすめ設定を教えてください。

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

この記事の内容
  • スマホの下に表示されるメニューの作り方
  • メニューのおすすめ設定
SWELLのスマホ固定フッター
スマホ用固定フッターメニュー

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

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

目次

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

SWELLのスマホ用固定フッターとは?

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

スマホ固定フッター

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

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

イケダ

自分で使ってみて結構便利でした!

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

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

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

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

外観⇒カスタマイズをクリックします
『外観』 ⇒  『カスタマイズ』

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

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

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

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

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

メニュー名、固定フッター、次へをクリックします
メニュー名と「固定フッター」にチェックを入れ次へ

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

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

次に項目を追加をクリックします
項目を追加をクリック

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

右のカスタムリンク~タグまで好きな項目を選択してください
右のカスタムリンク~タグまで好きな項目を選びます

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

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

私の場合はカスタムリンク1つとカテゴリーページ3つを表示しています

HOMEメニューの作り方

左から2番目がホームメニューです
左から2番目がHOMEメニューです

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

次はカスタムリンクを使ってHOMEページを作っていきましょう
カスタムリンクを選択

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

僕の場合はURLにぶろなびのURLを
リンク文字列は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を導入していない方は下記記事をご覧ください。

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

SWELLカスタマイズ関連記事

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる