Simplicityでタグクラウドをかっこよくカスタマイズ

このブログはWordPressで運営してます。使っているテーマはSimplicity。Simplicityはすごくシンプルで気に入っております。そしてカスタマイズのしやすさも。

それで今回は「タグクラウド」をちょっとカスタマイズしてかっこよくしたいと思います。えーと、もちろん基本はコピペですw。先人の方々ありがとうございます。

それでは、早速いってみましょう。

1 バックアップ
2 どんな風に変えるの？
3 カスタマイズのやり方
- 3.1 テーマのための関数（function.php）
- 3.2 スタイルシート（style.css）
4 まとめ

バックアップ

その前に。バックアップは必ず行いましょう。

実は今回、私も失敗しましてfunction.phpに追記したらWordPressの管理画面にログインできなくなってしまったんですよ（汗汗）。

どうやら全文コピペしたつもりが少し足りなかったみたいで・・・。そのまま保存したらログインできなくなりました。

いやー、さすがにアセりましたがバックアップがありましたのでファイルを置き換えてなんとかなりました。

バックアップは大切です。そしてこの記事を参考にされる場合は自己責任でお願いいたします。

どんな風に変えるの？

まず現状はどんな感じかというと、こんな感じ。

サイドバーに表示されてますタグ。リンクになってまして、記事にタグをつけておけば、そのタグのある記事の一覧が表示されます。よく使うタグはフォントは大きく表示されております。

う〜ん・・・。すいません、これ好みの問題もあるでしょうけど私は好きじゃないんですよね〜。この表示。もうちょっとすっきり表示させたい。

そこで今回は、こんな感じにカスタマイズしたいと思います。

やった事は基本的には以下の３つ。
１）フォントサイズを統一
２）枠をつける
３）マウスオーバーで色を変化させる
それでは、いってみましょう。

カスタマイズのやり方

まずは、WordPress管理画面の「外観」から「テーマの編集」へ。右側にいろいろなファイル名が表示されてます。

今回変更するのは「テーマのための関数（function.php）」とスタイルシート（style.css）」の２つです。

テーマのための関数（function.php）

まずは「テーマのための関数」から。

以下の文をコピペで追記しました。

//タグクラウドのカスタマイズ
function tag_cloud_customize($args) {
 $myargs = array(
 'smallest' => 14, //最小フォントサイズ
 'largest' => 14, //最大フォントサイズ
 'unit' => 'px', //フォントサイズ単位
 'orderby' => 'count', //表示順(件数)
 'order' => 'DESC', //ソート順(降順)
 );
 $args = wp_parse_args($args, $myargs);
 return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_customize');

フォントサイズを14pxに統一。
表示する順番を「件数が多い順」に変更。

スタイルシート（style.css）

次に「スタイルシート」にコピペで追記。

/* タグクラウドのカスタマイズ */

.tagcloud a {
font-size: 14px !important;
display: inline-block;
margin-bottom: 5px;
padding: 1px 10px;
text-decoration: none;
color: #339999;
border-radius: 5px;
border: 1px solid #339999;
background-color: #fff;
}

.tagcloud a:hover {
transition: 0.3s;
color: #000000;
background: #99cccc;
}

枠をつける。
マウスオーバーで色を変え、件数も表示させる。
をやっております。
「#○○○○○○」は色指定ですので、この値を変えることで自分の好みの色に変えることができます。

で、気になったのは「font-size: 14px !important;」の部分だと思うのですが（別に気にならなかった？笑）。先に「テーマのための関数」でフォントサイズを指定してるからいらないのでは？と思いますよね？

実は私の環境では、スマホでうまく表示されないんですよね。多分「AMPの有効化」をONにしているからだと思うのですが・・・。それでサイズだけでも揃えようと思って追記してみました。

これで正解なのかはよく分からないのですが、一応参考までに。

AMPについては、詳しく説明しませんが（出来ませんがw）スマホで表示を速くするための規格みたいなもの？かな？
すいませんググってください（汗）。