WordPressテーマ「SWELL」でブログを作っていると、タグクラウドをただの一覧ではなく、もう少し見た目のあるパーツとして使いたくなることがあります。
タグクラウドは、本来であれば記事に使われているタグを一覧で見せるためのものです。読者が関連するテーマを探しやすくなるので、ブログの回遊にも役立ちます。
ただ、通常のタグクラウドは、どうしても文字が並ぶだけの表示になりやすいです。そこで今回は、自作カスタマイズとして、タグを記号や図形の形に配置するタイポグラフィー風タグクラウドを作成しました。
今回使用する記号は、次の6つです。
- ✚： 十字
- ☾ ：月
- ☁ ：雲
- ➥： 曲がる矢印
- ➦ ：曲がる矢印
- ♨ 温泉
丸や四角のような基本図形とは違い、少し意味や雰囲気を持った記号を使っています。タグクラウドを単なる一覧ではなく、記事やサイトの印象に合わせたデザイン要素として見せる試みです。
記号型タグクラウドとは
記号型タグクラウドは、タグを指定した記号の形に沿って配置する表示方法です。通常のタグクラウドでは、タグ名が横並びで表示されます。対して、記号型タグクラウドでは、タグの配置範囲そのものを記号の形にします。
十字であれば中心に向かって交差する形になり、月であれば細いカーブを描くような見た目になります。雲ならやわらかい輪郭になり、矢印なら動きや方向性を感じる表示になります。
同じタグを使っていても、どの記号の中に配置するかで、全体の印象は大きく変わります。
タグクラウドは情報を見せるパーツですが、配置の仕方を変えることで、ブログの雰囲気づくりにも使えるようになります。
記号ごとに向いているテーマがある
記号型タグクラウドは、記号そのものに意味や印象があることです。月は夜、静けさ、考えごと、落ち着きといった印象があります。雲はゆるさ、余白、ふわっとした思考、気分の変化などと相性がよいです。
矢印は、動き、方向転換、次の行動を連想させます。温泉マークは、休息、暮らし、リラックス、雑記ブログとの相性がよい記号です。記号型タグクラウドは、単に変わった形を作るだけではなく、記事のテーマに合わせて形を選べるところが魅力です。
今回使用した6つの記号
今回の表示例では、次の6つを使いました。
✚、☾、☁、➥、➦、♨
どれも形に特徴があるため、基本図形とは違った見え方になります。記号によってはタグが入りやすいものと入りにくいものがあります。十字や雲は比較的わかりやすい形になりやすい一方で、月や矢印は細い部分があるため、タグの大きさや間隔の調整が必要になります。
ここからは、それぞれの表示例を紹介します。
※デモ画像なので各タグは当ブログのタグを使用しています。本来は文字や記号に合うタグを使用するのが本来の仕様です。
タイポグラフィー風タグクラウド「✚ 十字」
十字は、縦と横が交差するわかりやすい形です。タグクラウドとして表示すると、中心に向かってタグが集まるような印象になります。丸や四角よりも形に方向性があり、シンプルながら存在感があります。
十字は、整理、交差、選択、つながり、補足などの印象を持たせやすい記号です。ブログ記事では、考え方を整理する記事や、複数の要素が交わるテーマと相性がよいと感じます。
また、形がはっきりしているため、記号型タグクラウドの中では比較的扱いやすい部類です。記号としてのわかりやすさと、タグクラウドとしての安定感を両立しやすいのが十字です。
タイポグラフィー風タグクラウド「☾ 月」
月の形は、少し細く、曲線の印象が強い記号です。丸のように全面を使う図形ではなく、外側のカーブに沿ってタグが配置されるため、余白が印象的に見えます。ぎっしり詰めるというよりも、細いシルエットをどう見せるかが重要になります。
月は、夜、静けさ、思考、内面、余白、落ち着きといったテーマに合いやすい記号です。自己理解の記事や、心の動きについて書いた記事に合わせると、雰囲気が出やすいと思います。
ただし、月は細い部分が多いため、大きなタグばかりだと形が崩れやすくなります。小さいタグを使いながら、月のカーブが見えるように調整する必要があります。
余白を活かした静かなタグクラウドにしたい場合、月の形はかなり面白いです。
タイポグラフィー風タグクラウド「☁ 雲」
雲は、丸みのあるやわらかい形です。タグクラウドとして表示すると、全体がふわっとまとまりやすく、硬さのない見た目になります。丸よりも少し遊びがあり、ハートほど感情的になりすぎないため、使いやすい記号です。
雲は、思考、気分、余白、暮らし、雑記、アイデアなどのテーマと相性があります。特に、考えをまとめる記事や、ゆるやかなライフスタイル記事に合わせると自然です。形としては上部にふくらみがあり、下部は比較的横に広がります。タグの配置がうまくいくと、雲らしい輪郭が出やすいです。
やわらかい雰囲気を出しながら、少し個性も見せたい場合は、雲のタグクラウドが使いやすいです。
タイポグラフィー風タグクラウド「➥ 曲がる矢印」
➥は、右へ向かうだけでなく、途中で曲がるような印象を持つ矢印です。単純な右矢印とは違い、方向転換や次の流れを感じさせます。記事の中では、考え方を変える、別の視点に進む、次の行動へ移るといったテーマと相性がよいです。
タグクラウドとしては、矢印の軸部分と先端部分のバランスが大切になります。軸が細くなりすぎると形がわかりにくくなり、先端だけが目立ちすぎると矢印全体の流れが崩れます。そのため、タグのサイズや間隔を調整しながら、曲がる方向が伝わるように見せる必要があります。
行動の変化や、次のステップを表現したいときに使いやすい記号です。
タイポグラフィー風タグクラウド「➦ 曲がる矢印」
➦も曲がる矢印ですが、➥とは少し印象が違います。同じ矢印系の記号でも、曲がり方や線の流れによって、見え方は変わります。➦は、戻る、回り込む、方向を変える、別ルートへ進むような印象を持たせやすい記号です。ブログ記事では、やり方を変える、考え方を切り替える、遠回りして進む、別の道を選ぶといったテーマに合わせやすいです。
タグクラウドとしては、線の流れをどこまで残せるかがポイントです。複雑な形なので、詰め込みすぎるとただのかたまりに見えてしまう場合があります。
少しクセのある矢印として、変化や転換を表現したいときに面白い記号です。
タイポグラフィー風タグクラウド「♨ 温泉」
温泉マークは、今回の6つの中でも特に雰囲気が出やすい記号です。丸い湯だまりのような形と、上に立ちのぼる湯気のような線があるため、見るだけでリラックスした印象があります。雑記ブログ、暮らし、休息、疲れ、癒やし、日常の工夫などの記事と相性がよいです。
タグクラウドとしては、下の丸い部分と上の湯気部分を分けて見せる必要があります。下だけが大きくなりすぎると温泉マークらしさが弱まり、上の湯気が細すぎると形が伝わりにくくなります。そのぶん、うまく表示できるとかなり個性的です。普通の図形では出せない、ゆるさと親しみやすさがあります。
暮らし系や雑記系の記事に合わせるなら、温泉マークはかなり使いやすい記号です。
記号型タグクラウドは雰囲気づくりに向いている
今回使った6つの記号は、それぞれかなり印象が違います。
- ✚ 十字：整理、交差、つながり
- ☾ 月：静けさ、夜、内面、余白
- ☁ 雲：やわらかさ、思考、気分
- ➥ 曲がる矢印：方向転換、次の流れ
- ➦ 曲がる矢印：切り替え、別ルート、回り込み
- ♨ 温泉：休息、暮らし、リラックス
このように、記号にはそれぞれ意味や雰囲気があります。タグクラウドの形を変えるだけで、同じタグでも印象が変わるのが面白いところです。
特に、ブログ記事の内容と記号の意味が合っていると、タグクラウドがただの装飾ではなく、記事全体の雰囲気を補うパーツになります。
導入時に気をつけたこと
今回紹介している記号型タグクラウドは、SWELLの標準機能ではありません。
PHP、CSS、JavaScriptを使った自作カスタマイズです。導入する場合は、子テーマを使い、事前にバックアップを取ったうえで試す必要があります。
記号の形によっては、タグが入りにくい部分があります。特に、月や矢印、温泉マークの湯気部分のような細い形は、タグサイズや余白の調整が必要です。
表示速度を考える場合は、ファーストビューに置くよりも、記事下、サイドバー中段、フッター付近などに設置した方が扱いやすいです。
今回は表示例の紹介を目的としているため、コードの公開は控えます。
まとめ
今回は、WordPressテーマ「SWELL」で使える自作カスタマイズとして、記号の形にタグを配置するタイポグラフィー風タグクラウドを紹介しました。
使用した記号は、次の6つです。
- ✚ ：十字
- ☾ ：月
- ☁ ：雲
- ➥ ：曲がる矢印
- ➦ ：曲がる矢印
- ♨ ：温泉
タグクラウドは、通常であればタグを一覧で見せるためのものです。しかし、配置する形を変えれば、ブログの雰囲気を作るデザイン要素としても活用できます。
十字なら整理された印象、月なら静かな印象、雲ならやわらかい印象、矢印なら動きのある印象、温泉マークならリラックスした印象になります。
タグクラウドを単なる一覧で終わらせず、記事やサイトの雰囲気に合わせて見せたい場合、記号型のタイポグラフィー風タグクラウドは面白いカスタマイズです。
コメント