4
10月
タグのうしろのやつその後
無事にカンマを削除出来た！
と、言う訳で忘れないうちにメモ。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/*タグクラウドのデザイン*/
.widget_tag_cloud a {
font-size: 11px !important; /* 文字のサイズ */
line-height: 1em;
background: #88caac; /* 背景色 */
display: inline-block;
white-space: nowrap;
padding: 8px 8px; /* 文字周りの余白 */
margin-top: 3px; /* タグ同士の余白 */
border-radius: 1px; /* 角を少し丸く */
text-decoration: none;
}
.tagcloud a:hover {
background: #99cccc; /* マウスホバー時の背景色 */
}
|
まず、タグクラウドのデザインだが、デフォルトだと
こうなって見た目がもの凄く悪い。なので、文字が大きくなるのを防止するために
|
1 |
.widget_tag_cloud a { }
|
この部分の{ }中を弄る。
|
1
2
3
4
5
6
7
8
9
|
font-size: 11px !important; /* 文字のサイズを変更。 !importantで、サイズを固定する */
line-height: 1em; /* 行間の設定 */
background: #88caac; /* 背景色 */
display: inline-block;
white-space: nowrap;
padding: 8px 8px; /* 文字周りの余白の設定 */
margin-top: 3px; /* タグ同士の余白の設定 */
border-radius: 1px; /* 角を少し丸くする（数値を大きくするとより丸く） */
text-decoration: none;
|
こうすることで、
が
こんな感じに変わる。
でも、後ろに何故か（ , ）が居て、やっぱり見た目は変。
なので、次に、
|
1
2
3
4
|
/*タグの後ろの文字*/
.widget_tag_cloud a:after {
content: " ";
}
|
ここを弄る。
デフォルトのまま使うと、各タグ（複数のとき）をコンマ（ , ）で区切り、先頭に Tags: という文字付きで、タグの一覧を表示します。
|
1 |
<p><?php the_tags(); ?></p>
|
どうにかして後ろの（ , ）を取りたくて色々探したが、テンプレートタグ/the tags – WordPress Codex 日本語版で説明があるように、<p><?php the_tags(); ?></p>を弄るといいよという説明はあるが、どこにソレがあるのかが分からず躓くこと半日。
探せど探せど見つからないので、別の所から何とか出来ないかとGoogleデベロッパーツールでひたすら探し見つけ出したのが、.widget_tag_cloud a:の部分。
擬似クラス”before””after”というものがここにあるっぽいのと、a:afterのあとのコードに（ , ）が入っているのを見つけたので、もしかしてこれかな？と思い（ , ）をスペースに置き換えてみると…
無事に（ , ）が居なくなった！
|
1
2
3
4
|
/*タグの前の文字・画像*/
.widget_tag_cloud a:before {
content: url(https://2359-08.com/img/pin_mini.png);
}
|
ついでにa:beforeで画像をくっつけてみて
こんな感じで完成！
無事、何とかなって良かった。
参考サイト
【WordPress】タグクラウドの見た目と表示順番を安全にカスタマイズ！／FEBRUARY29様
[addtoany]
