【SWELL】フッターのレイアウト設定・カスタマイズ方法

SWELLのフッター設定
悩んでいる男性

フッターに人気記事とかアーカイブとか入れたいんだけど。設定方法を教えて。

今回はフッターの設定について説明しています。画像付きで詳しく説明しています。

この記事の内容
  • フッターメニューの作成方法
  • 固定フッターメニューのカスタマイズ
  • フッターに好きなウィジェットを入れてカスタマイズ

フッターとは、ページの一番下のエリアのことです。

フッターエリア

一番下まで読まれることはあまりありませんが、スマホの固定フッターメニューは比較的使える頻度が高いので、ユーザビリティを高めるために効果的です。

PC版とスマホ版それぞれ設定できるので、デバイスに合わせて設定しておきましょう。

SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。

画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

テーマカスタマイザー
テーマカスタマイザー

この機能を使って、変更を確認しながら基本設定を進めましょう。

「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

テーマカスタマイザーのコントロール
目次

フッターの基本設定

「外観」>「カスタマイズ」>「フッター」に進みます。

ここではフッターのカラーや、SNSアイコン、コピーライトが設定できます。

フッターのカラー設定

フッターのカラー設定に関しては以下の記事をご覧ください。

コピーライト設定

コピーライトの表記を変えることができます。@以降をテキストで入力しましょう。

コピーライト設定

その他の設定

フッターのその他の設定

「カスタマイズ」>「SNS情報」で設定されているSNSアイコンを表示することができます。

表示する場合は、チェックを入れ、SNS情報にURLを入力しておきましょう。

次にフッターメニューの設定をしましょう。

フッターメニュー

設定は、Wordpressのダッシュボードの「外観」>「メニュー」から設定できます。

詳細はグローバルメニューの設定方法と全く同じなので、以下を参考にしてみてください。

最後に、メニューの位置を「フッター」にチェックを入れれば設定した内容がフッターに反映されます。

フッターメニューの設定

固定フッターメニューのカスタマイズ

固定フッターメニューとは、スマホ画面でスクロールした際に画面下部に表示されるメニューのことです。

固定フッターメニュー

SWELLで用意されているフッターメニューの設定

固定フッターメニューは「外観」>「カスタマイザー」>「サイト全体設定」>「下部固定ボタン・メニュー」内のスマホ用固定フッターメニューの設定から設定できます。

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

ボタンを表示するかどうかを設定できます。

設定できる項目は以下の4つです。(アイコンは変更できません)

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

表示するメニューにチェックをいれ、各メニューのタイトルを入力します。

スマホ用固定フッターメニューの設定をもう少し下にスクロールすると、フッターメニューのカラーを設定できます。

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

オリジナルでフッターメニューを作成する方法

SWELLで用意されているフッターメニュー以外で、自分でメニューを作成したい場合について説明します。

STEP
説明欄を表示出来るように設定

まずは、Wordpressのダッシュボードで、画面右上にある「表示オプション 」をクリックします。

すると以下のように表示オプションが表示されるので、「説明」にチェックが入っているのを確認してください。

表示オプションで説明にチェックを入れる
STEP
固定フッターメニュー専用のメニューを作成

次に、Wordpressのダッシュボードの「外観」>「メニュー」に進み、「フッターメニューの設定」と同様の手順で、固定フッターメニュー専用のメニューを作成します。

最後に固定フッター(SP)にチェックを入れて、メニューを保存します。

固定フッターメニューのメニュー設定
STEP
メニューアイコンの作成

メニューが作成出来たら、「外観」>「メニュー」内の②で作ったメニューをクリックします。

すると、以下のようにメニューの設定が出来るエリアが現れます。

メニュー構造で説明欄にアイコンのクラス名を入力

まずは表示させたいラベル名を「ナビゲーションラベル」に入力します。

次に「説明」欄に表示させたいアイコンのクラス名を入力します。

SWELLで使用できるアイコンは公式HPで紹介されているので、アイコンのクラス名を知りたい場合はこちらを参考にコピペすればOKです。

上記にないアイコンを使用したい場合は、Font Awesomeのアイコンを使用することも可能です。その場合は、「SWELLで「Font Awesome」のアイコンを使う方法」をご覧ください。

以上で、アイコン付きのオリジナルでフッターメニューが完成しました。

フッターに好きなウィジェットを入れてカスタマイズする

フッターには、自分が入れたいウィジェットを挿入することもできます。

例えばフッターにプロフィールを入れたり、人気記事・新着記事リストを入れたりすることもできます。

フッターエリア

また、フッター直前にウィジェットを入れることも可能です。

それでは設定方法について説明していきます。

STEP
設置するエリアを選ぶ

まずはWordpressのダッシュボードの「外観」>「ウィジェット」に進みます。

フッターで設置するエリアを選ぶ

ウィジェットを挿入させたいエリアを上記の中から選びます。

スマホ版も用意されているので、スマホのフッターが長くなりすぎないように調整ができます。

フッター(PC)ウィジェットの1〜3は、ウィジェットを設置したエリアのみがフッターに表示されます。

例えば、「フッター(PC)1」だけにウィジェットを設置すると、フッターには「フッター(PC)1」に設置したウィジェットが1カラムで中央に表示されます。

フッター1だけにウィジェットを設置すると1カラムで中央に表示される
フッター1だけにウィジェットを設置すると1カラムで中央に表示される

「フッター(PC)1〜3」すべてにウィジェットを設置すると、フッターは3カラムでウィジェットを表示します。

フッター(PC)1〜3全てにウィジェットを設置すれば3カラムになる
フッター(PC)1〜3全てにウィジェットを設置すれば3カラムになる
STEP
設置するウィジェットを選ぶ

画面左にある、「利用できるウィジェット」の中から使いたいウィジェットを、上記のエリアに設置します。

STEP
ウィジェット設定をする

例えば、「フッター(PC)1」にカテゴリを入れると、以下のように設定ができます。

フッターエリアの表示するものを選択

タイトル名を入れ、表示形式を選択し、保存をクリックすればOKです。

もう一つ例として、「フッター(PC)2」に人気記事を入れてみましょう。

フッターエリアに表示する情報を選択

タイトル名や、レイアウト、表示項目を選択できます。人気記事を非表示にしたいページも選択可能です。

設定が出来たら保存をクリックすれば、フッターのカスタマイズ完了です。

以上で、フッターの設定は終わりです。

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。

SWELLのフッター設定

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる