【SWELL対応】ヒートマップ風タグクラウドの配色見本集｜各色の見え方とブログ別おすすめカラー

今回は、各色のヒートマップ風タグクラウドが「実際にどんな見え方になるか」をまとめました。前回記事の続編として、まずはコードを動かす前に、配色イメージを確認する回です。

やることはシンプルで、方法は次のとおりです。

• 色の確認
• 記事本文やウィジェットにショートコードを貼る
• ショートコード内に、使いたい色のHEXカラーコードを入れる
• HEXカラーコードは、＃抜きで６桁にしてください
  6桁7桁の透明度（アルファ）を入れると適応されなくなります
• その色指定が反映されて、タグクラウドが表示される

つまり、「貼る前に色の確認」できるのが今回の記事内容です。

ブログのテーマ（雰囲気・ジャンル・読みやすさ）に合う色を選びながら、ヒートマップとして見やすい配色を探してみてください。

前回記事

マルマルライフ

ブログのタグクラウドヒートマップ風表示を別色にして遊ぶ！｜SWELL対応 今回は前回記事で紹介したのヒートマップ風のタグクラウドに、他の色を付けると、どのような表示になるかという内容です。 今回は、前回と色違いの単色と、各タグの色が違…

これらのコードは、AIで作成したもので、環境によっては機能しないかもしれません。そのため、コードを追加する場合は注意してください。
念のためにバックアップを推奨します。

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

以下の各色を見て、自身のブログに合う色の参考にしてください。
作業手順はシンプルで、ショートコードに好きな色のHEXカラーコードをいれてください。

作業手順

手順は5stepです。

[custom_tag_cloud_boxed_color color="#○○○○○○"]

以上で作業は終わりです。

表示例

表示例は12コを挙げておきます。参考にしてください。

swell系色の場合

→ SWELL標準デザインと最も自然に馴染む色

HEXカラーコード：1C4A5D

向いてそうなブログ

• WordPress・ブログ運営系
• 技術解説・ノウハウ系
• ビジネス・情報整理型ブログ

別の赤の場合

→ 注意喚起・熱量の高いテーマ向き

HEXカラーコード：EF4135

向いてそうなブログ

• 強い主張のある個人ブログ
• 問題提起・社会批評
• 感情や体験談が中心の文章

青の場合

→ 知的・冷静・信頼感を出しやすい

HEXカラーコード：0350C3

向いてそうなブログ

• IT・テック系
• 学習・解説・情報整理
• ロジカルな内容が多いブログ

黄の場合

→ ヒートマップ感が強く、視線を集めやすい

HEXカラーコード：FFD700

向いてそうなブログ

• 雑記ブログ
• アイデア・発想・気づき系
• ポジティブな内容が多いブログ

緑の場合

→ 安心感・継続感がある配色

HEXカラーコード：487B37

向いてそうなブログ

• ライフスタイル
• 健康・自然・暮らし系
• 落ち着いた日記・コラム

紫の場合

→ 知性・深さ・個性を出しやすい

HEXカラーコード：4B0082

向いてそうなブログ

• 思考・哲学・内省系
• 創作・表現・研究寄りブログ
• 世界観を大切にするブログ

橙の場合

→ エネルギッシュで前向きな印象

HEXカラーコード：FF8C00

向いてそうなブログ

• 副業・挑戦・行動記録
• 趣味・レビュー系
• 人の活動が見えるブログ

ピンクの場合

→ 温度感と人間味が伝わる

HEXカラーコード：C2185B

向いてそうなブログ

• エッセイ・感情表現
• 人間関係・体験談
• 個人色の強いブログ

水色の場合

→ 明るくポップだが、やや好みが分かれる

HEXカラーコード：00D3D3

向いてそうなブログ

• デザイン・実験的ブログ
• 海がテーマや軽めの雑記
• 若年層向けコンテンツ

白

→ 枠線・文字色の調整が必須

HEXカラーコード：EEEEEE

向いてそうなブログ

• ミニマルデザイン
• 落ち着いた雰囲気で情報を整理したい
• 余白や読みやすさを大切にしたブログ
• 文章そのものを主役にしたブログ

白は見えなくなってしまうので、以下のコードを追加CSSに貼り付けて、ショートコードは以下限定です。

追加CSS用コード

/* ==========================================
   color="#EEEEEE" 専用処理
   ・枠線ON
   ・文字を黒
   （CSSのみ／PHP不要）
========================================== */

/* 各タグ：背景が rgba(238,238,238,*) のものだけ */
.custom-tag-boxed-heatmap-color 
.tag-box-color[style*="rgba(238, 238, 238"] {
  border: 1px solid #04384D70;
  color: #04384C;
}

追加CSS用コード

ショートコード

[custom_tag_cloud_boxed_color color="#EEEEEE"]

白限定ショートコード

黒

→ 漆黒で階調が出やすいが、グレー化しやすい

HEXカラーコード：0B0D17

向いてそうなブログ

• ダークテーマ
• 写真・作品集
• 世界観重視のブログ

グレーの場合

→ 黒と似た印象になりやすく、変化は控えめ

HEXカラーコード：A9A9A9

向いてそうなブログ

• 補助情報が多いブログ
• タグを主張させたくない場合

サイドバーの場合

ヒートマップ風画はサイドバーに丁度はまるような大きさに調整されます。
しかし、文字が大きくなります。そのため、大きさを調整するコードをコピペします。
これで、任意の大きさで調整できます。

サイドバー専用：文字サイズ調整CSS

大きくなってしまう文字をCSSコードで調整します。このコードをカスタマイズの追加CSSの空いたところにペーストしてください。

CSSコード

/* ==========================================
   ヒートマップ：サイドバー表示用 文字サイズ調整
========================================== */

/* SWELL サイドバー内だけ適用 */
.l-sidebar .custom-tag-boxed-heatmap-color .tag-box-color,
.sidebar .custom-tag-boxed-heatmap-color .tag-box-color {
  font-size: 60% !important;
}

/* サイドバー内：1位だけ少し大きめにする場合 */
.l-sidebar .custom-tag-boxed-heatmap-color .tag-1,
.sidebar .custom-tag-boxed-heatmap-color .tag-1 {
  font-size: 80% !important;
}

サイドバー専用文字サイズ調整CSSコード

文字調整

このコードの「%」で大きさを調整してください。

• font-size: 60% !important;
• font-size: 80% !important;

表示結果

ちょうど良いサイズで調整されました。

ヒートマップ風タグクラウドは「色」でブログの個性が変わる

ヒートマップ風タグクラウドは、タグの重要度を視覚的に伝えるだけでなく、ブログ全体の印象そのものを左右します。

そして同じ構造・同じタグでも、

• 青なら「整理されたブログ」
• 紫なら「思考型のブログ」
• 橙なら「動きのあるブログ」

というように、色がブログの個格を語るようになります。

今回の記事で感覚的に最適な色を探して見てください。

まとめ

今回のポイント

• ヒートマップ風タグクラウドは 配色で印象が大きく変わる
• SWELLでは #F7F7F7 やブルー系が特に相性良し
• 白色は CSS調整前提
• ブログのテーマとの相性が最優先

まずは気になる色を選び、「実際に表示して違和感がないか」を基準に調整してみてください。

このヒートマップ風は、遊べるのが一番の魅力です。

前回記事

マルマルライフ

ブログのタグクラウドヒートマップ風表示を別色にして遊ぶ！｜SWELL対応 今回は前回記事で紹介したのヒートマップ風のタグクラウドに、他の色を付けると、どのような表示になるかという内容です。 今回は、前回と色違いの単色と、各タグの色が違…