前回の記事では、ウィジェットの簡単な設定方法についてメモしました。

今回はNeveというテーマのフッター部分を、ウィジェット機能とフッタービルダー機能を使用して作ってみましたのでメモしていきたいと思います。

今回作ったフッター

1.フッタービルダーを起動する。

カスタマイズ画面を開き、「フッター」を選びます。

カスタマイズ画面・サイドバー

すると、フッター編集レイアウトに切り替わります。

フッター編集レイアウト

フッターも、最大3段組みにすることができます。これはヘッダーと同じですね。今回は「フッター上」(上段)をメインに使用します。

2.フッターに表示する要素を決定する。

まず中身から作っていきましょう。上の図の左側の内容を作ります。

・ロゴ
・住所
・電話番号

ですね。

今回作るフッター

フッタービルダーの上段、一番左の列に「フッター1」を追加します。

フッタービルダー内の「フッター1」

もともと表示されていない場合は、フッタービルダーの空欄をクリック > フッター1を選択します。
(下図はフッター4と書いてありますが、こんな感じで選択)

要素の追加

追加したら、「フッター1」の歯車マークをクリックします。すると、フッター編集画面に移ります。ブロックエディタみたいな形式で、表示する内容を選択できます。

フッター1カスタマイズ画面

上の図では、

・画像ブロック(ロゴを表示する用。何も見えないけど、ロゴが白いからです笑)
・段落ブロック(住所)
・カスタムHTMLブロック(電話番号。数字だけCSSで大きくするため)

で構成されています。上の図のような感じで設定します。

ちなみにこのフッター1は、ウィジェット画面で編集できます。Neveのフッタービルダーでは、ウィジェットをフッタービルダーでフッターに表示でき、その位置を自由に変えられる仕組みになっているようですね。

3.レイアウトを決定する。

今回は下記のような設定をしています。

レイアウト編集画面

レイアウト・・・全幅-含まれる(翻訳がおかしいのだと思います笑これを設定すると、背景は全幅になりますが、要素が固定幅となります。)

列の数・・・3つ

列のレイアウト・・・お好きにどうぞ(笑)

4.スタイルを決定する。

スタイル編集画面

基本的には余計な設定はせず、文字色と背景の色だけ調整しました。行の高さは0にしていますが、フッターの中の要素を追加すると、その分だけ自動で幅がとられるので気にしなくていいです。

いろいろCSSで調整してはいますが、おおむね下の感じで表示されればOKです。

まとめ

フッタービルダー、ヘッダービルダーともに3段組にまでで切るという共通点がありますが、

フッターに表示する内容はブロックエディタで編集できるという便利な点がありますね。(これは、WordPressがバージョンアップしてウィジェットをブロックエディタで編集できるようになったことと、Neveのフッタービルダーの機能が合わさってできている。)

いろんなフッターを、このフッタービルダーを使用して効率よく作ってみたいところですね。


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

LINEで30日間無料サポート
実施中!!

WordPressやバナー・ロゴなどの画像制作に関する疑問解消、アイデアの実現を全力でサポートします!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP