Simplicity2でタグクラウドのデザインをカスタマイズ

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、サイドバーのウィジェットなどに配置されるタグクラウドのデザインを変更してみた。このサイトで使用したデザインのCSSコードを貼ってある。

Simplicity2のバージョンは2.6.3。

CSS変更する際の注意

WordPress上で「外観」→「テーマの編集」にある「スタイルシート(style.css)」に変更したいコードを追加していく。その前に2つほど気をつけておくことを。

CSSのカスタマイズは子テーマで

親テーマを直接触るなんて怖くてできない。以下のサイトで「Simplicity2カスタマイズ用の子テーマファイル」をダウンロード。これ、常識。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

変更していなければブラウザのキャッシュをクリアを

変更されていなくても、ブラウザのリロード(再読込)をすれば、たいていはCSSの変更を反映してくれるはず。もし、変更されていない場合はブラウザのキャッシュをクリア(スーパーリロード)を試してみる。
(例)Windows
Firefox:Ctrl + F5 または Ctrl + Shift + R
Google Chrome:Ctrl + F5 または Shift + F5

タグクラウドのデザインを変更するカスタマイズ

Simplicityのデフォルトでは、タグクラウドのデザインがお世辞にも周囲に溶け込んでいるとはいえないと思っていた。大きな原因は、よくつかうタグの文字(フォント)が大きくなってしまうことだ。そこで、さらりと表示されるようなタグクラウドに変更してみた。

タグクラウドのデザインを変更するCSSコード

/*タグクラウドのデザイン*/
.tagcloud a {
font-size: 15px !important;
line-height: 1;
text-decoration: none;
transition: 0.8s ;
}
.tagcloud a:hover {
background: #dcdddd;
color: #fbfaf5;
}

CSSのカンタンな説明

フォントの大きさを「font-size」で「15px」に指定した。本文の文字が16なので少し小さくなっている。おそらく、意識しないとわからない程度だと思う。「line-height」は行間。カテゴリーなどよりも行間が小さくなっている。「hover」でリンクをマウスオーバーしたときの動作を指定しているが、バックの色を白鼠色 #dcdddd にしていたりするので、ほとんど気付かないと思う。

タグクラウドは必要かどうか?

情報系のサイト、例えば海外の音楽を紹介してくれるサイトなど、ではタグクラウドが役立つ。知らないアーティストを見つけたときなんかは関連記事やタグクラウドをクリックして別の情報を探したりする。ただ、個人サイトで必要かどうかは疑問だ。タグクラウドを眺めて「あぁ、こんなサイトなんだな」と、お品書きみたいな役目をする場合もあるかもしれないけれど、最終的には個々人の趣味になるんだろうなと思っている。