ブログ

Affinger5でカスタマイズ〜トップページのレイアウト編〜

2019-08-03

【簡単!】ブログのトップページをオシャレなレイアウトに変更する方法

こんにちは、やっぴー(@torinoolympic) です。

先日、本ブログのトップページを変更しました。理由は、最新記事の羅列してあるような「THE ブログのレイアウト」から脱却したかったから。

今はこの通り。メニューの下に4列で固定記事表示、その下に2列でカテゴリー毎に記事がまとめられています。

現在のレイアウト

 

スマホではこんな感じで、PCでは下のカテゴリーごとのところが2列だったのが、1列で表示されています。

現在のレイアウト2

この見栄えにするための前提条件は

  • WordPressユーザーであること。
  • 有料テーマAFFINGER5を導入すること。

WordPressでブログを書いている人で、AFFINGER5を導入している方向けの記事となります。

ブログのトップページをオシャレにカスタマイズして、綺麗に見やすくすることで、トップページからいろんなページに行ってもらうことが可能になります。

そうすることで、今までせっかく書いてきたいろいろな記事を読んでもらえる可能性が高まり、必然的にPVも上昇します。

とにかく良いことだらけなので、本記事を参考にして、ぜひ試していただきたいと思います。

 

Affinger5でカスタマイズ〜トップページのレイアウト編〜

まずはAFFINGER5の導入(必須!)

まずは、AFFINGER5を導入しないと話が始まりません。

「でもAFFINGER5って有料テーマなんでしょ?たかがブログなんかにお金を払いたく無いよ。」

という方、気持ちはよくわかります。

僕もブログを始めるにあたり、先行投資するのはかなり勇気の要ることでした。でも、僕は先行投資しておいて正解だと感じました。なぜなら、プログラミングの知識がなくても視認性の高い高度なサイトを作れるからです。

プログラミングを1から勉強して自分で組めるようになるまで待つか、有料テーマを購入してサクッと見栄えの良いページを作るか。プログラミングを習得するとなると、最短でも6ヶ月〜1年はかかるし、自分で作るとなると手間です。

だとすれば、お金をかけてでも導入した方が明らかに効率が良いです。

 

ゲットした後すぐに、WordpressのダッシュボードからテーマをAFFINGER5のChildに切り替えてください。

テーマ切り替え

 

Childに変更する理由は、親テーマでカスタマイズすると、アップデートが入った時に苦労してカスタマイズしたものがリセットされるからです。

 

AFFINGER5の設定

AFFINGER5を無事セッティングできたら、次はAFFINGER5の設定に移ります。その前に、もう一度完成形を見ておきましょう。

完成図再確認

 

この順番で説明していきます。

メニューすぐ下の4つの横並びリンクの作成方法

メニューのすぐ下の4つの記事リンクを作成します。

 

step
1
ダッシュボードの下の方に「AFFINGER5 管理」という項目があるのでクリック。

step
2
そうすると、AFFINGER5の管理ページにいくので、「おすすめ記事一覧」をクリック。

4列①

 

「おすすめヘッダーカード」というところをいじります。その際、ヘッダーカード1〜4までありますが、1が一番左で、2がその右、3がその右で、一番右が4になります。

4列②

 

step
3
下の画像に従い、「画像のURL」、「テキスト」、「リンク先URL」を設定する。

4列③

 

step
4
ヘッダーカード4まで設定完了すると、メニュー下に4つカード型のリンクができているはずです。

カテゴリーごとに2列で分けるゾーンの作成方法

続いて、メインである2列のカテゴリーごとの仕分けゾーンです。

 

step
1
ダッシュボードの下の方に「AFFINGER5 管理」という項目があるのでクリック。

step
2
そうすると、AFFINGER5の管理ページにいくので、今度は「トップページ」をクリック。

Step1、2

 

「挿入コンテンツ」をいじります。PCとタブレットの場合は1画面を2列(50%)に分けて、その中にそれぞれコンテンツを詰め込んでいくようなイメージです。

step
3
「挿入コンテンツ」の「タグ」を押下して、PCとTab左右50%を選択する。(下の画像参照)

2列①

 

step
4
以下のコードを入力していく。

 

[st-flexbox url="リンク先URL(できればそのカテゴリーをまとめた固定ページがいい)" rel="nofollow" target="" fontawesome="" title="バナーの表示" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="バナーの画像URL" blur="on" left="" margin_bottom="0"] [/st-flexbox]

[st-card id=そのカテゴリーの事ID label="" name="" bgcolor="" color="" readmore="off"]

[st-card id=そのカテゴリーの記事ID label="" name="" bgcolor="" color="" readmore="off"]

[st-card id=そのカテゴリーの記事ID label="" name="" bgcolor="" color="" readmore="off"]

 

赤太字のところを該当するものに書き換えてくださいね!すると、以下の画像のようにカテゴリーごとに2列に分かれた見やすいレイアウトに変貌します。

2列②

 

気をつけるべきなのは、各記事の一番最初に「続きを読む」タグを入れておくか、「AFFINGER5 管理→デザイン→抜粋設定」で抜粋を非表示にしておかないと、それぞれの記事の抜粋部分が表示されてしまい、ブログカードの表示が崩れてしまいます

Google Adsenseを視認性の良い右上部に貼り付ける方法

最後に右上にGoogle Adsenseを貼ります。

何かに特化したサイトなら、特化したジャンルのアフィリリンクでも良いかもしれません。

 

貼り方はシンプルです。

step
1
Google Adsenseで広告コードを取得。ディスプレイ広告→スクエア→レスポンシブでOK。

step
2
取得したコードを下の画像の通りに貼り付ける。

Adsenseの貼り方

 

完成!

完成です!以下の画像のようになっていればOKです。

現在のレイアウト1

 

以上になります。

もし、この記事のことでもっと詳しく知りたいことや質問などがあれば、Twitter(@torinoolympic)またはTOPページの問い合わせフォームにて受け付けております。お気軽にメッセージください。




  • この記事を書いた人

やっぴー(YAPPY)

33歳、和尚兼フリーランス。

自由な暮らしをテーマに、生活に役立つ情報を発信中。テーマはダイエット、留学、英語、メルカリ必勝法など、自分の体験談を交えて執筆するよう心がけています。

現在、30kgのダイエットに挑戦中!

-ブログ

Copyright© YAPPY BLOG , 2019 All Rights Reserved.