AFFINGER

AFFINGER6トップページの作り方【カスタマイズ方法】

2021年7月31日

シン

ブロガー|本業プログラマー|大阪在住|29歳|SEOライティング独学|特化ブログ月間33万PV達成|使用プログラミング言語:Java/HTML/CSS/SQL|好きな食べ物はカレー|猫好きです。

AFFINGER6のトップページの作り方ってどうやるの?カスタマイズ方法を教えて欲しい。

こんなお悩みにお答えします。

本記事の内容

  • AFFINGER6の基本情報
  • AFFINGER6トップページの作り方
  • AFFINGER6フッターの作り方
シン(1000)
Twitter(@shin_memo09)

本記事をご覧いただければ、AFFINGER6で当ブログのようなトップページを簡単に作る方法について知ることができます。

テーマのデザインカスタマイズが苦手な方にも、超わかりやすく、画像付きで解説いたします。

記事の後半では、フッターのカスタマイズ方法についても解説しておりますので、ぜひ最後までご覧ください。

AFFINGER6の基本情報

ACTION(AFFINGER6)

まずはAFFINGER6の基本情報と、トップページの全体像について解説していきます。

AFFINGER6とは

AFFINGER6(アフィンガー)とは、デザインやカスタマイズ性、SEO対策のしやすさでも定評のある「WordPress有料テーマ」です。

AFFINGER6の主な情報を下記表にまとめてみました。

商品名AFFINGER6(ACITON)
制作会社株式会社オンスピード
価格(税込)14,800円
SEO対策
カスタマイズ性
当ブログもAFFINGER6を使用しております。
シン

AFFINGER6のトップページ【シンメモVer】

今回は当ブログのようなトップページを作成することをゴールとします。

AFFINGER6のトップページ「シンメモVer」

これからカスタマイズする箇所は下記の部分です。

  • ヘッダー下|おすすめ記事
  • トップ上|おすすめ記事
  • トップ下|新着記事一覧
  • フッター|フッターメニュー

AFFINGER6トップページカスタマイズ

では実際にカスタマイズを行っていきましょう。

おすすめ記事【ヘッダー下】

まずは下記画像のように、ヘッダー下におすすめ記事を表示させる方法について解説します。

ヘッダー下のおすすめ記事

こちらの手順はAFFINGER管理設定から行えます。

「外観→AFFINGER管理→ヘッダー下/おすすめ」

AFFINGER6トップページおすすめ記事
AFFINGER6おすすめ記事

各項目を入力し、右上の「SAVE」で保存すると、おすすめ記事が表示されます。

  • 画像のURL:表示させたい画像のURLを入力
  • テキスト:表示させたいテキストを入力
  • リンク先URL:対象の記事URL
下の方にスクロールすると、デザインのチェック欄がありますが、ここはお好みでどうぞ。
シン

おすすめ記事【トップ上】

ではトップページ上部に表示させる「おすすめ記事」を下記の画像の通りに作っていきます。

AFFINGER6トップページ【おすすめ記事】

やり方は、AFFINGER管理設定のトップページへ進みましょう。

「外観→AFFINGER管理→トップページ」

AFFINGER6トップページカスタマイズ「ボディ」
AFFINGER6トップページ「おすすめ記事」

エディターを「テキスト」に変更し、下記コードをコピペして、右上のSAVEボタンを押していただければOKです。

※「見出し名」と「記事ID」は書き換えてください。

記事IDの確認方法は「WordPress管理画面→投稿一覧→ID」で確認ができますので、おすすめ記事に表示させたい記事のIDを設定してみてください。

WordPressの記事ID

ここまでできましたら、最後に抜粋設定を行いましょう。

「AFFINGER管理→全体設定→抜粋設定」と進み、下記画像の2点にチェックを入れましょう。

チェック箇所

  • PC閲覧時も記事一覧(トップ・アーカイブ・関連記事)の抜粋を非表示にする
  • PC閲覧時のブログカード及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする

上記の設定をすることで、ブログカードにタイトルと画像のみ表示されるようになります。

設定がうまく反映されているかは、保存をした後に、実際にトップ画面を見ながら確認しましょう。
シン

新着記事一覧【トップ下】

トップページの下に「新着記事一覧」を表示させていきましょう。

完成イメージは下記の通りです。

設定方法はまず「AFFINGER管理→トップページ」と進みます。

先程コピペしたコードの最下部に「新着記事一覧」の見出しがあることを確認しましょう。

次にそのまま下にスクロールすると、下記画像のチェック欄がでてくるので、該当項目のチェックを外しましょう。

これでトップページに「新着記事一覧」が表示されるようになります。

新着記事一覧はスライドショーでも表示は可能ですが、サイト速度低下の恐れがあるため、個人的におすすめはしないです。
シン

AFFINGER6トップページカスタマイズ【フッター編】

続いてフッターをカスタマイズしていきましょう!

フッターカラー

フッターの完成イメージは下記の通りです。

ではフッターの色を設定していきますが、まずは「PC版」から行っていきましょう。

「外観→カスタマイズ→基本エリア→フッター」

「フッターの背景色を100%にする」にチェックを入れると、フッターの幅いっぱいにカラーが適用されます。

背景色と文字色はお好みで設定してみてくださいね!
シン

続いてスマホ版のフッターカラーを設定します。

「外観→カスタマイズ→各メニュー設定→スマホフッターメニュー」

こちらも文字色と背景色はお好きに設定してみてください。

フッターメニュー

次にフッターメニューの設定を行っていきましょう。

フッターメニューは「お問い合わせ・プライバシーポリシー・運営者情報」など、好きなカテゴリーを設置することができます。

以下の手順で作成していきます。

「外観→カスタマイズ→メニュー」

「メニュー名入力→フッターメニュー&スマホフッターメニューにチェック→次へ」

「項目を追加ボタンをクリック→追加したいメニューを+で左側に追加→公開ボタンをクリック→完了」

ちなみに運営者情報(プロフィールページ)などは、事前に固定ページを新規作成しておく事で、上記のメニューで追加する事ができます。

AFFINGER6は見た目で差別化しよう:まとめ

画像alt属性の説明

今回はAFFINGER6のトップページの作り方について解説してきました。

AFFINGER6は稼ぐに特化したテーマでとても人気があります。

他の人と被らないように、デザインなどで差別化していけると良いですね。
シン

それでは以上となります。

  • この記事を書いた人
  • 最新記事

シン

ブロガー|本業プログラマー|大阪在住|29歳|SEOライティング独学|特化ブログ月間33万PV達成|使用プログラミング言語:Java/HTML/CSS/SQL|好きな食べ物はカレー|猫好きです。

-AFFINGER