ワードプレス

AFFINGER5で、「新着&関連記事」一覧エリアをカスタマイズする手順【WordPressブログ】

AFFINGER5_新着&関連記事一覧のカスタマイズ_アイキャッチ



あずきです🐥

このブログでも愛用中のWordPressテーマ、「WING(AFFINGER5)」における…

「新着記事・関連記事」の一覧エリアを
カスタマイズする手順

について、初心者さん向けに1から解説していきます(簡単です♪)

まず「新着記事」とは、トップ画面右上に表示される…

AFFINGER5_新着&関連記事一覧のカスタマイズ_top-01

↑ ここのこと

つづいて「関連記事」とは、各記事ページの末尾に表示される…

AFFINGER5_新着&関連記事一覧のカスタマイズ_top-02

↑ ここのこと

で、そんな「新着記事・関連記事」における…

  • 見出しワード(新着記事・関連記事というタイトルそのもの)
  • 表示件数やカテゴリー
  • そもそも一覧を表示するかどうか
  • 色の設定

は、「WING(AFFINGER5)」なら自由にカスタマイズできます

それではさっそく見ていきましょー🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

AFFINGER5における、「新着記事・関連記事エリア」のカスタマイズ方法

新着記事・関連記事の基本的なカスタマイズ設定

まずは、AFFINGER5 管理の画面を開きましょう(下記手順です)

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-top-01

↑ WordPress管理画面 > AFFINGER5 管理 をクリックします

ここから…

  • 新着記事
  • 関連記事

それぞれで、基本的な表示設定をカスタマイズしていきます

まずは「新着記事」から!

見出しワードのカスタマイズ:新着記事

ブログガイド_見出し_01

「AFFINGER5 管理」画面が開けたら、左側のメニュー一覧から…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-01

↑「トップページ」タブをクリックします

つづいて、「トップページ」設定のなかの…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-02

↑ この「記事一覧」という項目で、「新着記事」の基本的な表示設定をカスタマイズしていきます

まず、「見出し」となるワードの設定を…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-03

↑ こちらの欄で指定します

試しに例として…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-04

↑「新着記事」というタイトルに変更してみます

なにも入力しなければ、「見出しなし」の状態で一覧が表示されるよ!

次に、そのすぐ下にある…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-05

↑ こちらの項目で…

  • 新着一覧に表示する件数
  • エリアごとで、新着一覧を表示するかどうか

を設定できます

表示件数は、初期設定のままだと「5件」になるよ!

今回の例では、↑ の画面のままにしてみます

最後に、その上側の…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-06

↑ こちらの項目で、「新着一覧」に表示する記事を「カテゴリー」で指定することもできます

カテゴリーの制限なく表示させたい場合は、ここはスルーでOKです

表示させたいカテゴリーのID(数字)を入力すればOK!

一通り設定できたら、 save をクリックして保存しましょう

保存できたら、プレビューでチェックすると…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-1-07

↑ こんな感じに反映されました(画像例は、「色設定」もカスタマイズした後の状態です)

色設定の手順は、この記事の後半で紹介していくよ!

つづいて、「関連記事」の基本設定も見ていきましょー🐥

見出しワードのカスタマイズ:関連記事

ブログガイド_見出し_02

同じく「AFFINGER5 管理」画面を開けたら、左側メニュー一覧から…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-2-01

↑「投稿・固定記事」タブをクリックします

「投稿・固定記事」画面が開けたら…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-2-02

↑ こちらの「関連記事一覧」という項目で、基本的な設定のカスタマイズができます

まずは、「見出し」となるワードの設定を…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-2-03

↑ この「関連記事~~~~~見出し」という欄で、指定しましょう

今回は、試しに例として…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-2-04

↑「あわせて読みたい!」という見出しタイトルを設定してみます

あとは、その下の…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-2-05

↑ こちらの項目で…

  • 「関連記事一覧」の表示件数
  • 一覧の表示・非表示

を、それぞれ指定しましょう

表示件数は、なにも入力しなければ初期設定の「5件」になるよ!

今回の例では、ここは ↑ 画像例のように初期設定のままにしてみます

一通り設定できたら、また save をクリックして保存しましょう

保存できたら、プレビューでまた見てみると…

AFFINGER5_新着&関連記事一覧のカスタマイズ_1-2-06

↑ こんな感じに反映されました

これで、新着記事・関連記事における「基本的なカスタマイズ」はOK🐥

今度は、この見出しの「色設定」をカスタマイズしていくよ!

新着記事・関連記事における「見出し」の色設定をカスタマイズ

まずは、カスタマイズ画面を開きましょう(下記手順です)

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-top-01

↑ WordPress管理画面 > 外観 > カスタマイズ をクリックします

カスタマイズ画面が開けたら、左側のメニュー一覧から…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-top-02

↑「各テキストとhタグ(見出し)」をクリックしましょう

ここから…

  • 新着記事
  • 関連記事

それぞれの「色設定」をカスタマイズしていきます🐥

また「新着記事」から!

見出し色のカスタマイズ:新着記事

ブログガイド_見出し_03

外観 > カスタマイズ で「各テキストとhタグ(見出し)」が開けたら…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-1-01

↑「ウィジェットタイトル(サイドバー)」タブをクリックします

設定画面が開けたら…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-1-02

↑ こちらの一覧で、色設定をカスタマイズしていきます

ちなみに下半分の「ウィジェットタイトルの基本スタイル」という項目で、デザインパターンを指定できます

初期設定では…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-1-03

↑ このような状態です

拡大すると…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-1-04

↑ こんな感じ

で、今回は例として…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-1-05

↑ このような配色にしてみます

具体的には…

  • 文字色
  • ボーダー色
  • ボーダー色(サブ)

の3つを濃紺系(カラーコード:#1001b2)にして、そのほかはすべて初期設定のままです

プレビューで見てみると…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-1-06

↑ こんな感じになりました

設定できたら、上部の 公開 をクリックして保存しましょう

つづいて、「関連記事」の色設定を見ていきます🐥

見出し色のカスタマイズ:関連記事

ブログガイド_見出し_04

同じく 外観 > カスタマイズ の「各テキストとhタグ(見出し)」画面から…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-2-01

↑「NEW ENTRY & 関連記事」タブをクリックします

「NEW ENTRY & 関連記事」画面が開けたら…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-2-02

↑ こちらの項目で、色設定をカスタマイズしていきます

ちなみに下側の「デザインパターン」で、表示デザインを変更できます

で、初期設定では…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-2-03

↑ このような状態になってます

今回は例として…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-2-04

↑ こちらの配色に変えてみました

具体的には、背景色だけ濃紺系(カラーコード:#1001b2)で、そのほかは初期設定のままです

プレビューで見てみると…

AFFINGER5_新着&関連記事一覧のカスタマイズ_2-2-05

↑ このような感じになりました

設定できたら、また最後に画面上部の 公開 をクリックして保存しましょう

これで、色設定のカスタマイズもOKです

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。