CocoonWordPress

【Cocoon】タグクラウドをカスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

タグクラウド

WordPressテーマ Cocoonで使われている「タグクラウド」のカスタマイズについてまとめてみました。

テーマCocoonのタグクラウド

WordPressテーマ Cocoonで使われている「タグクラウド」は次の様になっています。

【WordPress】タグクラウドをカスタマイズする

WordPressテーマ Cocoonらしいシンプルなデザインとなっています。

気になる点として、若干縦に長くなっていること。

タグクラウドのカスタマイズ その1

タグのデザインは、以前のエントリー記事「【WordPress】カテゴリーラベルとタグラベルをカスタマイズする」で完成しています。

【Cocoon】カテゴリーラベルとタグラベルをカスタマイズする
WordPressテーマ Cocoonの「カテゴリーラベル」と「タグラベル」のカスタマイズについてまとめてみました。カスタマイズの内容は、「カテゴリーラベル」と「タグラベル」のカラー設定を共通化し丸みを帯びたデザインに変更してみました。

そのタグと同じデザインで、タグクラウドのカスタマイズを行います。

カスタマイズ内容

「タグクラウド」のカスタマイズ その1は、下記の通りです。

このカスタマイズ内容を「スタイルシート(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】タグクラウドをカスタマイズする

縦の長さはかなり短くなり、タグのデザインも統一感が取れて良くなったと思います。

タグクラウドのカスタマイズ その2

「タグクラウドのカスタマイズ その1」では、WordPressテーマ Cocoonで使われている「タグクラウド」と同様に横幅いっぱいにタグを表示する形となっています。

これをタグ内の文字の長さ分だけタグを表示する形として、タグクラウドのカスタマイズを行います。

カスタマイズ内容

「タグクラウド」のカスタマイズ その2は、下記の通りです。

このカスタマイズ内容を「スタイルシート(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で使われている「タグクラウド」は、次のようになりました。

【WordPress】タグクラウドをカスタマイズする

縦の長さは、「タグクラウドのカスタマイズ その1」と同様です。

スペースが出来るのですが、タグ自体は無駄な空白がない分だけスッキリとした感じとなります。

最後に

自分は「タグクラウドのカスタマイズ その2」の表示の方が好きなのですが、スマホやタブレットでタッチすること思うと、タグのサイズが少しでも大きい方が押しやすいので、「タグクラウドのカスタマイズ その1」の方が実用的だと思います。

コメント

タイトルとURLをコピーしました