【WordPress】swellの当ブログ自作タグクラウド完全ガイド｜ヒートマップ風・9色指定・音付き・タイポグラフィ風まとめ

このページについて

このページは、当ブログで投稿したWordPressテーマ「SWELL」の自作タグクラウドのまとめページです。

単色ヒートマップ風、9色ヒートマップ風、音が出る仕様、タイポグラフィ風、最初に作ったタグクラウドなど、これまで制作したタグクラウドを一覧化しています。

当ブログのタグクラウド実装を体系的にまとめたページです。

経緯

通常のタグクラウドは、ワードを並べて表示します。

• 一覧表示に近い
• 構造がシンプル
• タグの数を表示

という特徴があります。

そこで発想を変えて、以下の様々なタグクラウドを作っていくことにしました。

• ヒートマップ風タグクラウド
• 音が出るタグクラウド
• タイポグラフィ風タグクラウド
• プロトタイプ

ヒートマップ風タグクラウド

暗号通貨市場のヒートマップのように、面積で投稿数を示すようにしました。最も使われるタグは大きく、以下段階的に縮小する仕様です。

単色と多色のタイプがあります。

基本仕様

・1位：全体の半分
・2位：4分の1
・3位：8分の1
・8位まで段階的縮小
・文字は可能な限り表示（長い場合は省略する）
・「▼」クリックで残りタグ展開

視覚的にそのブログの中心テーマや投稿の偏りが分かる仕組みです。

カラータイプの種類

単色型と多色型

単色型（グラデーション）

1色を濃淡で表現。

・色が一色でも違いがわかる
・ブログに合わせられる
・ブログ世界観を壊さない

統一感を持たせています。

詳細はこちら

多色型（9色ヒートマップ）

9色で強弱を表現。

・視認性が高い
・情報量の多いブログ向き
・視覚的インパクトが強い

テーマが多岐に渡る場合に有効です。

詳細はこちら

音が出るタグクラウド

・クリックで効果音
・PCは連続再生可能
・スマホは1回再生仕様

気分転換・遊び心を加えた実験的タイプです。

詳細はこちら

タイポグラフィ風タグクラウド

・タグを可能な限り詰めて配置
・ランダム表示
・縦長表示に合い、サイドバーやフッター向き

「情報」よりも「雰囲気」を演出するタイプです。

詳細はこちら

タイポグラフィ風タグクラウド2

WordPressテーマSWELLで、タグクラウドを図形の中に配置してみました。四角形、円形、逆正三角形、星形、T字など、タグをただ並べるのではなく、ブログの言葉で形を作る表示です。

詳細はこちら

プロトタイプ

最初に制作したタグクラウドでシンプル設計です。ここから現在のタグクラウドが発展していきました。

詳細はこちら

導入時の注意

本ページで紹介しているタグクラウドは、SWELL環境で動作確認を行っていますが、すべての環境での動作を保証するものではありません。
カスタマイズは各自の環境をご確認のうえ、自己責任でお試しください。

このページの使い方

・当ブログの自作タグクラウドの詳細記事への入口、または内部リンクのハブとして
・各タグの比較の一覧として
・SWELLカスタマイズの参考資料として

サイトデザインの一部として活用したい方は、各記事をご覧ください。

今後も新バージョンが出た場合は随時追記します。