ブログ

AFFINGER5のトップページをカスタマイズする方法をわかりやすく解説

2020-12-28

AFFINGER5のトップページをカスタマイズする方法をわかりやすく解説

 

AFFINGER5のトップページってどうやってカスタマイズするの?

カスタマイズの方法を知りたい。

 

そんな悩みを解決します。

 

本記事の内容

  • 事前準備について
  • ヘッダーカードを作成する
  • 固定ページで「スライドショー・ブログカード」を作成する

 

ブログのトップページは集客に大きく影響します。

 

デザインに優れたトップページだと、記事の良悪にかかわらず読んでくれる確率が上がります。

 

 

一例として、今回は本ブログのトップページを作成していきたいと思います。

 

完成形は次のとおりです。

 

トップページのレイアウト

 

 

ヘッダーカードのすぐ上にある、ヘッダーメニューの作成方法についてはこちらの記事をご参考ください。

 

こちらもCHECK

WordPressのヘッダーメニューの作成方法をわかりやすく紹介
AFFINGER5のヘッダーメニューを作成する方法をわかりやすく解説!

続きを見る

 

では順番に見ていきましょう!

 

 

事前準備について

事前準備について

 

本記事は、有料テーマで人気のAFFINGER5に特化した内容なので、事前にAFFINGER5の購入が必須です。

 

税込みで14,800円しますが、買って損はさせません!

 

それくらい有益な有料テーマです。

 

詳しくはこちらの記事にまとめてますので、ぜひご覧ください。

 

こちらもCHECK

AFFINGER5のアフィリエイトリンクを取得できるASPを紹介!【ブログ初心者】
AFFINGER5購入前に要確認!カスタマイズできることや注意点を解説します!

続きを見る

 

 

AFFINGER5でトップページをカスタマイズ

AFFINGER5でトップページをカスタマイズ

 

続いて、トップページのカスタマイズ方法について紹介していきます。

 

トップページを作成する上で意識することは次の4点です。

 

トップページを作成する上で意識すること

  • ブログのサイトマップが分かる
  • どんな人が書いているか分かる
  • おすすめの記事や更新頻度が分かる
  • どんなジャンルの記事が書かれているか分かる

 

上記を意識した上で、各設定箇所のカスタマイズ手順を見ていきましょう!

 

 

ヘッダーカードを作成する

ヘッダーカードをカスタマイズする

 

 

まずは、「ヘッダーカード」のカスタマイズ手順について見ていきましょう。

 

 

おすすめ記事一覧の設定画面へ移動する

 

 

WordPress管理ページから [AFFINGER5管理] → [おすすめ記事一覧] をクリックします。

 

 

おすすめのヘッダーカード設定をする

 

 

[おすすめヘッダーカード] へスクロールし、次の設定を行います。

 

ヘッダーカードで設定する項目

  1. 画像のアップロード
  2. 表示するテキストを記載
  3. クリックした時のブログURLを記載

 

  • 「画像のURL」は、画像をアップロードすると自動で追記されます。
  • テキストを太字にしたい場合は、前後に「<strong>」と「</strong>」を記入します。

 

残りの3つも同じように設定していきましょう!

 

 

さらに下へスクロールすると「デザイン」を設定する箇所があるので、次のとおり設定して「save」をクリックします。

 

おすすめヘッダーカードのデザインを設定する

 

 

正直「デザイン」の設定は自分の好みもあるので、自分が好きな設定にカスタマイズしましょう!

 

これで「ヘッダーカード」の設定は完了です。

 

 

固定ページで「スライドショー・ブログカード」を作成する

固定ページのカスタマイズ

 

続いて、「スライドショー」と「ブログカード」のカスタマイズ手順を見ていきます。

 

ここでは「固定ページ」を作って、上記2つまとめて設定していきましょう!

 

 

固定ページの設定画面へ移動する

 

 

WordPress管理ページから [固定ページ] → [新規作成] をクリックします。

 

 

固定ページのタイトルをカスタマイズ

 

まず、「タイトル」と「パーマリンク」を設定します。

 

固定ページの設定

  • タイトルに「トップページ」と記入
  • パーマリンクを「トップページ」→「toppage」へ変更

  ※あくまで例なので自分の好きに決めてOKです

  ※パーマリンクは英文字で表記しましょう

 

 

続いて、本文の設定を行います。

 

 

固定ページの本文をカスタマイズ

 

 

段落を[見出し4]にし、「新着記事と記載します。

 

 

固定ページのスライドショーをカスタマイズする

 

 

スライドショー」は次の手順で作成できます。

 

 

固定ページのスライドショーをカスタマイズ

 

 

[タグ] → [記事一覧/カード] → [カテゴリ一覧(スライドショー)] をクリック。

 

スライドショーのコード

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

 

コードの変更は不要なので、「スライドショー」の設定はこれで完了です。

 

 

続いて、「ブログカード」の設定を見ていきましょう!

 

固定ページのブログカードをカスタマイズする

 

 

本サイトは、左の3記事をブログ、右の3記事を筋トレのジャンルに分けてますので、その手順を紹介します。

 

 

固定ページのレイアウトを2等分する

 

 

段落を[見出し4]にし、「おすすめ記事」と記載します。

 

 

次の手順で表示画面を2等分できます。

 

[タグ] → [レイアウト] → [全サイズ] → [左右50%] をクリック。

 

 

すると、「左:黄色、右:水色」に背景色が変わるので、この中に「ブログカード」を作成していきます。

 

 

固定ページのバナーリンクをカスタマイズする

 

 

その前に、ジャンルが分かるように上図の「バナーリンク」を作成します。

 

 

固定ページのバナーリンクを作成する

 

 

黄色の背景色にカーソルを合わせたまま、[タグ] → [ボックスデザイン] → [バナー風ボックス] → [基本]をクリックします。

 

バナーボックスのコード

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]

[/st-flexbox]

 

すると上記コードが自動で入力されるので、次の設定箇所を自身のサイト用にカスタマイズしましょう!

 

コードの変更箇所

url → クリック時のリンク先URL

title → バナーに表示する文字

fontsize → 文字の大きさ

backgroud_image → 背景画像のURL

 

 

 

バナーボックス」が作成できたら、「ブログカード」を作成します。

 

 

固定ページのブログカードを作成する

 

ブログカードは、[カード] ボタンを押すだけでOKです。

 

ブログカードのコード

[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]

 

上記のコードが自動で入力されるので、次の箇所をカスタマイズします。

 

コードの変更箇所

id → 表示する記事のID

readmore → off

 

 

ちなみに、記事IDは投稿一覧の「ID」列で確認できます。

 

記事IDを確認する

 

 

このままだと表示がおかしいので、次の設定を変更しておきましょう!

 

AFFINGER5の抜粋設定をする

 

 

WordPressの管理画面から、[AFFINGER5管理] → [デザイン] → [抜粋設定]へ移動し、「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れます。

 

 

右側のジャンルも、同様に設定しておきましょう!

 

完成イメージ

固定ページ完成イメージ

 

 

これで「ブログカード」の設定は完了です。

 

 

最後に、ここまで設定してきた内容がトップページに表示されるようにしていきましょう!

 

固定ページをトップページに設定する

 

 

WordPressの管理画面から、[設定] → [表示設定] をクリックします。

 

[固定ページ] にチェックを入れ、[トップページ] を選択し「変更を保存」を押します。

 

 

固定ページのレイアウト参照

 

 

これで「固定ページ」がトップページに表示されたはずです。

 

 

トップページの設定はこれで全て終了です。

 

今回は、本サイトを参考に手順を紹介しましたが、自分好みにカスタマイズしていきましょう!

 

 

まだAFFINGER5を購入していない方は、こちらの記事を参考にしてみてください。

 

こちらもCHECK

AFFINGER5のアフィリエイトリンクを取得できるASPを紹介!【ブログ初心者】
AFFINGER5購入前に要確認!カスタマイズできることや注意点を解説します!

続きを見る

 

 

-ブログ

© 2024 しゅんぼーBLOG Powered by AFFINGER5