ワードプレス(WordPress)のブログサイトに表示するカテゴリーやタグのデザインをカスタマイズできるプラグイン Cool Tag Cloud を解説します。
- Cool Tag Cloudの使い方と詳細な設定方法がわかります
Cool Tag Cloudで実現できること
Cool Tag Cloudプラグインを入れるとブログサイトに表示するカテゴリーやタグのデザインを自分好みにカスタマイズすることができます。
ウィジェットからカテゴリーやタグを挿入するときはデザインのカスタマイズできる幅が少ないのですが、当プラグインを導入することで細かい設定を変更することが可能になります。
Cool Tag Cloudのインストール方法
Cool Tag CloudプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Cool Tag Cloud”と入力すると下に検索結果が表示されます
- ”Cool Tag Cloud”の「今すぐインストール」ボタンをクリックします
“Cool Tag Cloud”のインストール完了画面↑Cool Tag Cloudのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Cool Tag Cloud”を有効化すると表示される画面これでCool Tag Cloudのインストールと有効化は完了です。
Cool Tag Cloudの設定と使い方
Cool Tag Cloudの設定画面はウィジェットを追加するときに初めて表示されます。
先ずはダッシュボード(管理画面)のウィジェットを開きます。
ウィジェット画面- タグまたはカテゴリーを挿入する部位を選択して開きます
- 「ブロックを追加」ボタンを押して「すべて表示」を押します
- Cool Tag Cloudをクリックします
次項のCool Tag Cloudの設定で好みのデザインにカスタマイズします。
Cool Tag Cloudの設定
Cool Tag Cloudの設定画面 1/2| 設定項目名 | 意味 |
|---|---|
| Title(タイトル) | タイトルを指定 |
| Font family(フォントファミリー) | 文字の種類を指定。初期設定はArial, Helvetica, Sans-serif |
| Font weight(フォントの太さ) | 文字サイズを指定。初期設定は普通 |
| Smallest font size(最小フォントサイズ) | 文字の最小サイズを指定。初期設定は10px |
| Largest font size(最大フォントサイズ) | 文字の最大サイズを指定。初期設定は10px |
| Image style(画像スタイル) | ボタンの色を指定。初期設定はオレンジ |
| Image align(画像の整列) | ボタンの配置を指定。初期設定は左 |
| Animation on hover(ホバー時のアニメーション) | ボタンにマウスカーソルを載せた時に動きを付けるか否か。初期設定はNo |
| Text transform(テキスト変換) | 先頭の文字サイズを変更するか否か。初期設定はNone |
| Maximum tags (0 for no limit)(最大タグ（制限なしの場合は0）) | ボタンの最大数。初期設定は20 |
| Order tags by(タグの順序) | ボタンの並び順を指定。初期設定は名前順 |
| Tag order direction(タグの注文方向) | ボタンの並び順。初期設定は昇順 |
| Taxonomy(分類法) | 表示項目を指定。初期設定はタグ |
Cool Tag Cloudの設定画面 2/2| 設定項目名 | 意味 |
|---|---|
| Nofollow for tag links(タグリンクのフォロー) | nofollow属性を付けるか否か。初期設定はNo |
| Show post counts(投稿数を表示する) | 記事数を表示するか否か。初期設定はNo |
| On single post display(シングルポストディスプレイ) | カテゴリ毎のボタンを指定。初期設定はAll tags |
| Include(含む) | 特定ページに表示する場合に入力 |
| Exclude(除外) | 特定ページで非表示にする場合は指定 |
| Child of | タグ/カテゴリのIDを指定 |
| Max Height(最大高) | ボタンの高さを指定 |
| Button Show More(ボタン) | 幅が広すぎるボタンでも表示するか否か。初期設定はShow More |
| Button Show Less(ボタン表示) | 幅が広すぎるボタンを非表示するか否か。初期設定はShow Less |
| Link to tag archive(タグアーカイブへ) | ボタンにリンクを付けるか否か。初期設定はYES |
おすすめの設定箇所は次の2つです。
- Title：初期設定はTagsになっているのでTaxonomyに合わせて指定しますTaxonomy
- image style：ボタンは好みの色に変更しましょう
以上でCool Tag Cloudの使い方と設定は完了です。
表示を確認
ブログサイトの画面でCool Tag Cloudで表示されたタグやカテゴリーを確認します。
Cool Tag Cloudの初期設定で表示したカテゴリー↑Cool Tag Cloudの初期設定で表示させたカテゴリーです。
まとめ
Cool Tag Cloudを導入すると自分好みにタグやカテゴリー表示をカスタマイズすることができるのでオシャレに視認性良く表示させることができます。
本来であればCSSを設定しないと実現しないデザインの変更をプラグインを入れることで実現可能な点がメリットになります。
利用しているテーマのカテゴリーやタグの一覧のデザインが気に入らない場合は積極的に利用すれば良いでしょう。
いっぽうデザインに不満が無い場合は不要なプラグインになります。
