Wordpressテーマ

AFFINGER6でのトップページのカスタマイズ方法

AFFINGER6トップページカスタマイズアイキャッチ
悩んでいる人
AFFINGER6を使っていますが、ブログのトップページをカスタマイズしたいです。

カスタマイズ方法を教えてください。

 

このような悩みにお答します。

 

本記事の内容

  • カスタマイズ①:ヘッダー下カード型リンク(おすすめカテゴリー)
  • カスタマイズ②:スライドショー(新着記事)
  • カスタマイズ③:2列レイアウト(おすすめ記事)
  • カスタマイズ④:サイドバー(よく読まれている記事)

 

いろんな方のブログを見ていると、トップページには「おすすめ記事」や「読んでほしい記事」などがまとめられて、ブログを訪れた人に読みやすい作りになっています。

 

自分も同じようなトップページにしたいと思う方も多いと思います。

 

本記事ではそんな方向けに、ブログのトップページをカスタマイズする方法を解説します。

 

導入しているテンプレートによって、カスタマイズ方法が微妙に違います

 

当ブログはAFFINGER6を使用しているので、AFFINGER6を導入している方向けになります。

 

本記事を参考にすれば、30分もかからずに読者に見やすいトップページが作れます。

 

ちなみに、フォントのサイズなど、細かい部分のカスタマイズ方法は下記の記事をご覧ください。

関連記事:AFFINGER6カスタマイズ方法(初級編)

 

\購入はコチラから/

AFFINGER6公式サイト>

 

ブログのトップページをカスタマイズする方が良い理由

AFFINGER6トップページカスタマイズアイキャッチ

 

ブログのトップページをカスタマイズするのは、デザイン性をよくするためだという方が多いと思います。

 

それ以外にも下記の2つの良い理由があるため、トップページはカスタマイズした方が良いです。

 

①:読者の利便性

②:SEO対策

 

①:読者の利便性

 

適切なカスタマイズをすることで、読者の利便性がよくなります。

 

なぜかというと、多くの場合は個別記事からアクセスがあります。

個別記事からトップページに戻ったときに、「どこに何の記事があるか」分かりやすく設置されていたら、読者は次に読む記事を見つけやすくなります。

 

トップページが最新記事一覧になっていると、読者は読みたい記事を探してまで見に行ってくれません。

 

読者の利便性のためにもカスタマイズは必要です。

 

②:SEO対策

 

トップページをカスタマイズすることでSEO対策にもなります。

 

なぜかというと、トップページに読んでもらいたい記事を配置することで、クローラーに発見されやすく、そのページの評価を高めやすくなるからです

 

たとえば、まとめ記事とかを配置してあげましょう。

 

最新記事だけを配置していると、トップページの評価が定まりません。

 

SEO対策にもなるので、トップページのカスタマイズは必要です。

 

カスタマイズしたAFFINGER6トップページのイメージ

 

今回紹介するカスタマイズ方法では、下記のようなトップページになります。

 

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

 

このようなイメージのトップページのカスタマイズ方法を紹介していきます。

 

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

 

それではトップページのカスタマイズ方法を解説します。

 

①:ヘッダー下カード型リンク(おすすめカテゴリー)

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

 

ヘッダー下カード型リンクとは、上記の赤枠で囲った部分です。

 

1.ダッシュボードから、「AFFINGER管理」→「ヘッダー下 / おすすめ」をクリックします。

AFFINGER6ヘッダーのカード型リンク

 

2.「ヘッダーカード」に必要事項を入力して、「Save」をクリックします。

AFFINGER6ヘッダーのカード型リンク

①:画像のURL:表示したい画像

②:テキスト:表示したい文字

③:リンク先URL:移動先のURL

④:PCに表示しない・スマホ・タブレットに表示しない:表示しない場合はチェック

最後に「Save」をクリック

 

表示したいカテゴリー分だけ入力していきます。1枚でも4枚でもOKです。

 

以上でヘッダー下カード型リンクを設置することができました。

 

見本画像のように、背景の画像を少し暗くしたい場合は、デザインの「テキストのある背景画像を暗くする」にチェックを入れてください。

AFFINGER6ヘッダーのカード型リンク

 

②:スライドショー(新着記事)

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

 

スライドショー(新着記事)とは、上記の赤枠で囲った部分です。

 

1.ダッシュボードから、「AFFINGER管理」→「トップページ」をクリックします。

AFFINGER6新着記事スライドショー

 

2.挿入コンテンツに、h3タグで「新着記事」と入力します。

そして、改行して、「タグ」→「記事一覧/カード」→「カテゴリー欄(スライドショー)」をクリックします。

AFFINGER6新着記事スライドショー

 

3.下記のようなショートコードが出力されたら、「Save]をクリックします。

AFFINGER6新着記事スライドショー

 

以上でスライドショー(新着記事)を設置することができました。

 

③:2列レイアウト(おすすめ記事)

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

 

2列レイアウト(おすすめ記事)とは、上記の赤枠で囲った部分です。

 

先ほど設置したスライドショー(新着記事)の下に設置していきます。

 

まずはバナー風ボックスを作成します。赤枠で囲った部分です。

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

 

1.ダッシュボードから、「AFFINGER管理」→「トップページ」をクリックします。

AFFINGER6新着記事スライドショー

 

2.挿入コンテンツに、h3タグで「おすすめ記事」と入力します。(新着記事のショートコードの下に)

そして、改行して、「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」をクリックします。

AFFINGER6おすすめ記事作成方法

 

3.下記のように2つの列が挿入されます。

AFFINGER6おすすめ記事作成方法

 

4.左側の黄色の列、右側の水色の列それぞれを編集します。それぞれの列で「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」をクリックします。

AFFINGER6おすすめ記事作成方法

 

5.それぞれ下記のようなショートコードが出力されます。

AFFINGER6おすすめ記事作成方法

 

6.それぞれ「タイトル」の部分を消して、表示したい文字を入力します。

そして、「このテキストは最後に消してください(50%)」を削除します。

AFFINGER6おすすめ記事作成方法

AFFINGER6おすすめ記事作成方法

AFFINGER6おすすめ記事作成方法

 

表示したい文字の大きさを変えたい場合は、fontsize="200" の200を変更してください。

 

文字の背景画像を挿入したい場合は、background_image="画像のURL"で挿入ができます。

 

これでバナー風ボックスができました。

 

続いてカードリンクの作成をします。赤枠で囲った部分です。

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

 

7.カードをクリックすると、下記のようなショートコードが出力されます。

AFFINGER6おすすめ記事作成方法

 

8.表示したい記事IDを入力します。

AFFINGER6おすすめ記事作成方法

 

表示したい記事数を増やしたい場合は、改行して再度「カード」をクリックして増やします。最大4つくらいまでが見やすいです。

 

9.同じように青色の列もカードリンクを挿入して、「Save」をクリックします。

 

10.最後に、ダッシュボードから、→「AFFINGER管理」→「全体設定」→「抜粋設定」をクリックして、「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れて、「Save」をクリックすると、ブログカードがタイトルだけの表示になります。

AFFINGER6おすすめ記事作成方法

AFFINGER6おすすめ記事作成方法

 

以上で2列レイアウト(おすすめ記事)を設置することができました。

 

④:サイドバー(よく読まれている記事)

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

 

サイドバー(よく読まれている記事)とは、上記の赤枠で囲った部分です。

 

1.ダッシュボードから、「AFFINGER管理」→「ヘッダー下 / おすすめ」をクリックします。

AFFINGER6ヘッダーのカード型リンク

 

2.「おすすめ記事一覧」にチェックや必要事項を入力して、「Save」をクリックします。

AFFINGER6よく読まれている記事

 

①:おすすめ記事一覧に表示する文字:見出しに表示したい文字を入力

②:任意の人気記事を指定(投稿又は固定記事ID):表示したい記事のIDを入力

③:サイドのスクロールに表示にする(抜粋非表示)にチェックを入れる

最後に「Save」をクリック

 

以上でサイドバー(よく読まれている記事)を設置することができました。

 

まとめ:AFFINGER6は「AFFINGER管理」を使えば簡単にカスタマイズが可能

AFFINGER6トップページカスタマイズアイキャッチ

 

今回解説したカスタマイズした場所は下記の4つです。

 

①:ヘッダー下カード型リンク(おすすめカテゴリー)

②:スライドショー(新着記事)

③:2列レイアウト(おすすめ記事)

④:サイドバー(よく読まれている記事)

 

AFFINGER6は、「AFFINGER管理」機能を使えば、簡単にトップページをカスタマイズできます。

 

固定ページを新規で作成したり、難しいソースコードを調べたり入力する必要もありません。

 

簡単にカスタマイズできるので、ぜひチャレンジしてみてください!

 

今回は以上です。

 

\購入はコチラから/

AFFINGER6公式サイト>

 

AFFINGER6を実際に使ってみて分かったメリット・デメリットアイキャッチ
【特典付きレビュー】AFFINGER6を実際に使ってみて分かったメリット・デメリット

続きを見る

-Wordpressテーマ