AFFINGER6トップページのカスタマイズ方法!作り方まとめ

2021年7月31日

AFFINGER6

シン

フリーランスエンジニア|Oracle認定Java Gold保有|全日本SEO協会認定 SEO検定全級保有(1〜4級)|プログラミング、エンジニア、SEO情報を発信|大阪在住

本記事では、AFFINGER6で下記のようなトップページを簡単に作る方法について解説します。

AFFINGER6 通常版

AFFINGER公式サイトより、デザイン設定済みのテンプレートを無料でダウンロードできます。独自のデザインにカスタマイズしたい方のみ、本記事をご覧ください。

今回は、AFFINGER6の通常版をお使いの方に向けての内容となります。テーマのデザインカスタマイズが苦手な方にも、わかりやすく画像付きで解説しますね。

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

AFFINGER6の基本情報

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

AFFINGER6とは

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

商品名AFFINGER6(ACITON)
制作会社株式会社オンスピード
価格(税込)14,800円
SEO対策
カスタマイズ性

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

当ブログもAFFINGER6を使用しております。
シン

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

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

AFFINGER6 通常版 Ver

※現在の当サイトの様な、ブログカード型のデザインにするなら、AFFINGER6の通常版に加えて、JET2(税込4,980円)を購入すればできます。

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

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

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

これからカスタマイズする箇所は、下記の部分です。(ヘッダーはなし)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※必ずエディターを「テキスト」を選択してからコピペしてください。

<h3>見出し名</h3>
<div class="clearfix responbox50">
<div class="lbox">[st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""] [st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""]</div>
<div class="lbox">[st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""] [st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""]</div>
</div>
<h3>見出し名</h3>
<div class="clearfix responbox50">
<div class="lbox">[st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""] [st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""]</div>
<div class="lbox">[st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""] [st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""]</div>
</div>
<h3>見出し名</h3>
<div class="clearfix responbox50">
<div class="lbox">[st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""] [st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""]</div>
<div class="lbox">[st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""] [st-card myclass="" id="記事ID" label="" pc_height="130" name="" bgcolor="" color="" fontawesome="" readmore="off" thumbnail="on" type=""]</div>
</div>
<h3>新着記事一覧</h3>

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

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

WordPressの記事ID

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

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

チェック箇所

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

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

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

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

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

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

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

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

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

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

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

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

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

フッターカラー

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

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

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

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

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

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

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

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

フッターメニュー

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

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

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

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

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

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

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

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

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

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

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

シン

フリーランスエンジニア|Oracle認定Java Gold保有|全日本SEO協会認定 SEO検定全級保有(1〜4級)|プログラミング、エンジニア、SEO情報を発信|大阪在住