WORDPRESS

【2022年】AFFINGER6「関連記事」一覧の表示・非表示&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第6章/No.8】

AFFINGER6「関連記事」一覧の表示・非表示&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第6章/No.8】
 

専業ブロガー5年目のあずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「関連記事」一覧の表示設定&カスタマイズ設定方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

まず「関連記事」とは、記事ページごとの末尾エリアに表示される…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 top-01

↑ こうした…

「その記事と関連性の高いページ」がピックアップされた記事一覧

を指します

関連性が高そうなページを ”自動” でピックアップしてくれるよ!
 

また、ACTION AFFINGER6における「関連記事」は…

  • 見出しのタイトル名(例:関連記事 / あわせてどうぞ)
  • 表示する件数
  • そもそも「関連記事」を表示するかどうか?

といった基本的な設定から…

  • 見出しの色・デザイン設定

まで、任意の内容にカスタマイズすることも可能です

 

そんなACTION AFFINGER6の「関連記事」について、2つのステップで丁寧に解説していきます🐥

  1. 「関連記事」の基本的な設定方法
  2. 「関連記事」の色・デザイン設定をカスタマイズする方法
さっそく見ていこー!
 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

【2022年】AFFINGER6「関連記事」一覧の表示・非表示&カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第6章/No.8】

ステップ1:ACTION AFFINGER6における「関連記事」の基本的な設定方法

WordPress ヘッダー c-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

まずは、WordPress管理画面の左側一覧から…

AFFINGER管理

をクリックし、さらにそのなかの左側一覧から…

投稿・固定記事

というタブを開きます

 

「投稿・固定記事」タブを開いたら、そのなかに…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 1-1-01-a

↑「関連記事一覧」というエリアがあるので、こちらで基本的な設定を行いましょう

 

デフォルトでは…

  • 関連記事一覧に表示する見出し → 関連記事
  • 並び順 → ランダム
  • 関連記事に表示する件数 → 5
  • 投稿の関連記事を非表示にする → オフ

に設定されていて、実際の画面上では…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 1-1-01-b

↑ このように表示されています

ちなみに「カテゴリー」側の色(上画像だと「スイーツ」ってとこ!)とかは、また別で設定できるよ!
 
 

今回は例として…

  • 関連記事一覧に表示する見出し → あわせてどうぞ

に変更してみます

 

実際の画面で改めて確認してみると…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 1-1-02

↑ 左上の「見出し」が、このように変更されました

変更したら、「Save」ボタンをクリックして設定を保存しよう!
 

つづいて、「関連記事」における見出しの色やデザインを【カスタマイズ】していきましょう🐥

 

ステップ2:ACTION AFFINGER6における「関連記事」の色・デザイン設定をカスタマイズする方法

WordPress ヘッダー c-02

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

見出しタグ(hx)/ テキスト > NEW ENTRY & 関連記事

という順にタブを開きます

 

「NEW ENTRY&関連記事」タブを開いたら、そのなかに…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 1-2-01

↑ 色とデザインパターンを指定できる項目が並んでいるので、こちらで任意の内容にカスタマイズしましょう

 

今回は例として…

  • 背景色 → #523634

というカラーコードに変更してみます

デザインパターンは、「ノーマル」のままが個人的にはおすすめ!
 

変更したら、設定画面の左上にある「公開」ボタンをクリックしてカスタマイズ完了です

 

実際の画面上で確認してみると…

AFFINGER6「関連記事」一覧の表示設定とカスタマイズ方法 1-2-02

↑ このような一覧デザインになりました🐥

 
 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

-WORDPRESS