【第13回】フッターの編集
このテーマでは３つのフッターエリアがあります。メインフッター「Primary footer」の他に、その上下に「Above footer」と「Below footer」があります。
Below footer にはフッターメニューとコピーライトを表示させ、メインフッターにはウィジェットを追加して表示する内容を設定します。
- カスタマイザーに移動し、[フッタービルダー] をクリックします。
- Below footer をクリックして、Footer Menuエレメントを追加します。
Footer Menu が Copyright の前になるよう、ドラッグして位置を調整します。 - Below footer の設定ボタンをクリックします。
DESIGNタブをクリックし、[色と背景] のプレビューボタンをクリックします。
[16進数での色指定：#277e4c] と設定します。 - Copyrightエレメントをクリックします。
表示する文字列の後半を消して以下のようにします。
Copyright [copyright] [current_year] [site_title]
DESIGNタブをクリックし、[文字色] の プレビューボタンをクリックします。
[16進数での色指定：#eeeeee] と設定します。 - Footer Menuエレメントをクリックします。
タブレットとスマホビューで、[レイアウト：インライン] に変更します。
DESIGNタブをクリックし、[メニューの色] の編集ボタンをクリックします。
[通常]タブで [リンク/テキスト色：#eeeeee]、[マウスオーバー]タブで [リンク色：#aaaaaa] に設定します。 - 次にメインフッターの設定をしますので、Primary footer の設定ボタンをクリックします。
- [カラム：3] にして、[レイアウト] は3つ目のレイアウトを選択します。
DESIGNタブをクリックし、[上枠線：0] に設定します。
[色と背景] のプレビューボタンをクリックし、[16進数での色指定：#eefdf4] に設定します。 - 左カラムの [+]ボタンをクリックし、Widget 1エレメントを追加します。
同様に中カラムには [Widget 2]、右カラムには [Widget 3] を追加します。 - 公開ボタンをクリックしてカスタマイザーを閉じます。
- [外観]-[ウィジェット] をクリックします。
- [Footer Builder Widget 1] に画像ウィジェットを追加し、メディアライブラリから「logo_pc_small.png」を追加します。追加したら保存ボタンをクリックし、[完了] をクリックします。
- [Footer Builder Widget 2] にテキストウィジェットを追加し、テキストタブにして以下を入力します。
[タイトル：]なし
[内容：]
〒100-8111
東京都千代田区千代田1-1-1
電話：03-1111-2222
メール：info@example.com - [Footer Builder Widget 3] に最近の投稿ウィジェットを追加します。
[タイトル:]を [お知らせ] にし、表示する投稿数は、[3] に設定します。 - カスタマイザーに移動して、[フッタービルダー]-[Widget 1] をクリックします。
デスクトップビューの [マージン左] を [20] に設定し、スマホビューは [0] にします。 - [Widget 3] をクリックします。
[ウィジェットの色] の編集ボタンをクリックします。
デスクトップビューにしてから [通常]タブで [リンク：#3a3a3a]、[マウスオーバー]タブで [リンクホバー：#aaaaaa] に設定します。 - ブラウザでフッターの表示を確認しましょう。
