ブログ

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

【簡単!】ブログのトップページをオシャレなレイアウトに変更する方法
トップページのレイアウトをオシャレにしたいブロガー「自分のブログのトップページ、最新記事の羅列って何か味気ないな。もっと見栄えよくする方法って無いかな?やり方が全て説明されている記事で勉強したいな。」

 

こんな疑問に答えていきます。

ブログの基本的な開設方法から学びたい方は、以下のページから。

Wordpressでブログを始める方法を初心者向けにわかりやすく解説
【副業】WordPressでブログを始め、稼ぐ方法【初心者向け】

  ブログで稼ぎたい人「副業でブログを始めたいんだけど、どうやって始めたらいいのかな?Wordpressがやっぱり良いのかな?始め方を詳しく教えてくれ ...

続きを見る

 

この記事を書いている僕は、本ブログのトップページを以下のようにカスタマイズしました。

(2020/3/27追記:現在はさらに改良を重ねています。→現在のトップページを確認してみる。)

現在のレイアウト

 

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

理由は、最新記事の羅列してあるような「THE ブログのレイアウト」から脱却したかったから。

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

現在のレイアウト2

こういったトップページにする方法を解説していきます。

 

本記事は、Wordpressユーザーでかつ、AFFINGER5の有料テーマを導入している方向けの記事となります。

もしAFFINGER5を導入していなければ、まずは導入するところからやってみてください。

 

それでは、解説していきます。

 

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

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

まずは、AFFINGER5を導入します。

「でもAFFINGER5って有料テーマなんでしょ?ブログで収益が立つ前から先行投資したくないよ。」

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

 

僕もブログを始めるにあたり、先行投資するのはかなり勇気の要ることでした。

でも、僕は先行投資しておいて正解だと思っています。

なぜなら、プログラミングの知識がなくても視認性の高い、高品質なサイトを作れるからです。

 

プログラミングを1から勉強して自分で組めるようになるまで待つか、有料テーマを購入してサクッと見栄えの良いページを作るか。

比べたら明らかに効率がいいのは後者ですよね。

回収できるまで頑張るというモチベーションにも繋がりますし、僕は絶対有料テーマを使うべきだと断言します。

 

AFFINGER5の設定

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

テーマ切り替え

 

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

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

 

以上です。

 

人気記事Affinger5のフッターにTwitterのタイムラインを入れる方法

  • この記事を書いた人

YASU

お仕事(国内転職、海外転職)のこと、その他生活に役立つ情報を発信中。
ブログは、必ず自分の体験談を交えて執筆するよう心がけています。

2019年、30kgのダイエットに成功!

-ブログ

© 2020 @ / EASE.