ブログ運営

【アフィンガー5】トップページにカテゴリ一覧を表示する方法

悩んでる人
アフィンガー5はいろんなカスタマイズができるみたいだけど、

まずはトップページをオシャレにカスタマイズしてみたいです。

どんな方法があるのか知りたいっす。

 

本記事ではその方法を分かりやすくお伝えしていきます。

 

せっかく有料テーマを手にしたならオリジナリティ溢れるデザインにしたいですよね。

 

とくにアフィンガー5は初心者でも手軽にカスタマイズできるし、カスタマイズの種類も豊富に揃ってます。

 

そこで本記事ではトップページのカスタマイズの1つである『カテゴリ一覧を表示する方法』について紹介したいと思います。

 

当ブログのトップページでもカテゴリ一覧を表示してますが、どんな記事があるのか一目で分かるのがメリットです。
aoyui

 

別記事では『スライドショーの設定方法』についても紹介してるのでぜひ参考にしてみてください。

 

 

AFFINGER5公式サイト

 

 

トップページにカテゴリ一覧を表示する手順

それではさっそくトップページをカスタマイズしていきましょう。

 

今回カスタマイズするのは下記の赤枠部分です。

 

 

カスタマイズ手順の概要は次の通り。

 

step
1
下準備:固定ページを使って新規作成

step
2
レイアウトを2分割する

step
3
バナー風ボックスの作成

step
4
ブログカードを設置する

step
5
ボタンリンクの作成

 

では1つずつ順を追って解説していきます。

 

手順① 下準備:固定ページでトップページを新規作成する

作ったページが常にブログのトップページになるように、まずは固定ページを使って新規作成していきます。

「固定ページ」→「新規追加」を選択し記事タイトルを決めてください。

分かりやすいように今回は「トップページ」としておきます。

そして記事の「公開」をクリックしましょう。

 

 

次に作成した固定ページがサイトのトップページにくるように設定します。

この設定は固定ページの編集がすべて完了してからでも構いませんが、

忘れないようにここで説明しておきます。

 

 

「外観」→「カスタマイズ」→「ホームページ設定」をクリックし、

作成した「トップページ」を選択します。

 

 

下記のように作成した「トップページ」の横に「フロントページ」と記載されていれば設定完了です。

 

 

ではここから「カテゴリ一覧」の設定方法について解説していきます。

 

手順② レイアウトを2分割する

 

先ほど作成した固定ページを使って作成していきます。

「タグ」→「レイアウト」→「PCとTab]→「左右50%」を選択してください。

 

 

すると下記のように黄色水色の枠が表示されると思います。

この2分割された部分を今から編集していきます。

 

 

手順③ バナー風ボックスの作成

それでは最初にバナー風ボックスの作成をしていきましょう。

バナー風ボックスとは下の画像の部分にあたります。

 

バナーをクリックすることでカテゴリのリンクにジャンプできるように設定されてます。

 

ではまず左側の黄色の枠から編集していきましょう。

黄色の枠内にカーソルを合わせて、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」を選択します。

 

 

すると下の画像のようにコードが挿入されると思いますので、このコードの部分を編集していきましょう。

 

なんか難しそうと思うかもしれませんが、編集する部分は3ヶ所ほどなので安心してください。
aoyui

 

 

編集するのは次の3ヶ所です。

 

  • st-flexbox url="カテゴリ一覧のURLを入力"
  • title="バナーに使うタイトルを入力"
  • background_image="バナーに使う画像のURLを入力"

 

実際にボクのトップページで使用してるコードはこちら⇩

 

プレビュー表示するとこんな感じになります。

ブログ運営

 

 

手順④ ブログカードを設置する

続いてバナー風ボックスの下にブログカードを設置していきましょう。

 

カードの枚数はお好みで。でも見栄え良くするなら3枚か4枚ほどがいいかもしれません。
aoyui

 

 

ブログカードの設置はバナー風ボックスのコードの下に貼りつけます。

「カード」をクリックして、下記のようなコードを挿入しましょう。

 

 

編集箇所は、st-card myclass="記事のIDを入力"のみです。

 

ボクは下記のように3枚のブログカードを設置してます。

 

プレビュー表示して下記のようになってれば完了です。

 

 

 

この手順をカテゴリごとに繰り返し編集していくといった感じです。

では最後にボタンリンクの作成をしていきましょう。

aoyui

 

手順⑤ ボタンリンクの作成

(準備中)

 

-ブログ運営

© 2021 Happy My Life