WordPressテーマ「SWELL」でブログを運営していると、タグクラウドをもう少し見た目よく表示したいと思うことがあります。通常のタグクラウドは、タグ名が横並びで表示されるシンプルなものです。もちろん、それだけでも十分使いやすいです。
しかし、サイトの雰囲気や記事のテーマによっては、タグを単純に並べるだけではなく、もう少しデザイン性を持たせたい場合もあります。
そこで今回は、SWELLで使える自作カスタマイズとして、指定した文字の形にタグを配置する「文字型タグクラウド」を作成しました。
本記事では、タグクラウドで文字をどのように表現できるのかを紹介します。タグがタイポグラフィー風に表示されるので、通常のタグクラウドとは違った見た目を楽しめます。
文字の形にタグを配置するタグクラウド
通常のタグクラウドは、タグ名が一覧のように並ぶシンプルな表示です。しかし、サイトの雰囲気や記事内容によっては、もう少し視覚的に見せたい場合もあります。そこで今回は、タグを単純に並べるのではなく、指定した文字の形に沿って配置する「文字型タグクラウド」を作成しました。
たとえば、「や」「り」「た」「い」「こ」「と」など、ショートコードで指定した文字の形をもとに、その中へタグを配置できます。横表示だけでなく、縦表示にも対応しています。小さいタグだけ横表示にする設定もできるため、タグ一つ一つの読みやすさも調整できます。
タグ同士の左右間隔、上下間隔、タグ内の字間、分離した文字パーツ同士の間隔も指定できるようにしました。そのため、「こ」のように上の点と下の本体が分かれている文字でも、タグがくっつきすぎないように調整できます。
文字型タグクラウドは、SWELLの標準機能ではありません。PHP・CSS・JavaScriptを使った自作カスタマイズです。使用する場合は、子テーマなどを使い、事前にバックアップを取ったうえで試す方法が安全です。
表示速度を考える場合は、ファーストビューではなく、記事下、サイドバー中段、フッター付近などに設置すると扱いやすくなります。
今回は表示例の紹介を目的としているため、コードの公開は控えます。
文字によって向き不向きがある
文字型タグクラウドは、どんな文字でも同じようにきれいに表示できるわけではありません。向いているのは、形がはっきりしている文字です。
次のような文字は比較的使いやすいです。
「中、山、人、大、小、心、口、日、田」
一方で、画数が多すぎる漢字や、線が細かく入り組んだ文字は、タグが入りにくくなります。ひらがなは曲線が多いため、文字によっては調整が必要です。
「う」や「こ」のようにパーツが分かれている文字は、分離部分の間隔を調整すると見やすくなります。今回の自作カスタマイズでは、「component_gap」を使って上下の間隔を調整できるようにしています。
さまざまな文字で試してみる
今回は実験的な表示例として、6つの文字を使ってタイポグラフィー風のタグクラウドを作成しました。使用した文字は、「や」「り」「た」「い」「こ」「と」です。
実際のタグクラウドとして表示しているのは「や」のみで、ほかの文字は表示例として画像で掲載します。
だいたい「や」に見えます。
タイポグラフィー風タグクラウド「や」
タイポグラフィー風タグクラウド「や」
タイポグラフィー風タグクラウド「り」
タイポグラフィー風タグクラウド「た」
タイポグラフィー風タグクラウド「い」
タイポグラフィー風タグクラウド「こ」
※ここに「こ」の画像を掲載
タイポグラフィー風タグクラウド「と」
まとめ
今回は、SWELLで使える自作カスタマイズとして、文字の形にタグを配置する「文字型タグクラウド」を紹介しました。
通常のタグクラウドは、タグを一覧で見せるためのものです。一方、文字型タグクラウドは、タグをサイトのデザイン要素として見せることができます。好きな文字を指定でき、横表示、縦表示、字間、タグ同士の間隔、分離パーツの間隔なども調整できます。
このタグクラウドはSWELLの標準機能ではなく、自作カスタマイズです。使用する場合は、バックアップを取ったうえで、子テーマを使って導入する必要があります。
表示速度を考えるなら、ファーストビューではなく、記事下、サイドバー中段、フッター付近に設置すると扱いやすくなります。
文字型タグクラウドは、通常のタグクラウドとは少し違う、タイポグラフィーのような見せ方ができるカスタマイズです。ブログの雰囲気に合わせて使えば、タグクラウドを単なる一覧ではなく、記事やサイトを彩るデザイン要素として活用できます。
コメント