WORDPRESS

【2023年】AFFINGER6「カテゴリー・投稿日時・ぱんくずリスト」のカスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.7】

AFFINGER6「カテゴリー・投稿日時・ぱんくずリスト」のカスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.7】
 

専業ブロガー6年目のあずき猫です

 

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

カテゴリー・投稿日時・ぱんくずリスト

のカスタマイズ設定方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

実際の画面上で見ると、まず「カテゴリー」が…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 top-01
 

つづいて「投稿日時」が…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 top-02
 

そして「ぱんくずリスト」が…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 top-03
 

上記の箇所をそれぞれ指します🐥

ということで、さっそく見ていこー!
 

補足

ブログ右側の「サイドバー」エリアに表示される…

カテゴリー一覧

などの色設定については、別途こちらをどうぞ ↓

AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.8】
【2023年】AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.8】

続きを見る

 

【2023年】AFFINGER6「カテゴリー・投稿日時・ぱんくずリスト」のカスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.7】

 

注意

当ブログガイドは、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管理画面の左側一覧から…

外観 > カスタマイズ

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

見出しタグ(hx)/ テキスト

というタブをクリックします

ここから、「カテゴリー」「投稿日時・ぱんくずリスト」の順に色設定をしていくよ!
 

ACTION AFFINGER6「カテゴリーの色設定」のカスタマイズ方法

WordPress ヘッダー b-01

「カスタマイズ」設定画面から「見出しタグ(hx)/ テキスト」タブを開いたら、そのなかの左側一覧から…

カテゴリ

というタブをクリックしましょう

 

するとそのなかに…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 1-1-01-a

↑ このように…

  • 背景色
  • 文字色
  • 角を丸くする

という項目があるので、こちらで任意の色やデザイン設定にカスタマイズすることができます

 

今回は例として…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 1-1-01-b

↑ こちらの内容に設定してみました(カラーコードなどは下記の通りです)

  • 背景色 → #523634
  • 文字色 → デフォルトのまま
  • 「角を丸くする」 → チェックなし
変更したら、左上の「公開」ボタンを忘れずにクリックしよう!
 

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

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 1-1-02

↑ このようなカテゴリー表示になりました🐥(左上の、「茶色い背景に白文字」のところ!)

 

このまま作業を続けられる場合は、左上の < ボタンで1つ前の「見出しタグ(hx)/ テキスト」という画面に戻っておくと、このあとの手順がスムーズです

 

ACTION AFFINGER6「投稿日時・ぱんくずリストの色設定」のカスタマイズ方法

WordPress ヘッダー b-02

さきほどと同じく「見出しタグ(hx)/ テキスト」タブから、今度は…

投稿日時・ぱんくず・タグ

というタブをクリックしましょう

 

するとそのなかに…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 1-2-01-a

↑ このように…

  • 基本テキスト色

という項目があるので、こちらで任意の色設定にカスタマイズできます

 

今回は例として…

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 1-2-01-b

↑ こちらの色に設定してみますね(カラーコードは下記の通りです)

  • 基本テキスト色 → #afafaf

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

AFFINGER6「カテゴリー&投稿日時&ぱんくずリストの色設定」のカスタマイズ方法 1-2-02

↑ このような文字色に変更されました🐥

HOME > 未分類 > と、 20XX年●月●●日 ってとこだね!
 
 

人気記事

 

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

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

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

 

あずき猫 - Azuki Cat

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

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

ACTION AFFINGER6 バナー 01-300px

 

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

ACTION AFFINGER6

すごいもくじLITE

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

 

公式:ACTION AFFINGER6

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

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS