affinger-color-setting-sub-text-20200223_ec

WordPress

AFFINGER5で「カテゴリー&投稿日時&パンくずリスト」の色設定をカスタマイズする手順【WordPressブログ】



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

「カテゴリー&投稿日時&パンくずリスト」
の色設定をカスタマイズする手順

をご紹介していきたいと思います

まずブログにおける「カテゴリー」とは、記事一覧だと…

affinger-color-setting-sub-text-20200223_sample-01

↑ このオレンジ部分のこと。 このカテゴリーは、各記事ページの冒頭でも…

affinger-color-setting-sub-text-20200223_sample-02

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

そして、「投稿日時」と「パンくずリスト」とは…

affinger-color-setting-sub-text-20200223_sample-04

↑ それぞれこの部分のこと

↑ の画像例では、「投稿日時」の代わりに「更新日時」の表示に設定を変えてるよ

で、「WING(AFFINGER5)」なら、これらのカスタマイズは超簡単です

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

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

【カテゴリー&投稿日時&パンくずリスト編】AFFINGER5における色設定のカスタマイズ手順

pc-work-202001_01

それではカスタマイズ手順です

affinger-color-setting-sub-text-20200223_01

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

affinger-color-setting-sub-text-20200223_02

↑ 左側のメニュー一覧から、「各テキストとhタグ(見出し)」をクリックします

ここから、

  • カテゴリー
  • 投稿日時&パンくずリスト

の設定にわかれます

まずはカテゴリーから🐥

「カテゴリー」の色設定

さきほど開いた「各テキストとhタグ(見出し)」のメニュー一覧から…

affinger-color-setting-sub-text-20200223_03

↑「カテゴリー」をクリックします

affinger-color-setting-sub-text-20200223_04

↑ この「背景色」と「文字色」という項目で、色設定をカスタマイズしましょう

affinger-color-setting-sub-text-20200223_sample-02

↑ 初期設定ではこんな感じです(オレンジ部分)

ちなみに今回は…

affinger-color-setting-sub-text-20200223_05

↑ こんな配色にしてみます

具体的なカラーコードは…

  • 背景色 = #1001b2
  • 文字色 = #ffffff

です

画面中央のプレビューで見てみると…

affinger-color-setting-sub-text-20200223_sample-03

↑ こんなふうに変わりました

ネイビーのとこ!

affinger-color-setting-sub-text-20200223_06

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

つづいて、次の「投稿日時&パンくずリスト」の設定に入ります

同じく画面上部の  をクリックして、1つ前の画面に戻りましょう

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

「投稿日時&パンくずリスト」の色設定

さきほどの「カテゴリー」画面から、画面上部の  をクリックして「各テキストとhタグ(見出し)」の画面に戻ったら…

affinger-color-setting-sub-text-20200223_07

↑「投稿日時・ぱんくず・タグ」という項目をクリックします

affinger-color-setting-sub-text-20200223_08

↑ AFFINGER5では、「投稿日時・パンくずリスト・タグ」の3項目が一括りのカスタマイズとなってます

初期設定では、ブラックに近いダークグレー系の色味です

実際の記事ページでは…

affinger-color-setting-sub-text-20200223_sample-04

↑ それぞれこんな感じ

「投稿日時」のところは、 WordPress管理画面 > AFFINGER5管理 で「更新日時」にも変えられるよ

ちなみに今回は、僕がいつも使ってるカラーである…

affinger-color-setting-sub-text-20200223_09

↑ このようなグレー系の色味に設定してみます

具体的なカラーコードは、「#afafaf」です

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

affinger-color-setting-sub-text-20200223_sample-05

↑ このように、一番上の「パンくずリスト」も、また記事タイトル下の「更新日時」も、初期設定より明るめのグレーになりました

今回の「カテゴリー&投稿日時&パンくずリストの色設定」の解説は、これで以上となります

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.