WordPress画面に表示の、タグの文字に囲み枠を作る

　タグに囲み線を入れたいと思って、Google Chromeで検索しました。
「タグクラウドのカスタマイズ（フォントサイズ統一・枠線・背景色・縦表示）」という希望していた記事があつたので、学習していきます。

同じフォントにする

1. /* タグクラウドのフォントサイズを統一 */
2. .tagcloud a {
3. font-size: 16px !important;
4. }

枠線を付ける

1. /* タグクラウドに枠線を付ける（＋フォントサイズ統一） */
2. .tagcloud a {
3. font-size: 16px !important;
4. border: solid 1px #000080;
5. border-radius: 5px;
6. display: inline-block;
7. padding: 5px;
8. margin-bottom: 8px;
9. }

マウスオーバー時に背景色を付ける

1. /* タグクラウドのマウスオーバー時の背景色 */
2. .tagcloud a:hover {
3. background-color: #f6bfbc;
4. text-decoration: none;
5. color: #000;
6. }

設定後

プレビューをしてみましたら、「タグ」の枠がきれいに表示されていました

参考にして頂いた外部記事

西沢直木のIT講座

 

2 Users

8 Pockets

タグクラウドのカスタマイズ（フォントサイズ統一・枠線・背景色・縦表示） | 西沢...

https://www.nishi2002.com/17656.html

よく使われるタグのサイズが大きくなるタグクラウドのリンクもCSSでカスタマイズできます。ここでは、すべてのタグを同じフォントサイズにしたり、枠線で囲んだり、背景色を設定する例を紹介...