カスタマイズ方法を教えてください。
このような悩みにお答します。
本記事の内容
- カスタマイズ①：ヘッダー下カード型リンク（おすすめカテゴリー）
- カスタマイズ②：スライドショー（新着記事）
- カスタマイズ③：2列レイアウト（おすすめ記事）
- カスタマイズ④：サイドバー（よく読まれている記事）
いろんな方のブログを見ていると、トップページには「おすすめ記事」や「読んでほしい記事」などがまとめられて、ブログを訪れた人に読みやすい作りになっています。
自分も同じようなトップページにしたいと思う方も多いと思います。
本記事ではそんな方向けに、ブログのトップページをカスタマイズする方法を解説します。
導入しているテンプレートによって、カスタマイズ方法が微妙に違います。
当ブログはAFFINGER6を使用しているので、AFFINGER6を導入している方向けになります。
ちなみに、フォントのサイズなど、細かい部分のカスタマイズ方法は下記の記事をご覧ください。
＼購入はコチラから／
ブログのトップページをカスタマイズする方が良い理由
ブログのトップページをカスタマイズするのは、デザイン性をよくするためだという方が多いと思います。
それ以外にも下記の2つの良い理由があるため、トップページはカスタマイズした方が良いです。
①：読者の利便性
②：SEO対策
①：読者の利便性
適切なカスタマイズをすることで、読者の利便性がよくなります。
なぜかというと、多くの場合は個別記事からアクセスがあります。
個別記事からトップページに戻ったときに、「どこに何の記事があるか」分かりやすく設置されていたら、読者は次に読む記事を見つけやすくなります。
トップページが最新記事一覧になっていると、読者は読みたい記事を探してまで見に行ってくれません。
読者の利便性のためにもカスタマイズは必要です。
②：SEO対策
トップページをカスタマイズすることでSEO対策にもなります。
なぜかというと、トップページに読んでもらいたい記事を配置することで、クローラーに発見されやすく、そのページの評価を高めやすくなるからです。
最新記事だけを配置していると、トップページの評価が定まりません。
SEO対策にもなるので、トップページのカスタマイズは必要です。
カスタマイズしたAFFINGER6トップページのイメージ
今回紹介するカスタマイズ方法では、下記のようなトップページになります。
AFFINGER6トップページのカスタマイズ方法
それではトップページのカスタマイズ方法を解説します。
①：ヘッダー下カード型リンク（おすすめカテゴリー）
ヘッダー下カード型リンクとは、上記の赤枠で囲った部分です。
1.ダッシュボードから、「AFFINGER管理」→「ヘッダー下 / おすすめ」をクリックします。
2.「ヘッダーカード」に必要事項を入力して、「Save」をクリックします。
①：画像のURL：表示したい画像
②：テキスト：表示したい文字
③：リンク先URL：移動先のURL
④：PCに表示しない・スマホ・タブレットに表示しない：表示しない場合はチェック
最後に「Save」をクリック
表示したいカテゴリー分だけ入力していきます。1枚でも4枚でもOKです。
以上でヘッダー下カード型リンクを設置することができました。
②：スライドショー（新着記事）
スライドショー（新着記事）とは、上記の赤枠で囲った部分です。
1.ダッシュボードから、「AFFINGER管理」→「トップページ」をクリックします。
2.挿入コンテンツに、h3タグで「新着記事」と入力します。
そして、改行して、「タグ」→「記事一覧/カード」→「カテゴリー欄（スライドショー）」をクリックします。
3.下記のようなショートコードが出力されたら、「Save]をクリックします。
以上でスライドショー（新着記事）を設置することができました。
③：2列レイアウト（おすすめ記事）
2列レイアウト（おすすめ記事）とは、上記の赤枠で囲った部分です。
先ほど設置したスライドショー（新着記事）の下に設置していきます。
まずはバナー風ボックスを作成します。赤枠で囲った部分です。
1.ダッシュボードから、「AFFINGER管理」→「トップページ」をクリックします。
2.挿入コンテンツに、h3タグで「おすすめ記事」と入力します。（新着記事のショートコードの下に）
そして、改行して、「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」をクリックします。
3.下記のように2つの列が挿入されます。
4.左側の黄色の列、右側の水色の列それぞれを編集します。それぞれの列で「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」をクリックします。
5.それぞれ下記のようなショートコードが出力されます。
6.それぞれ「タイトル」の部分を消して、表示したい文字を入力します。
そして、「このテキストは最後に消してください（50％）」を削除します。
表示したい文字の大きさを変えたい場合は、fontsize＝"200" の200を変更してください。
これでバナー風ボックスができました。
続いてカードリンクの作成をします。赤枠で囲った部分です。
7.カードをクリックすると、下記のようなショートコードが出力されます。
8.表示したい記事IDを入力します。
9.同じように青色の列もカードリンクを挿入して、「Save」をクリックします。
10.最後に、ダッシュボードから、→「AFFINGER管理」→「全体設定」→「抜粋設定」をクリックして、「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れて、「Save」をクリックすると、ブログカードがタイトルだけの表示になります。
以上で2列レイアウト（おすすめ記事）を設置することができました。
④：サイドバー（よく読まれている記事）
サイドバー（よく読まれている記事）とは、上記の赤枠で囲った部分です。
1.ダッシュボードから、「AFFINGER管理」→「ヘッダー下 / おすすめ」をクリックします。
2.「おすすめ記事一覧」にチェックや必要事項を入力して、「Save」をクリックします。
①：おすすめ記事一覧に表示する文字：見出しに表示したい文字を入力
②：任意の人気記事を指定（投稿又は固定記事ID）：表示したい記事のIDを入力
③：サイドのスクロールに表示にする（抜粋非表示）にチェックを入れる
最後に「Save」をクリック
以上でサイドバー（よく読まれている記事）を設置することができました。
まとめ：AFFINGER6は「AFFINGER管理」を使えば簡単にカスタマイズが可能
今回解説したカスタマイズした場所は下記の4つです。
①：ヘッダー下カード型リンク（おすすめカテゴリー）
②：スライドショー（新着記事）
③：2列レイアウト（おすすめ記事）
④：サイドバー（よく読まれている記事）
AFFINGER6は、「AFFINGER管理」機能を使えば、簡単にトップページをカスタマイズできます。
固定ページを新規で作成したり、難しいソースコードを調べたり入力する必要もありません。
簡単にカスタマイズできるので、ぜひチャレンジしてみてください！
今回は以上です。
＼購入はコチラから／
-
-
【特典付きレビュー】AFFINGER6を実際に使ってみて分かったメリット・デメリット
続きを見る
