AFFINGER6を使っていますが、見やすいトップページのデザイン方法があれば教えて欲しいです
こちらに関する質問にAFFINGER6使用歴1年以上の僕が答えていきます。
- トップページの制作方法
- おすすめ記事エリアの作り方
- 新規記事エリアの作り方
AFFINGER6を使うとトップページのデザインも自由に変更可能で、非常に見やすく分かりやすく制作が可能です。
読者のほどんどはトップページに向かうと自分で記事を選択してその記事を読みますが、
滞在時間が伸びる傾向にあります。当ブログにおいてホーム画面に配置した記事は他の記事と平均で比較しても長い傾向にあります。
ホーム画面のデザインを変更してからブログ全体の滞在時間も伸びています。
本題に入りますね！
AFFINGER6トップページのカスタマイズ方法
この記事は下記の記事の続きになります。サイト全体の設定方法の概要が知りたい方は先にこちらをご覧ください。
>>AFFINGER6のデザインをカスタマイズする方法【総まとめ】
まだAFFINGER6を利用していない方はこちらを参考にしてください
トップページははじめに作ったら後は基本放置で気になったら修正！
今回は当ブログで採用しているトップページのカスタマイズ方法を紹介します。
是非紹介する内容を基にご自身でカスタマイズして自分のコンテンツにあったトップページを作ってみてください。
当ブログのトップページの構成は下記の様になっています。（※画像では省略されています。）
- おすすめ記事エリア
- 新着記事エリア（スライダー表示）
- 新着記事エリア（リスト表示）
次章からそれぞれ解説していきますね。
【AFFINGER6】おすすめ記事エリアのカスタマイズ方法
おすすめ記事エリアの作成方法をご紹介しますね
事前に表示設定を投稿ページにしておく
「設定」をクリックし「表示設定」を選択する
「最新の投稿」を選択する
選択が完了したら「変更を保存」をクリックします。
管理画面からAFFINGER管理に入る
下図のように「AFFINGER管理」をクリックします。
トップページに移動する
「トップページ」をクリックする。
ツールバーを表示する
「ツールバー切り替え」ボタンをクリックする
見出し文字を追加する
任意で好きなタイトルを付けます。ここでは「おすすめ記事」と入力しています。
見出しのスタイルを変更する
「スタイル」＞「ボックス」＞「グレー」の順にクリック
下図のようにデザインが反映される
2カラムのレイアウトを準備する
「タグ」＞「レイアウト」＞「PCとTab（959px以上）」＞「左右50%」の順にクリック
下図のように表示されたらOKです。
バナー風ボックスを挿入する
バナーのタイトルを変更する
下図の（””）の部分の間にお好みのタイトルを入力する。
今回は「副業初心者」と入力しています。
title="ここに入力する"
ブログカードを作成する
下図のエリアにコードを追加します。
次のコードが当ブログで採用しているものです
[st-card myclass="st-card-minihukidashi" id="" label="" pc_height="" name="" bgcolor="#cccccc" color="" webicon="" readmore="on" thumbnail="on" type=""]（※AFFINGER6の「タグ」＞「記事一覧/カード」＞「ブログカード」＞「CHECK（ふきだし）」のコンテンツをカスタマイズ）
これでブログカードのベースは完了です。数を増やしたい場合このコードをその分増やしましょう！
レイアウトで左右に2等分した右側のエリア（青）も同様にコードをコピーすれば左右対称に作れます。
最後に「このテキストは最後に削除してください（50%）」は削除しておきましょう。
ブログカードのデザインをシンプルにする
「AFFINGER管理」＞「全体設定」＞「抜粋設定」を下図のように設定しブログカードのデザインをシンプルにする
これでブログカードに表示される内容がサムネイル画像とタイトルだけになります！
【AFFINGER6】新規記事エリアスライダー表示カスタマイズ方法
スライダーの追加方法を紹介します。
簡単に追加可能です。
見出し文字を追加する
任意で好きなタイトルを付けます。ここでは「新着記事」と入力しています。
見出しのスタイルを変更する
「スタイル」＞「ボックス」＞「グレー」の順にクリック
下図のようにデザインが反映される
新規記事スライドショーを追加する
作成したボックスの下にスライドショーを追加します。
「タグ」＞「記事一覧/カード」＞「カテゴリ一覧（スライドショー）」の順にクリックするとスライドショーが追加される
【AFFINGER6】新規記事エリアリスト表示カスタマイズ方法
これから紹介する内容はホームページ表示を「最新の投稿」にしている人は読み飛ばしていただいて大丈夫です
（→設定方法はこちら）
「最新の投稿」に設定していた場合リスト表示はデフォルトで表示されています
新規記事リストを追加する
「タグ」＞「記事一覧/カード」＞「カテゴリ一覧」をクリックする
これで簡単に記事リストの追加が可能です。
AFFINGER6やWordPressで記事のIDを確認する方法
記事のIDの確認方法はWordPress側に自分の表示させたい記事などを認識させるときに使います。
知っておいて損はないので活用しましょう。
IDの確認手順
「投稿」＞「投稿一覧」をクリックして下図のIDを確認する
ブログカードに追加したい記事などの追加はここのIDを参考にする
ホーム画面に配置する記事によってブログの収益が左右される
ここまでホーム画面のデザインにこだわるのはホーム画面に配置する記事によって収益が左右されるからです。
当ブログにおいてもホーム画面に設置している記事というのはユーザーの滞在時間も長くそこから別記事に移動してくれたりなど収益の発生やクリックの発生はここを起点とします。
自分が見せたい強化したい記事などを積極的に表示しましょう。
注意したいのはセールス系の記事を前面に押し出しすぎるのではなく読者の為になる記事を置くのがポイントです！
今回紹介したテーマを実際に僕が使ったときの感想や価格について触れたレビューがあります。
気になる方はどうぞ。
>>【AFFINGER6】アフィンガー6を実際に使ってみた感想とレビュー
今回は以上です。
