【第13回】フッターの編集

連載講座:WordPressで作る簡単Webサイト

このテーマでは3つのフッターエリアがあります。メインフッター「Primary footer」の他に、その上下に「Above footer」と「Below footer」があります。
Below footer にはフッターメニューとコピーライトを表示させ、メインフッターにはウィジェットを追加して表示する内容を設定します。

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

«次の連載記事»
«前の連載記事»

スポンサーリンク

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ