タグのうしろに居座っていたカンマ。やっと消すことが出来たよ！

WordPress
— ナカ

※この記事は、Surfaramaをカスタマイズしていた時のものです。現在のテーマの内容とは異なります。

前回、タグクラウドのデザインを変えるために、ああでもない、こうでもないとうなっていたのですが、コレが漸く解決いたしましたー！わーい！

色々うなっている記録は、こちらから見れます。

タグの後ろにいる憎いやつ。こいつが全然消えてくれないんだけど……
タグの後ろにいる憎いやつ。こいつが全然消えてくれないんだけど……
※この記事は、Surfaramaをカスタマイズしていた時のものです。現在のテーマの内容とは異なります。 WordPressをさわり始めたときに、記事別にカテゴリ分けるのも分かりにくいなぁと思っていたため、付けるつもりはな […]

で、いっぱいいじりまくった結果、こんな感じにデザインを変更することに成功いたしましたよ！

タグ

見て下さい！前回悩まされたカンマ。コイツを綺麗さっぱり削除することに成功したんですよ!!

と、言う訳で忘れないうちにメモしておきます。

今回、デザインを作るために設定したCSSの内容は以下の通りです。

 

/*タグクラウドのデザイン*/ 
.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; /* マウスホバー時の背景色 */
}

まず、タグクラウドのデザインですが、デフォルトだと

タグ2

こんな風になっていました。これだと見た目がもの凄く悪くて、あまり好みじゃないんですよね……。

なので、文字が大きくなるのを防止するために

.widget_tag_cloud a {　}

この部分の{　}中を弄っています。

ウィジットのクラウドタグは、.widget_tag_cloud aで制御されいていたので、このクラスに直接指定をすることが大事なんですかね？

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;

.widget_tag_cloud aに上記のコードを追加すると、

タグ2

となっているレイアウトが、

タグ3

こんな感じに変化します。これで、記事が増える度にタグが巨大化していく減少をストップさせることが出来ました。ついでに周囲に色を入れて、タグが一つ一つ違うものだという風にわかりやすくすることも出来ています。

でも、後ろに何故かカンマ（ , ）が居て、やっぱり見た目は変なんですよね。うん。

なので、次に、

/*タグの後ろの文字*/
.widget_tag_cloud a:after { 
content: " "; 
}

ここを弄りました。

デフォルトのまま使うと、各タグ（複数のとき）をコンマ（ , ）で区切り、先頭に Tags: という文字付きで、タグの一覧を表示します。

<p><?php the_tags();&nbsp;?></p>

どうにかして後ろの（ , ）を取りたくて色々探していましたが、テンプレートタグ/the tags – WordPress Codex 日本語版に、<p><?php the_tags();&nbsp;?></p>を弄るといいよという説明はあるんですが、その部分がテーマのどこにあるのかなんて、素人にはわからないんですよ。

なので、それが分からず時間だけがただ過ぎていく……。

結局、この部分は見つからなかったので、別の所から何とか出来ないかと思いGoogleデベロッパーツールでひたすら探し見つけ出したのが、.widget_tag_cloud a:の部分です。

擬似クラス”before””after”というものがここにあるっぽいのと、a:afterのあとのコードに（ , ）が入っているのを見つけたので、もしかしてこれかな？と思い（ , ）をスペースに置き換えてみたところ…

タグ4

無事に（ , ）が居なくなるんですよ！

/*タグの前の文字・画像*/ 
.widget_tag_cloud a:before { 
content: url(https://2359-08.com/img/pin_mini.png); 
}

ついでにa:beforeで画像をくっつけてみて

タグ

こんな感じで完成！

無事、何とかなって良かった。

Surfaramaを使用している方で、タグクラウドのデザインを変更したいと思う方が居るのでしたら、参考になればと思います。

 

今回、修正するときにお世話になったサイトさんはこちら。

【WordPress】タグクラウドの見た目と表示順番を安全にカスタマイズ！／FEBRUARY29
スポンサーリンク