ブログのトップページを「固定ページ」で作成しました。
元々のフォーマットでも良かったのですが、ブログのカスタマイズをやってると細かいところまで気になってきますよね。
「固定ページ」で作成することで、記事を作成する時と同じように自由に組み立てることができます。
トップページは初めてブログを訪れた人が見ることが多いページです。
なので、「このブログはどんなブログ？」ということを分かりやすく魅力的に構成する必要があります。
そのことで「また訪れたいブログ」になるかどうかという、とても大切なページなのです。
では、具体的に私のブログトップの構成意図とカスタマイズ方法をご紹介します。
ちなみに使用テーマは「AFFINGER6」です。
構成にあたり「Tsuzuki Blog」さんを参考にさせて頂きました！
ありがとうござます！
-
-
Tsuzuki Blog
www.tsuzukiblog.org
固定ページでのトップ構成意図
完成形がこちら。
タイトル下のブログカードはAFFINGERの元々の仕様で設定可能ですが、その下に「おすすめ記事」として大きく4つのジャンルでまとめています。
このブログのメインテーマは「旅」と「グルメ」ですが、最近は「副業」や「資産運用」などテーマが幅広くなってきたこともあり、どう整理するか考えていました。
おすすめ記事をジャンルごとにまとめることで、「まずは見て欲しいジャンルと記事」をユーザーに訴求することができます。
私の場合は旅行記を中心に旅情報を書いてきたので、まずは旅行記、そしてそれに付随するマイルを中心とした旅ハック情報を見てもらえたらと思っています。
次に力を入れている、週末を中心とした食べ歩きや旅行・出張先でのグルメ情報です。
そして、最後に最近ハマっている副業関係。
という順番に整理しました。
デフォルトの構成でもテーマの優先順位を作ることもできますが、ジャンルごとに見て欲しい順番と記事を並べることは難しかったのです。
初めてこのブログに訪れた人に
「どんなジャンルのブログなのか」
「まずどの記事を読んで欲しいのか」
を整理できたのが固定ページのメリットです。
カスタマイズ方法
では、ここからは具体的なカスタマイズ方法について順番に解説していきます。
まずはカテゴリ下のヘッダーカードからです。
ヘッダーカード設定
こちらはAFFINGERの管理画面から設定できるので楽ちんです。
「AFFINGER管理」→「ヘッダー下／おすすめ」
- 画像URL（メディアライブラリの画像を選択した時に表示される「ファイルの URL」）
- テキスト（タイトルとキャプション）
- リンク先
上記をそれぞれ設定していきます。
リンク先はまとめ記事にしたり、収益性の高い記事にしたり、ブログで特に見て欲しい記事を厳選しましょう。
テキストはそのリンク先のタイトルをそのまま入れるのではなく、さらに短くフックになるタイトルにしましょう。
例えば、私のマイルに関する記事はこんな整理にしています。
・リンク先の記事タイトル
【マイルの貯め方】5年間研究し続けて習得したマイル獲得術のすべてを公開します
・ブログカードタイトル
マイル活用術
・ブログカードキャプション
お得に豪華旅を実現する方法
おすすめ記事設定
続いてヘッダーカード下の「おすすめ記事」のカスタマイズ方法です。
まずは固定ページから新規作成を選択。
タイトルは何でも良いですが、トップページに設定するので分かりやすい表記にしておきましょう。
まず「おすすめ記事」はh3タグで表示します。
続いて「旅行記」や「マイル」などのカテゴリカードについては、
「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」
の順に選択します。
このように表示されるかと思います。
続いてこの中身を構成していきます。
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」
の順に選択します。
このように表示されます。
ここで入力するのは下記3点。
- st-flexbox url="リンク先URL"
- title="カテゴリタイトル"
- background_image="背景画像"
私はカテゴリカードからリンクは不要だったので設定していません。
私のブログでは下記のように設定しています。
続いてその下の記事カードリンク部分です。
カードボタンをクリックするとこのようなコードが出てきます。
これに入力していきます。
ただ、これで設定すると「続きを読む」が表示されるのでカスタマイズしました。
Before
After
Before
After
どちらかお好みの方で記事IDを設定しましょう。
記事数もお好みですが、あまり多いとだれるので、3〜4つくらいが最適ではないでしょうか。
同じようにその他のカテゴリも設定していきます。
私は4カテゴリ×3記事ずつにしています。
新着記事設定
最後に新着記事の設定方法です。
おすすめ記事の下に入れています。
「タグ」→「記事一覧／カード」→「カテゴリ一覧」
の順に選択します。
すると、このような表示になるかと思いますがこのままでOKです。
新着記事一覧が表示されます。
もしスライドショーで表示したければ「カテゴリ（スライドショー一覧）」を選択してください。
ブログトップページへの設定方法
固定ページの作成を終えるといよいよトップページに設定してきます。
やり方は簡単。
「設定」→「表示設定」
ここのホームページの表示を「固定ページ」。
そして、先程固定ページで作成した「タイトル（トップページ）」が出てくるので選択するだけです。
ブログはファーストインパクトが大切
以上、固定ページでブログのトップページを作成する方法をご紹介させて頂きました。
ブログは一見さんもいいですが、やはりファン作りが大切です。
そのために、初めてブログを訪れて頂いたユーザーが見ることの多いトップページで、いかに良いファーストインパクトを残せるかがキーになってきます。
「なんだかよくわからない」で終わらずに「また来たい」と思ってもらうためにトップページを作り込んでいきましょう！