WordPressの投稿内のメタ情報の色や見た目を変える方法

今回は、WordPressのカテゴリーやタグなどのメタ情報のテキストやアイコンの色やレイアウトを自由に変更する方法を紹介します。メタ情報に設定されているCSS classに対して色々なstyleを追加します。

メタ情報は、ほとんどのユーザーはさほど気にしない部分ではありますが、だからこそ強弱がハッキリした見た目やレイアウトにするのが大事な事かと思いますので、しっかりと調整してあげましょう。

メタ情報のCSSクラス

まずはWordPressのメタ情報に設定されているCSSクラス（classセレクタ）を探します。

WordPressのメタ情報は特に決まっていません（CSSクラスはテーマ作成時に自分で決めていくので）

そのクラスの探し方については以下の手順で行います。

まずはデベロッパーツール（以後devツールと表記）を使っていきます。devツールの使い方に関しては下記から。

デベロッパーツールの基礎的な使い方【HTML/CSS編】

今回は、WEB制作会社やプログラマー、コーダーなどWEB制作に関わる人らが必ず使っているウェブブラウザのデベロッパーツールの使い方を簡単に紹介します。

kt-life.net

2020.02.02

今回の場合は「.entry-categories-inner」の中にある「a」がカテゴリーの要素だったのでclassセレクタは「.entry-categories-inner a」になります。

この方法でCSS classもしくは要素を確認してそれに対してのCSSをスタイルシートに記述していきます。

メタ情報の色を変える方法

先ほど確認したclassセレクタに対してスタイルシートに下記の様にcolorのスタイルを記述していきます。

.entry-categories-inner a {
  color:#111;
}

ワードプレスの場合は「外観→カスタマイズ→追加CSS」or「外観→テーマエディタ→スタイルシート」からstyleの追加を行います。

メタ情報の見た目を変える方法

先ほど確認したclassセレクタに対してスタイルシートに下記の様にボーダー線などの装飾を追加して、幅や位置の調整のスタイルを記述していきます。

.entry-categories-inner a {
  color:#111;
  border:solid 2px #111;
  padding-left:3px;
}

ワードプレスの場合は「外観→カスタマイズ→追加CSS」or「外観→テーマエディタ→スタイルシート」からstyleの追加を行います。

以上が「WordPressの投稿内のメタ情報の色や見た目を変える方法」でした。

テーマの設定でこの辺を弄れるものは少ないと思うのでお役に立てたら幸いです。