賢威でタグのデザインを変更するCSS

※当サイトにはプロモーションが含まれています。

ワードプレス（WordPress）を使ったサイトのサイドバー（サイドメニュー）などに使われることが多いタグ機能。

タグ機能は、投稿内容を細かく分類でき、関連性のある記事をグループ化することができ、検索エンジンがサイトの内容を理解しやすくなるとも言われています。

さて、賢威で、タグ機能を利用するとこのように表示されます。

なお、タグ自体は、賢威の機能ではなく、ワードプレスに搭載されている「タグクラウド（Tag Cloud）」の機能です。

にゃのらいと

もう少し、お洒落な感じにしたいにゃ

という事で、賢威でタグのデザインを変更するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット

※現在、WP：6.2.x、PHP：8.2.xでも動作しています

タグのデザインを変更するCSS

賢威でタグのデザインを変更するCSSです。

/* タグデザイン */
.tagcloud a {
border-radius: 8px;
background-color: #f5ede4;
color: #442501;
font-size: 12px !important;
}

.tagcloud a::before {
color: #9b6d36;
}

.tagcloud a:hover {
background-color: #f703d01;
color: #fff;
}

/* タグのタイトルを非表示にする */
#tag_cloud-2 h3.sub-section_title {
display: none;
}

このコードを、追加CSSに記載すると、このようなデザインになります。

CSSについての補足説明

.tagcloud aで、主なタグのデザインが作られていた為、変更したかった背景色やフォントサイズを修正しています。

なお、記事数が多い（人気のある）タグの文字が大きく強調されるのは、ワードプレスのデフォルト機能です。

自分は、文字の大きさがバラバラに並ぶのが、あまり好きではないので、!importantを使って、文字の大きさを12pxに統一しています。

#tag_cloud-2 h3.sub-section_titleは、タグのタイトルが勝手に表示されてしまうので、それを無効化（見えないように）する為に設定しています。

なお、このサイトでは、#tag_cloud-2のidが作成されていますが、ご自身の作成状況によって、#tag_cloud-1や#tag_cloud-3など、数値が違うと思います。

ブラウザに標準で搭載されているデベロッパーツール（F12）を使って、どのidが割り当てられいるかをご確認ください。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】