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

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

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

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

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

タグ

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

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

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

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

タグ2

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

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

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

ウィジットのクラウドタグは、.widget_tag_cloud aで制御されいていたので、このクラスに直接指定をすることが大事でありますよ。

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

タグ2

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

タグ3

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

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

なので、次に、

ここを弄りました。

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

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

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

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

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

タグ4

無事に( , )が居なくなるんですよ!

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

タグ

こんな感じで完成!

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

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

 

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

スポンサーリンク