青菜に塩ブログ

育児/買い物/サイト構築 つれづれ

サイト構築

[STINGER7]プラグインを使わずにタグクラウドを整える

タグの一覧を表示してくれるウィジェット「タグクラウド」ですが、デフォルトの状態だと不格好な表示になります。記事数によってフォントサイズが変わるのでわかりやすい点もあるのですが、見た目に落ち着きません。

tagcloud1

これを↓このように成形する手順です。

tagcloud2

今回のカスタマイズにあたり、下記のサイトを参考にしています。

wordpressプラグインを使わずにタグクラウドの数と表示方法とCSSを編集する方法

(もうひとつ参考にしたサイトがあったのですが、現在Not Foundになっています。)

手順1:function.phpにタグクラウドのパラメータを追記

下記のコードを「function.php」に追記します。

// テーマのタグクラウドのパラメータ変更
function my_tag_cloud_filter($args) {
$myargs = array(
'smallest' => 10, // 最小文字サイズは 10pt
'largest' => 10, // 最大文字サイズは 10pt
'number' => 30, // 一度に表示するのは30タグまで(0で無限)
'echo' => false, // wordpress4.4以降はこの行必須
);
return $myargs;
}
add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');

手順2:style.cssにタグクラウドの項目を追記

下記はこのサイトで使用している記述です。

.tagcloud {
overflow: hidden;
padding: 10px;
}

.tagcloud a {
float: left;
display: block;
background: #7A7E28; /* 背景色 */
line-height: 100%;
color: #fff; /* 文字色 */
text-decoration: none;
font-weight: 400;
font-size: 93%;
padding: 4px 10px 3px;
margin: 0 5px 5px 0;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.tagcloud a:hover {
background: #4F8314; /* マウスオーバー時の背景色 */
}

  • 背景色やmargin、paddingなどはお好みで変えてください。
  • 色指定の参考には色色 [:iroiro]というサイトを利用しました。入力したキーワードからイメージされる色の組み合わせを生成してくれます。(日本語にも対応。)「Export>HTML」でカラーコードが出ますので、サイトの色指定などに応用できます。

-サイト構築
-,