【AFFINGER6】トップページのカスタマイズ方法

2021年9月15日

 

今回は、AFFINGER6のトップページのデザイン方法について解説していきます。

 

自分のホームページの内容によっては様々なデザインにカスタマイズできた方がいいことはいうまでもありません。自分好みにカスタマイズできるよう参考になればと思います。

 

トップページを見やすくすることで,訪問してくれた読者にとっても思わずクリックしたくなるデザインを作ることで、クリック率の上昇やブログの回遊率も上がります。綺麗で見やすいサイト仕上げてみましょう!

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

基本レイアウト

今回紹介するカスタマイズの完成イメージです。もちろん、記事のタイトルやサムネイル画像はそれぞれの変わってくると思うので、レイアウトを参考にしてみてください

カスタマイズの項目は以下の4つになっています!

  • ヘッダー下に「ヘッダーカード」
  • ヘッダーカードの下に記事スライドショー
  • 記事スライドショーの下に2カラムのバナーとブログカード
  • カードスタイル

固定ページの作成

初めに、サイトのトップページを作成するために、「固定ページ」にてページを「新規作成」します。

 

以下のページより、新規固定ページを作成していきましょう。タイトルは後からでいいので、各要素をカスタマイズしていきましょう。

 

ヘッダー下に「ヘッダーカード」の作成

ヘッダー下に「ヘッダーカード」を作成していきましょう。

 

基本的な作成方法は以下の作成方法を参照してください。ヘッダーカードとは、ヘッダー下に画像とURLを埋め込むことで、注目してほしい記事やカテゴリーへの誘導をすることができます

 

⬇︎⬇︎以下の記事を参考ください⬇︎⬇︎

スライドショーの設置

新しく固定ページに「スライドショーを設置する方法」を解説します。

 

まずは、「見出し文」を入力していきます。ここでは「カテゴリー」という見出しを「見出し3」で作成しています。

⬇︎⬇︎以下のような表示結果になります⬇︎⬇︎

 

次に「スライドショー」の設置を行います。編集画面より、「記事一覧/カード」→「カテゴリー一覧(スライドショー)

 

選択すると、自動的にテキストに挿入されます。太字部分を入力 or 変更してカスタマイズを行ってください。

st-catgroup cat="カテゴリID"   page="表示数"   order="並び順"   

orderby="並べ方"   child="子テーマの表示(on/off)"   

slide="自動スライド(on/off)"   slides_to_show="表示列数"   

slide_date="投稿日の表示(on/off)"   slide_more="ボタン表示名"   

slide_center="スマホ表示(on/off)"   fullsize_type="画像とテキストの表示"

 

 

st-catgroup cat="カテゴリID" について

カテゴリーIDに関しては、「投稿」→「カテゴリー」を選択し、カテゴリのIDを確認しましょう。

 

order="並び順(desc/asc)

  • desc:降順
  • asc:昇順

orderby="並べ方"

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

slides_to_show="表示列数"

3つの数字をカンマで区切り入力します。表示画面の大きさ別に何列で表示するかを設定していきます。

lide_to_show="〇,△,✕"

  • 〇:960px以上の列数(PC)
  • △:600px~959pxの列数(タブレット)
  • ✕:599px以下の列数(スマホ)

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

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

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

 

⬇︎⬇︎以下のような表示結果になります⬇︎⬇︎

 

カテゴリー別記事(バナーとブログカード)の作成

ページを2カラムに、すなわち2列のレイアウトに設定していきます。

タブ」→「PCとTab(959px以上)」→「左右50%」を選択して、レイアウトを2列に変更しましょう。

 

 

下の画像のように,2列に別れたページに設定できます。次にカテゴリー別記事の作成をしていきます。

 

カテゴリー別記事(バナーとブログカード)の作成です。「タブ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択して、「バナーの作成」を行いましょう。

 

  • url="カテゴリーURL(スラッグ)"
  • title="バナーのタイトル"
  • height="高さ(行数が違っても高さを合わせるため・ここでは83)"
  • background_image="画像URL"
を設定しています。

 

以上の設定により、バナー風ボックスの作成が行えます。

 

2列のレイアウトに設定

カテゴリー別の2列のレイアウトを作成していきます。こちらのデザインもAFFINGERを使用しているブロガーさんが使用している人気のものですので、使いこなすことでかなりおしゃれなブログになると思います!

 

タブ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択して、2列のレイアウトを作成していいましょう。

 

 

カテゴリー別の場合

2列レイアウト枠の次は、カテゴリー別の記事を挿入していきます。「記事一覧/カード」→「記事一覧」を選択してください。

 

カテゴリーIDの調べ方は、「投稿」→「カテゴリー」のIDの項目を参照しましょう。

 

記事別の場合

記事別に2列レイアウトの作成方法です。「記事一覧/カード」→「記事一覧」を選択してください。

 

「id="〇〇"」の部分には、表示したい記事IDを入力します。記事IDの調べ方は、「投稿」→「投稿一覧」から挿入したい記事のIDを参照しましょう。

 

⬇︎⬇︎以下のような表示結果になります⬇︎⬇︎

 

カードスタイル(カテゴリー別)

「AFFINGER」のおすすめのレイアウトとして代表的なカスタマイズが「カードスタイル」です。別売りプラグインのJETとは少々異なるデザインですが、プラグインなしで記事をカードスタイルにすることが可能です。下のデザインのように、「カードスタイル」はレイアウトもスッキリ綺麗にデザインができます。

 

2列のデザインにすると、PCから見ても綺麗に収まるサイズ感になるのでおすすめです。また、「カードスタイル」はトップページだけでは、記事内でも他の記事を紹介するのにも適してい流ので、さまざまなシーンで活用してみてください!

 

タブ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択して、2列のレイアウトを作成していいましょう。

 

2列のレイアウトが挿入できたらOKです!

2列レイアウト枠の次は、「記事一覧/カード」→「ブログカード」→「参考」を選択してください。

 

 

選択したら、以下のようなショートコードの項目が入力されますので、以下を参考にしてお好みにカスタマイズしてみてください。

 

st-card myclass=""    id="カードにしたい記事のID"

label = "ラベルを表示できる"   pc_height="カードの高さ"

name="ブログカードの記事タイトル"    bgcolor="文字色"

color="背景色"    fontawesome="フォントアイコン"

readmore="「続きを見る」表示(on/off)"

 

⬇︎⬇︎「カードスタイル」のデザインはこちら⬇︎⬇︎

pc_height="カードの高さ"の項目の高さを揃えると、ページ全体のカードの高さが揃って綺麗なレイアウトになります!

ブログカードのカスタマイズ

「AFFINGER管理」でブログカードのデザインを変更することができます。カードデザインの細かいカスタマイズはこちらから行えます!

 

 

サムネイル画像設定」や「抜粋設定」にて、カードデザインの画像やタイトルの編集が行えます。

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

最後は作成した固定ページをトップページに設定していきます。「外観」→「カスタマイズ」→「ホームページ設定」を選択します。

 

 

 

固定ページ」を選択し、作成した固定ページを選択しましょう!

 

以上の作業にて、トップページの作成完了です。お疲れ様でした!

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,