【PVが伸びる】アフィンガー5のトップページカスタマイズ

WordPressテーマ「アフィンガー５」でトップページをカスタマイズして、PVや回遊を増やしたい！

参考になるデザインはないかな…？

というお悩みにお応えします！

こんにちは、のんびり更新で6桁収益を実現しております、ブロガーのりよ(@mitsuliyo_liyo)です

通常、ブログはもっとも新しい記事が一番上に掲載されます。

新着記事を見てもらうのは嬉しいことですが、一方で本当に見てほしい記事がどんどん埋もれていってしまうことも事実です。

そのような場合の解決策に【ブログのトップページで紹介する】という方法があります。

検索やSNSから訪問してくれた人が「良い記事だな」と感じた時、トップページに移動する確率が高いからです。

そのため、回遊したくなるトップページデザインを作ることは非常に大切。

逆にいうと、トップページが回遊しやすいデザインじゃないと離脱を招きます。

特定の記事を見て帰るだけの人が多い中、トップページにまで来てくれる人は貴重なので、デザイン一つで離脱させてしまうのはもったいない！

今回は、トップページまで来てくれた人が回遊しやすくなるカスタマイズ方法を３つ紹介します。

実際に当サイトで、デザインを変えただけでPVが上がった実績がある手法です。

ぜひ参考にしてみてください。

なぜトップページのカスタマイズでPVがあがるのか

りよ

トップページが回遊しやすいデザインであるということは、PVが伸びる好循環のきっかけになるんです！

「AFFINGER5管理」から設定する

ここからは、AFFINGER 5 (WING)をインストールしてある前提でお話を進めていきます。

トップページのカスタマイズは AFFINGER5管理 から設定します。

他のブログテーマに比べて圧倒的に自由にカスタマイズできます。

アフィンガーの最も大きな魅力の一つだと感じています。

STEP1：「AFFINGER管理」をクリック

STEP2：「トップページ」をクリック

挿入コンテンツを使います。

挿入コンテンツはブログの記事を作成するように自由にカスタマイズできます。

反映される位置はタイトルとヘッダーメニューの直下（赤枠部分）。

まさにサイトの顔になるトップページ部分です。

本記事では、この挿入コンテンツを利用したカスタマイズ方法をご紹介します。

＊編集スペースは右下の三角から広げられます。

LIYOMEMO風カスタマイズ

LIYO MEMOでは、推し記事を前面に出しつつ、カテゴリごとに記事を閲覧しやすいスタイルにしています。

以下がLIYO MEMOのトップページです。

トップページの構成はこんなかんじ。

それぞれの作り方を見ていきましょう！

1.一番見て欲しい記事(Adobeソフトを安く購入する方法)

Adobeの記事リンクは、通常の画像リンクです（画像は自作です）

メディアを追加から画像を挿入し、リンクボタンからリンク先を設定します。

2.見出し(プログラミング)

私はデザイン的に見出し3(h3)を使っていますが、h2~h6のどの見出しを使っても構いません。

見出しデザインはカスタマイズ→各テキストとhタグ(見出し)から設定してください。

ちなみにLIYOMEMOのデザインは以下のような設定になっています。

3.記事紹介

記事紹介の部分は、少しコツが必要です。

やっていることは

です。

順を追って説明していきますね。

①レイアウトを決める

タグ→レイアウト→PCとTab(959px以上)→左右50%を選択してください。

すると以下のフォームが出てきます。

この枠に入れた要素が、PCとタブレットで2分割に表示されます。

（スマホでは左ボックスの要素が上、右ボックスの要素が下にきます）

②記事を指定する

タグ→記事一覧→記事一覧を選択してください。

出てきたショートコードのid="〇〇"の部分に、記事IDを入力します。

複数指定したい場合は、カンマで区切ってください。

両方入れるとこのようになります。

これでOK！

記事数の上限はありませんが、左右合計2~6記事程度が、PCでもスマホでも適度に感じています。

ちなみに、スマホでは以下の順番で表示されます。

スマホユーザーが多いサイトは、スマホのユーザビリティも考慮して記事の順番を決めてくださいね。

4.カテゴリ別記事一覧に飛ぶボタン

当サイトではaffingerの一番基本のボタンを使っています。

タグ→カスタムボタン→ノーマル→基本を選択してください。

もちろん、サイトデザインに合わせてボタンデザインも変更してOKです♪

スライドの挿入

次にスライドについて説明します。

カテゴリ数が多くなってきたため、今のLIYOMEMOでは使っていませんが、もともと愛用しておりました。

スライドショーは以下のようなスタイルです。（タグを変更することで細部までカスタマイズできます）

数多くの記事を場所を取らずにトップページで紹介できるのが一番のメリット！

また、意味もなくポチポチスライドしてみたくなるデザインも魅力の一つです。

選択するのはタグ→記事一覧→カテゴリ一覧(スライドショー)です。

選択すると、以下のショートコードが自動で入力されます。

赤字の部分を入力(変更)してカスタマイズしていきます。

基本的に、数字やon/offの設定です。

注釈が必要な項目があるので、ピックアップして説明しますね。(緑字部分)

st-catgroup cat="カテゴリID"

投稿→カテゴリーを選択し、表示したいカテゴリのIDを入力してください。

order="並び順(desc/asc)

• desc：降順
• asc：昇順

orderby="並べ方"

• id：記事ID
• date：日付
• modified：更新日
• rand：ランダム

slides_to_show="表示列数"

lide_to_show="3,3,1"のように、3つの数字をカンマで区切って入力します。

数字の意味は「表示画面の大きさ別に何列表示するか」です。

つまり、lide_to_show="3,3,1"の場合は「PCとタブレットで3列、スマホで1列」という設定です。

fullsize_type="画像とテキストの表示"

• card：アイキャッチ画像のみ
• text：アイキャッチ画像＋記事タイトル

カードスタイル

案外知られていない、カードスタイル機能。

別売りプラグインのJETとは少々異なるデザインですが、プラグインなしで記事をカードスタイルにすることができます。

カードスタイルはレイアウトもスッキリしますし、アイキャッチの視認性も高まります。

デザインはこんなかんじ。

ただ、１列のカードスタイルにするとPC表示ではやたら大きくなってしまいます。

そのため、LIYOMEMO風カスタマイズで紹介したタグ→レイアウト→PCとTab(959px以上)→左右50%と併せて利用するとgoodです。

PCとタブレットで2分割になるようレイアウト枠を表示させてから・・・

スタイル→レイアウト→カードスタイルを選択。

id="〇〇"の部分に、表示したい記事IDを入力します。

すると、表示はこのようになります。

2列にするとPCから見てもサイズがちょうどいいですね。

カードスタイルはトップページだけでなく、記事内で別記事を紹介するのにも適しています。

汎用性が高いテクニックなので、さまざまなシーンで活用してみてくださいね！

まとめ

本記事では、Affinger5利用者向けに、PVが伸びるトップページのカスタマイズ方法をご紹介しました。

プログを始めて、私も試行錯誤を重ねました。（たくさん失敗もしました）

遅筆で更新が多くないので、ブログの仕組みには特にこだわっています。

のんびり更新でも6桁収入を得られるようになり、安定したブログ運営ができるようになってきた今、簡単に真似できて効果が見込めるテクニックをお伝えしたいと思って本記事を書きました。

私の今までの経験がお役に立てたら嬉しいです。

他にもブログ運営にお役に立ちそうな記事を２つご紹介しますね。

ご興味があればご覧ください＾＾

クローズドASPに自分からアプローチする方法