WordPressでタグを使用していますか？タグ使用の是非に関しては色々ありますが、タグを上手く使うとサイトの利便性が高まったり、より詳細な記事の振り分けができて便利ですよね。しかし、無料テーマのものはデザインが若干ダサい場合も多いです。 そこで今回は、CSSだけでタグクラウドのデザインを整頓し、自動でタグの前に#を付ける方法をご紹介します。 タグクラウドとは WordPressで記事を書いた際にタグを付けておくと、カテゴリーとは別に自動でタグページを作ってまとめてくれます。 このタグをトップページやサイドバーに表示させるには、通常はタグクラウドというウィジェットを使います。 タグクラウドの初期デザイン タグクラウドでは、そのサイトで多く利用されているタグの文字が大きく、少ないタグは小さく表示され流ので、そのサイトがどんな事について書かれているかが一目でわかります。 初期のタグクラウドのデザイン しかしこのタグクラウド、標準ではデザインがイマイチ！ 文字の大きさが揃っていないので、一気に乱雑な印象を与えてしまいます。 使用しているWordpressのテーマ（テンプレート）がタグクラウドのデザインに対応している場合は、もう少しマシな表示にはなりますが、この標準のデザインだと見た目に美しくないですよね。 タグクラウドのデザインを変更する そこで、タグクラウドのデザインを変更します。タグというからには、インスタグラムみたいにタグの前に#が表示するとそれっぽく見えますよね！ ということで、今回はインスタグラムやTwitterなどのSNSのタグのように、タグの前に#を表示させることにします。 しかし、全てのタグの前に手動で#を付けるのは現実的ではないです。そこで、CSSでタグの前に自動で#を表示させるようにします。CSSで自動で表示をするから、タグ一つ一つに手動で#を付けるという間違ったことをせずに済みます。 タグクラウドのデザインCSS タグクラウドをインスタグラム風にするにはCSSを追加するだけでOKです。 ※マウスオーバーの色はお好みで変えることができます。 .tag-cloud の部分（class）はお使いのテーマによって変わってくるので、調べる必要があります。 タグクラウドのclassの調べ方 上記のCSSを追加しただけでは、テーマによってうまく表示されない場合もあると思います。その場合は、そのテーマに合わせて.tag-cloudの部分をお使いのテーマに該当するclassへ書き換えてください。 classの調べ方は、Google Chromeの検証機能（ウェブディベロッパー・ツール）を使います。 Google…