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

Programming

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

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

メタ情報のCSSクラス

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

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

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

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

  1. devツールの選択ツールを使って、要素(カテゴリー)を選択する。
  2. カテゴリーの記述の仕方を確認する。またそれを囲ってる要素も確認する。
  3. 実際にstyleを記述して合ってるかを確かめる。

今回の場合は「.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の投稿内のメタ情報の色や見た目を変える方法」でした。

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました