タグクラウドを3D表示する 3D tag cloud プラグイン(WordPress)

2017年6月14日

WORDPRESS
typographyimages / Pixabay

今日はWordPressの中でもちょっとした事をするプラグインを紹介したいと思います。

もともと私のトップページにあるタグクラウドは下記のようになっていました。

それを3D表示にすると下図のようになります。

これをどうやるのか、手順を説明したいと思います。
まず、WordPressの「ダッシュボード」→「プラグイン」→「新規追加」と移動します。プラグインの追加ページで「キーワード」に「3D tag cloud」と入力し、出てきたプラグインの「今すぐインストール」をクリックします。

インストールが終わったら「有効化」ボタンを押して有効化してください。

次に「ダッシュボード」→「外観」→「ウィジェット」と移動してください。
「3D Tag Cloud」というウィジェットが追加されていますので、サイドバーウィジェットのところにドラッグアンドドロップします。「このウィジェットにはオプションがありません」と書かれていますが、設定は別の場所にあります。

次に「ダッシュボード」→「設定」→「3D Tag Cloud」と移動します。「3D Tag Cloud Options」を設定していきます。

「Widget Title」にタイトルを入力してください。「Number of tags」には3D表示させるタグの数を入力します。あまり多すぎると何が何やらわからなくなるので、私は30個に指定しました。

次に「Color Settings」でバックグラウンドとテキストの色を指定します。バックグラインドの色はStinger8の場合、「ダッシュボード」→「外観」→「カスタマイズ」と移動し、「色」を選択すると「色を選択する」という下図の様な画面になりますので、クリックしてください。


クリックすると下図の様に16進数の数値があるので、これをコピーしておきます。ちなみに、ディフォルトでは「f2f2f2」です。

Color Settingsに戻り、下図の様に記入します。テキストカラーは色見本と配色サイトなどを参考にしてください。

最後にフォント設定をします。「Select the font」のプルダウンメニューで好みのフォントを選んでください。次に「Maximum font size」でタグが最前面に来た時の文字の大きさを、「Minimum font size」で奥に行った時の文字の大きさを指定します。

 

以上で設定が終了しましたので、「Save」をクリックして終了です。

動画にするとこんな感じで、マウスに合わせてクルクル回ります。

 

スポンサーリンク