読者です 読者をやめる 読者になる 読者になる

darudaru

だるだるしてるエンジニア

wordpressでタグクラウドを均一なサイズにする方法

記事が増えてきて、タグクラウドのサイズのバラバラ感が目立ってきたので修正を行いました。

 

tagcloud-before

 

もはや表示崩れのレベル。

 

なんでタグクラウドのサイズが変わってしまうの?

<div class="tagcloud">
<a href='http://darudaru-life.com/tag/php' class='tag-link-7 tag-link-position-3' title='2件のトピック' style='font-size: 16.4pt;'>PHP</a>
<a href='http://darudaru-life.com/tag/wordpress' class='tag-link-6 tag-link-position-4' title='3件のトピック' style='font-size: 22pt;'>wordpress</a>
<a href='http://darudaru-life.com/tag/work' class='tag-link-8 tag-link-position-5' title='1件のトピック' style='font-size: 8pt;'>work</a></div></article>

 

タグに紐づく記事の件数によって、aタグのstyleが変わっています。

1件の場合はfont-size:8px、2件の場合はfont-size:16.4px、とどんどん大きくなっていきます。

これがタグクラウドの文字サイズがバラバラになってしまう原因です。

 

わたしのようにcssタグクラウドのスタイルを指定していても、タグクラウドのフォントサイズがインラインで指定されているため、一番強くなってしまっています。

 

修正方法

1. 「!important」を指定する

一番簡単な方法です。

タグクラウドのaタグにスタイルの優先順位を一番高くさせる!importantを指定します。

.tagcloud a {
 font-size: 16px !important;
}

 

修正範囲もたった1行をcssに追加するだけで修正できます。

できるんですが、ネット上の情報を見ていると修正方法としては次に出てくるfuntions.phpを改修する方法がほとんど。

なんでだ?と調べていたところ、!importantはcssの優先順位のルールを無視させる方法のため、マークアップする上ではあまり推奨できないという意見が多く見られました。

書いたスタイルが!importantのせいで逆に反映されなかったり、いざ外そうとしても影響範囲が分からないなど、メンテナンスも悪いからとのこと。

 

とはいえ、個人のwordpress内で、しかも意図的にスタイルを無視させたいがために使うので、!importantで修正しちゃって問題ないと個人的には思います。

 

2. functions.phpタグクラウドのオプションを追加する

functions.phpタグクラウドのパラメータの変更処理を追加します。

function tag_cloud_filter($args){
  $args['unit'] = 'px';  // フォントサイズの単位。デフォルトだとpt。
  $args['smallest'] = 13;  // 最小文字サイズは13px
  $args['largest'] = 13;  // 最大サイズは13px
  return $args;
}
add_filter('widget_tag_cloud_args', 'tag_cloud_filter');

 

これで完了です。

 

さいごに

このブログでは勉強もかねてfunctions.phpの方法で修正を行いました。

 

tagcloud-after

 

キレイになりました。

 

どちらの方法も簡単なので、お試しください。