タグクラウドをちょっとおとなしめでシンプルに変更してみた。


公開日:2013年11月25日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , | 閲覧数:389 | Leave a comment

タグクラウド

サイドバーが長ーくなってきていて、

先日はブログロールをアコーディオン化しました。

ちょっとでもスペースを節約しようと、

今度はタグクラウドをいじってみました♪

通常のタグクラウド

タグクラウドは、標準だと投稿数によってフォントサイズが変わるようになっていて、ウイジェットで追加した状態では以下の様になっています。

旧タグクラウド

これでもちろん、問題はないのだけれど、

今回はこのタグクラウドをちょっとシンプルな感じにしてみます。

以下はデフォルトです。

  • smallest – 一番小さいタグを 8(pt) で表示(件数が少ないタグ)
  • largest – 一番大きいタグを 22(pt) で表示(件数が多いタグ)
  • unit – 最少・最多値のフォントサイズの単位として ‘pt’ (point) を使用
  • number – 最大 45 タグを表示
  • format – flat(ホワイトスペース区切り)形式でタグを表示
  • orderby – タグ名順に表示
  • order – 昇順でソート(前項でタグ名を指定しているので「タグ名の昇順」となる)
  • exclude – 除外タグなし
  • include – 全タグ対象
  • link – view
  • taxonomy – Use post tags for basis of cloud
  • echo – echo the results

改造したタグクラウド

今回はサイズをすべて同じにするために以下の様にしました。

新タグクラウド

もし、並び順などを変更したい、文字サイズをpxで指定したいなどあれば適宜調整。

css(スタイルシート)

参考までに当サイトでのスタイルシートです。

追記

2013/11/26 マウスオーバー時だけ背景色を設定し、トランジションでほわーっと表示されるようにしてみました。

プラグインWordPress › Post Snippets « WordPress Pluginsを利用して、ウイジェット(テキストウイジェットID「text-55」)にショートコードを書いて表示しています。

フォントサイズは指定済みですので、ここでは主に背景色などを設定しています。

マウスオーバー時に、背景色と文字色と文字サイズが変わります。
注:通常のサイドバーのリンクの設定より下に書くか「!important」しないと反映されません。(スタイルを設定している場合)

参考

テンプレートタグ/wp tag cloud – WordPress Codex 日本語版

WordPressのタグクラウド表示とタグクラウドのデザインお話

全部1行でカスタマイズ出来る!WordPressのタグクラウド表示 | ごすてっぷ

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年11月25日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , | 閲覧数:389 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

  • 薄墨

Leave a Reply

Required fields are marked *


CAPTCHA