ヨガスクールの中の人が教える、ブログのつくり方

AFFINGER5

デザイン済みデータの「カテゴリ一覧」設定方法を解説|AFFINGER5(アフィンガー5)

2021-01-04

デザイン済みデータの「カテゴリ一覧」設定方法を解説|AFFINGER5(アフィンガー5)
AFFINGER5(アフィンガー5)のデザイン済みデータを導入したけど、その後の設定が分からない!
カテゴリ一覧の設定方法が知りたいな。

本日は、こんなお悩みにお答えします。

 

記事の内容

  • カテゴリー一覧とは?
  • AFINGER5「デザイン済みデータ」のカテゴリー一覧の設定方法
  • おまけ|カテゴリ一覧を始めから作成する方法
  • まとめ|AFFINGER5なら入れ替えだけでおしゃれなサイトが簡単につくれます

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

 

本日設定するのはトップページの「カテゴリ一覧」。

つまりこの部分を設定していきます。

本日設定するのはトップページの「カテゴリ一覧」です

 

ちなみに今回も、WordPressの有料テーマ「AFFINGER5(アフィンガー5)」を使ったデザイン済みデータ「Tidy」の設定方法についての解説です。

AFFINGER5(アフィンガー5)ってナニ?という方や、デザイン済みデータのインストール方法について知りたい方は、こちらの記事からご覧ください。

 

 

カテゴリ一覧とは?

カテゴリーは直訳すると「分類」「分野」「種類」などといった意味があります。

その名の通り、記事を適切に分類してあげることで、読者が目的の記事を見つけやすくなります。

AFFINGER5(アフィンガー5)には、このカテゴリー分類を簡単に表示できる機能があるので、適切に使用することでより分かりやすいブログを作ることができます。

 

AFINGER5「デザイン済みデータ」のカテゴリー一覧の設定方法

AFFINGER5のデザイン済みデータ「Tidy」のカテゴリー一覧は、下記の3つで構成されています。

  1. 見出しカバー写真
  2. カテゴリー一覧(おすすめ記事一覧)
  3. 「Read More」ボタン

順番に設定方法を解説します。

 

設定01:見出しカバー写真の設定方法

見出しカバー写真の設定するには、以下のように進みます。

「AFFINGER5 管理」→「AFFINGER5 管理」をクリック

「AFFINGER5 管理」→「AFFINGER5 管理」をクリック

 

「トップページ」をクリック

「トップページ」をクリック

 

「挿入コンテンツ」内の「テキストタブ」をクリック

「挿入コンテンツ」内の「テキストタブ」をクリック

※ビジュアルエディタでも作業はできますが、見つけやすいのでテキストエディタを使用します。

 

ページ内検索(※windowsの場合は「ctl」+「F」ボタン)で「backgroud_image」と検索

全部で4か所が該当すると思うので、使用したい画像のURLに書き換えます。

ページ内検索(※windowsの場合は「ctl」+「F」ボタン)で「backgroud_image」と検索

 

尚、今回使用する画像は、前回作成した「ヘッダーカードの設定方法」で使用した画像を使います。

画像のアップ方法やURLの確認については、下記の記事で詳しく解説しています。

 

見出しカバー写真の設定が終わったら、下部の「Save」または右上の「保存」をクリックします。

 

設定02:カテゴリー一覧(おすすめ記事一覧)の設定方法

カテゴリー一覧(おすすめ記事一覧)をカテゴリに入れ替えます。

手順は大きく3つです。

  • カテゴリを設定する
  • 記事を作成する(カテゴリを設定する)
  • カテゴリIDを入れ替える

順番に解説します。

 

step
1
カテゴリを設定する

まずは「カテゴリ」を設定しましょう。

「投稿」→「カテゴリー」をクリックします。

「投稿」→「カテゴリー」をクリックします

 

「新規カテゴリーを追加」から「名前」と「スラッグ」を入力し、「新規カテゴリを追加」をクリックします。

「新規カテゴリーを追加」から「名前」と「スラッグ」を入力し、「新規カテゴリを追加」をクリック

 

※スラッグとは

 

これを4カテゴリ分作成します。

今回はサンプルなので、「カテゴリa~d」としてますが、じっくり考えて設定してください。

 

設定できたら下記のようになります。

そしたら、「ID」部分をメモしてください。

「ID」部分をメモしてください

 

サンプルでは下記のとおりです。

  • カテゴリa:2
  • カテゴリb:3
  • カテゴリc:4
  • カテゴリd:5

こちらは後ほど使用します。

 

記事を作成する

続いて記事を作成します。

詳細は割愛しますが、記事作成時に先ほど作成した「カテゴリ」のどれかをチェックしてください。

サンプルでは「カテゴリa」を選んでます。

サンプルでは「カテゴリa」を選んでます

 

カテゴリIDを入れ替える

続いて、カテゴリIDを入れ替えます。

設定は「見出しカバー写真」と同じところで行います。

「AFFINGER5 管理」→「AFFINGER5 管理」をクリック、続いて「トップページ」をクリック、続いて「挿入コンテンツ」内の「テキストタブ」をクリックします。

ページ内検索(※windowsの場合は「ctl」+「F」ボタン)で、今度は「st-catgroup cat」と検索

デフォルトで「0」になっている部分を、先ほどメモしたカテゴリIDに入れ替えます。

カテゴリaなら「2」です。

ページ内検索(※windowsの場合は「ctl」+「F」ボタン)で、今度は「st-catgroup cat」と検索

 

全部で4カテゴリ分を入れ替えたら、最下部の「save」か右上の「保存」をクリックします。

 

「Read More」ボタンの設定方法

最後に「Read More」ボタンのとび先を設定します。

リンク先には各カテゴリ一覧のURLを設定しています。

各カテゴリのリンクは下記の手順で調べられます。

 

任意の記事をクリック

任意の記事をクリック

 

ぱんずくリストをクリック

サンプルでは「カテゴリa」の部分をクリックします。

サンプルでは「カテゴリa」の部分をクリックします

 

「カテゴリa」の一覧が表示されますので、このページのURLをコピーします。

「カテゴリa」の一覧が表示されますので、このページのURLをコピーします

 

設定は「見出しカバー写真」と同じところで行います。

「AFFINGER5 管理」→「AFFINGER5 管理」をクリック、続いて「トップページ」をクリック、続いて「挿入コンテンツ」内の「テキストタブ」をクリックします。

 

ページ内検索(※windowsの場合は「ctl」+「F」ボタン)で、今度は「st-mybutton-mini url」と検索

デフォルトで「#」になっている部分を、先ほどメモしたカテゴリURLに入れ替えます。

ページ内検索(※windowsの場合は「ctl」+「F」ボタン)で、今度は「st-mybutton-mini url」と検索

 

全部で4カテゴリ分を入れ替えたら、最下部の「save」か右上の「保存」をクリックします。

 

以上でデザイン済みデータのカテゴリー一覧の設定は終了です。

お疲れ様でした。

 

まとめ|AFFINGER5なら入れ替えだけでおしゃれなサイトが簡単につくれます

いかがでしたでしょうか?

AFFINGER5なら、今回紹介した「Tidy」以外にもデザイン済みデータが豊富に用意されています。

これらを使えば専門知識がなくても簡単におしゃれなサイトが構築できてしまいます。

ほんと便利ですよね。

 

本記事を読んでAFFINGER5(アフィンガー5)を導入してみたいと思った方は、AFFINGER5(アフィンガー5)公式ページをのぞいてみるといいですよ。

《 当サイトの使用テーマ 》

AFFINGERバナー

AFFNGER5(アフィンガー5)を詳しくみる

 

本日はこのあたりで。

今回の記事が、皆さまのお役に立てれば嬉しいです。

本日も最後までお読みいただきまして、誠にありがとうございました。

  • この記事を書いた人
ucozi

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-AFFINGER5
-, ,

Copyright © ucozi.com , All Rights Reserved.