HelloPress のフッターをカスタマイズする方法

Pocket

WordPress用レスポンシブテンプレート「HelloPress」のフッター部分をカスタマイズする方法を紹介します。

前回の記事ではHelloPressのヘッダー部分のカスタマイズを行いました。ここではフッターのレイアウトやコンテンツを作成してみます。ヘッダー同様自由にコンテンツを配置できるため、思い通りのレイアウト構築が可能です。

方法は以下から。

HelloPressのフッターコンテンツをカスタマイズ

HelloPressのフッターレイアウトを作成

レイアウトの作成方法はヘッダーレイアウトの作成方法ページビルダーの使い方をご覧ください。

ここでは以下のように4カラムのレイアウトを作成しました。
HelloPressのフッターをカスタマイズする方法-01

フッターにコンテンツを配置

フッターレイアウトができたので、それぞれのカラムにウィジェットを配置していきます。配置するウィジェットは自由ですが、ここでは以下のようなコンテンツを設置したいと思います。
HelloPressのフッターをカスタマイズする方法-02

一番左のカラムには、見出し、画像、テキストボックスを設置してコンテンツを作ります。カラムを選択して、見出しを設置し、見出しの設定でフッタータイトルを選択します。
HelloPressのフッターをカスタマイズする方法-03

続けて「Add Widget」ボタンを押し、画像ウィジェット(SiteOrigin Image)を選択します。
HelloPressのフッターをカスタマイズする方法-04

画像ウィジェットの設定で任意の画像をアップロード(もしくは選択)し、設定を完了します。
HelloPressのフッターをカスタマイズする方法-05

その下にテキストボックスウィジェットを設置し、設定画面で住所などの情報を入力します。
HelloPressのフッターをカスタマイズする方法-06

2カラム目にメニューリストを設置します。メニューは外観/メニューで作成したメニューを表示できます。見出しをつける場合は見出しウィジェットをメニューリストの上に配置してください。
HelloPressのフッターをカスタマイズする方法-07

3カラム目にサムネイルリストを設置します。表示したい投稿のカテゴリーや表示数などを設置してください。こちらも見出しをつける場合は見出しウィジェットを配置してください。
HelloPressのフッターをカスタマイズする方法-08

4カラム目にカレンダーを設置します。最終的にウィジェットの設置は以下のようになっています。ウィジェットの設置と設定が完了したら、右下の「Done」ボタンを押して保存します。
HelloPressのフッターをカスタマイズする方法-09

ウィジェット画面に戻ったら、「保存」ボタンを押してレイアウトを確定します。
HelloPressのフッターをカスタマイズする方法-10

ページをリロードしフッター部分のコンテンツをチェックします。
HelloPressのフッターをカスタマイズする方法-11

まとめ

レイアウトが完成したら、コンテンツ間のスペースをCSSで調整したりしながらデザイン部分を完成させていきます。CSSのカスタマイズが簡単にできるプラグインもあるのでこちらも合わせてご覧ください。
CSSジェネレータ