AFFINGER

【AFFINGER6】フッターの作り方を簡単解説!メニュー、2列(2段)、3列(3段)、キャプションを消す方法について!



一日の締めをお洒落なBARでカクテルで!

サイトの締めはフッターで!

意外と見落としがちですが、フッターは「ほぼ必ずユーザーの目に留まる重要なエリア」です。

サイトの回遊率向上の最後の砦であり、フッターから別の記事や、アフィリエイト広告にも移動してくれる可能性もあります。

WordPress の優良テーマの一つ「AFFINGER6」 で「フッター」を作る方法を解説します。

AFFINGER ご購入はこちら

AFFINGER6 で作るフッターの形のサンプル

AFFINGER6では、主に以下のスタイルでフッターを作ることができます。

メニュー

あり/なし
列数

なし/一列/二列/三列

例)メニューのみのフッター

メニューを付けて段落を付けないパターンです。

■ 例)メニュー+三段のフッター

メニューを付けて三段(三列)使ったフッターです。

フッターエリアの基本設定

WordPress の管理画面から、「外観」 → 「カスタマイズ」 → 「基本エリア設定」 → 「フッターエリア」 を選択します。

文字色、背景色などの基本的な設定をすることが可能です。

フッターにメニューを付ける方法

フッターにメニューを付ける方法です。

step
1
フッター用のメニューを作る

  1. WordPress の管理画面から、「外観」 → 「カスタマイズ」 → 「メニュー」 を選択します
  2. 「メニューを新規作成」 ボタンを押下してメニューを作ります
  3. メニュー名に「任意の名前」を付け、「フッター用メニュー(現在:フッター用)」を指定して「公開」します

step
2
メニューに項目を作る

  1. WordPress の管理画面から、「外観」 → 「メニュー」 を選択します
  2. 「編集するメニューを選択」 プルダウンで 「フッター用(フッター用メニュー)」 を選択して、項目を編集して 「メニューを保存」 します

step
3
完成です

サイトのフッターにメニューを表示しますので、いろいろクリックして楽しんでください

動作確認しましょう。

フッターに段落を作る

■ 一列目の作り方

step
1
一列目を作る

  1. WordPress の管理画面から、「外観」 → 「ウィジェット」 を選択します
  2. 「ヘッダー右(フッター)ウィジェット」 を選択して、コンテンツを作成します

step
2
ヘッダー右の表示を消す

AFFINGER の場合、フッターの一段目と、ヘッダーの右側には同じコンテンツを表示します。

ヘッダーへの表示が不要の場合は、表示を行わない設定をします。

  1. WordPress の管理画面から、「AFFINGER 管理」 → 「ヘッダー」 を選択します
  2. 「ヘッダーを分割しない」 をチェックします

■ 二列目の作り方

  1. WordPress の管理画面から、「外観」 → 「ウィジェット」 を選択します
  2. 「フッター右用ウィジェット(2列目)」 を選択して、コンテンツを作成します

■ 三列目の作り方

  1. WordPress の管理画面から、「外観」 → 「ウィジェット」 を選択します
  2. 「フッター右用ウィジェット(3列目)」 を選択して、コンテンツを作成します

サイト名とキャッチフレーズの表示について

■ サイト名とキャッチフレーズを表示しない場合

標準機能ではフッター一段目に 「サイト名」 と 「キャッチフレーズ」 を表示します。消す方法を紹介します。

「追加CSS」を定義して変更します。

WordPress の管理画面から 「外観」 → 「カスタマイズ」 → 「追加CSS」 を選択し、次のコードを埋め込みます。

.footerlogo {
    display: none;
}

.footer-description{
    display: none;
}

  • クラス 「.footerlogo」 は、「(フッターの)サイト名」 に対して反映し、「display: none;」 で非表示にします
  • クラス 「.footer-description」 は、「(フッターの)キャッチフレーズ」 に対して反映し、「display: none;」 で非表示にします

まとめ

WordPress の優良テーマ 「AFFINGER6」 では多彩なフッターを作ることができます。

  • フッターにメニューを表示する
  • フッターに1列目~3列目を作成する

かっこいいフッターを作ってくださいね!

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com