AFFINGER

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

広告:ページ内にてアフィリエイト広告を利用しています。

フッターの作り方

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

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

ポイント

本記事では、

「AFFINGER」 で「フッター」を作る方法を解説します。

素敵なサイトを作りましょう!

おすすめ副業

\AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください/

PR

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

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

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

.footerlogo {
    display: none;
}

.footer-description{
    display: none;
}
  • クラス 「.footerlogo」 は、「(フッターの)サイト名」 に対して反映し、「display: none;」 で非表示にします
  • クラス 「.footer-description」 は、「(フッターの)キャッチフレーズ」 に対して反映し、「display: none;」 で非表示にします
AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

まとめ

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

ポイント

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

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

おしゃれサイト
ノートパソコン

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

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

PR
―― 今日のおみくじ ――

第 77 番

大吉


今日のメッセージ

ゾロ目最高!素敵な一日が過ごせそうですね!
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記