タグクラウド
WordPressテーマ Cocoonで使われている「タグクラウド」のカスタマイズについてまとめてみました。
テーマCocoonのタグクラウド
WordPressテーマ Cocoonで使われている「タグクラウド」は次の様になっています。
WordPressテーマ Cocoonらしいシンプルなデザインとなっています。
気になる点として、若干縦に長くなっていること。
タグクラウドのカスタマイズ その１
タグのデザインは、以前のエントリー記事「【WordPress】カテゴリーラベルとタグラベルをカスタマイズする」で完成しています。
そのタグと同じデザインで、タグクラウドのカスタマイズを行います。
カスタマイズ内容
「タグクラウド」のカスタマイズ その１は、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■タグクラウド カスタマイズ
************************************/
.tagcloud {
padding: 0px 2px 0px 2px;
}
.tagcloud a {
text-decoration: none; /*テキスト初期化*/
color: #fff; /*タグフォントカラー*/
font-size: 12px; /*タグフォントサイズ*/
font-weight:bold; /*文字強調*/
display: inline-block; /*横並びで上下左右空白有り*/
background-color: #fe619a; /*タグ背景色*/
padding: 2px 6px 0px 6px; /*タグ内側余白*/
margin-right: 2px; /*タグ外側右余白*/
margin-bottom: 2px; /*タグ外側下余白*/
border-radius: 9px 3px; /*タグデザイン*/
border: 0px; /*タグ枠線無し*/
word-break: break-all; /*テキストの途中で改行させない*/
}
.tagcloud a:hover {
background: #ffddee; /*ホバー時タグ背景色*/
color: #f32469; /*ホバー時タグフォントカラー*/
transition: all 0.6s ease; /*アニメーション*/
}
カスタマイズ後のタグクラウド
今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「タグクラウド」は、次のようになりました。
縦の長さはかなり短くなり、タグのデザインも統一感が取れて良くなったと思います。
タグクラウドのカスタマイズ その２
「タグクラウドのカスタマイズ その１」では、WordPressテーマ Cocoonで使われている「タグクラウド」と同様に横幅いっぱいにタグを表示する形となっています。
これをタグ内の文字の長さ分だけタグを表示する形として、タグクラウドのカスタマイズを行います。
カスタマイズ内容
「タグクラウド」のカスタマイズ その２は、下記の通りです。
このカスタマイズ内容を「スタイルシート(style.css)」に追記します。
/************************************
** ■タグクラウド カスタマイズ
************************************/
.tagcloud {
display: inline-block;
padding: 0px 2px 0px 2px;
}
.tagcloud a {
text-decoration: none; /*テキスト初期化*/
color: #fff; /*タグフォントカラー*/
font-size: 12px; /*タグフォントサイズ*/
font-weight:bold; /*文字強調*/
display: inline-block; /*横並びで上下左右空白有り*/
background-color: #fe619a; /*タグ背景色*/
padding: 2px 6px 0px 6px; /*タグ内側余白*/
margin: 0px 0px 4px 0px; /*タグ外側余白*/
border-radius: 9px 3px; /*タグデザイン*/
border: 0px; /*タグ枠線無し*/
word-break: break-all; /*テキストの途中で改行させない*/
}
.tagcloud a:hover { background: #ffddee; /*ホバー時タグ背景色*/ color: #f32469; /*ホバー時タグフォントカラー*/ transition: all 0.6s ease; /*アニメーション*/ }
カスタマイズ後のタグクラウド
今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「タグクラウド」は、次のようになりました。
縦の長さは、「タグクラウドのカスタマイズ その１」と同様です。
スペースが出来るのですが、タグ自体は無駄な空白がない分だけスッキリとした感じとなります。
最後に
自分は「タグクラウドのカスタマイズ その２」の表示の方が好きなのですが、スマホやタブレットでタッチすること思うと、タグのサイズが少しでも大きい方が押しやすいので、「タグクラウドのカスタマイズ その１」の方が実用的だと思います。
コメント