WordPress タグクラウド

デザイン五輪書

WordPressのタグクラウドに、3Dタグクラウドを設置する方法

読了までの目安時間:約 21分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

WordPressのタグクラウドに、3Dタグクラウドを設置する方法

タグクラウドは名脇役!?

タグクラウドとは?

WordPressにはタグと言う機能が携わっています。
これは何かと言うと、いわゆる、まとめページみたいなものを生成する為のものです。
例えば、「Photoshop」と言うタグがあった場合、当サイトの記事の中でPhotoshopについて記述されている記事が、Photoshopと言うタグのページにまとめて一覧表示されます。

このタグは、タグクラウドと言うウィジェットの中にまとめて表示されるような仕組みになっています。
タグクラウドとは、サイト内で使用されているタグが一覧表示されているもので、通常、よく使用されるタグは文字が大きく表示されるような仕掛けが施されています。
一見すると文字の羅列のようにも見えますが、不規則に大小の文字が配置される為、タグの雲のようにも見えなくはない・・・と言ったら、少し無理がありますか・・・。

タグクラウド

▲もくじへ戻る

タグクラウドの役割

タグは、まとめページや、ちょっとしたサイトマップのような機能を果たします。
ですので、タグクラウドをサイドバーに設置する事で、訪問者のサイト内巡回を促すのは勿論の事、クローラー(検索ロボット)のサイト内巡回を促す役割も持っています。

また、タグはデフォルトでGoogleの検索エンジンにインデックスされる設定になっています。
例えば、「Photoshop」と言うタグが設定されていた場合、Googleでの「Photoshop」と言う検索に自分のサイトが対応するようになります。
通常、タグにはビッグキーワードを設定する事が多いですが、サイトを育てる事で、将来的にビッグキーワードでの訪問者を獲得する事もできるようになるかもしれません。

▲もくじへ戻る

タグクラウドを3Dタグクラウドに!

とは言うものの、デフォルトのタグクラウドは、ちょっとごちゃごちゃした印象を受けます。
人は文字を固まりで認識するので、これだけごちゃごちゃしていると、普通にスルーされてしまうかもしれません。
そこで、デフォルトのタグクラウドを、デザインを凝らしたタグクラウドに変化させるプラグインが出回っています。

当サイトも、タグクラウドのプラグインを使用して、デザインを凝らしたものに変化させています。
ちょっと、当サイトのタグクラウドを見てみますか。
左サイドバーに文字の固まりがあると思います。

3Dタグクラウド

マウスを当てて頂くとちょっと驚くかもしれませんが、このタグクラウド、回転する3Dタグクラウドになっています。

私自身は特に難しいプログラミング言語を使っている訳ではありません。
単に、WP-Cumulus」プラグインをWordPress内にインストールし、あれこれと設定をしただけです。
多少ややこしい作業はありますが、このページ通りに作業を行えば良いだけですので、あなたもチャレンジしてみませんか?

▲もくじへ戻る

WP-Cumulusプラグインで3Dタグクラウドを設置

WP-Cumulusプラグインの設置方法

まず、全体的な作業手順を確認しましょう。
これを把握しておけば、自分が現在何の作業を行っているのかを理解できると思います。

最初に行うのが、WP-Cumulusプラグインのインストールと有効化です。

WP-Cumulusプラグインを有効化したら、WP-Cumulusプラグインの設定画面から、各種設定を行います。
設定画面は英語ですので、このページを参考にして下さい。

次に、WP-Cumulusプラグインを日本語タグ対応にします。
WP-Cumulusプラグイン自体は海外のプラグインですので、初期状態ですと、日本語タグが非表示になってしまいます。
WP-Cumulusプラグインを日本語タグ対応に書き換えたプログラムがネット上に公開されていますので、外部サイトからプログラムをダウンロードして来ます。

ダウンロードして来たプログラムは、FTPソフトでサーバーにアップロードします。
FTPソフトとしては、FFFTPDreamweaverが有名ですが、当サイトではコーディング支援機能もあるDreamweaverを推奨しています。

最後に、WP-Cumulusプラグインのプログラムに組み込まれているFlash Playerへのリンクに「rel="nofollow"」を書き加え、自分のサイトの評価を渡さないように設定し直します。
Flash Playerは信頼性のあるサイトですので、まさか、スパムリンクのペナルティを受ける事はないとは思いますが、自分が本当に評価を送りたいサイトがあった場合に、評価がFlash Playerと分散してしまいます。
ですので、リンクパワーもれ対策をしておきましょう。

これが一通りの作業の流れです。
作業が進む毎に難易度が上がって行きますが、しっかりと最後まで付いて来て下さい。
それでは、頑張って作業を行いましょう!

▲もくじへ戻る

WP-Cumulusプラグインをインストールする

では、早速、WP-CumulusプラグインをWordPressにインストールしましょう。
「サイドバー」の「プラグイン」の中にある「新規追加」をクリックします。

プラグインの新規追加

「プラグインのインストール」ページが表示されます。
検索窓に「WP-Cumulus」と入力し、「プラグインの検索」をクリックして下さい。

プラグインの検索

検索結果に「WP-Cumulus」と表示されていますので、その下にある「いますぐインストール」のリンクをクリックします。

いますぐインストール

「本当にこのプラグインをインストールしてもいいですか?」と言うダイアログが表示されます。
「OK」をクリックして下さい。

WP-Cumulusプラグインのインストールが完了しましたら、「プラグインを有効化」をクリックして下さい。

プラグインを有効化

これで、WP-Cumulusプラグインが有効化されました。

プラグインを有効化しました。

▲もくじへ戻る

WP-Cumulusプラグインの詳細設定

WP-Cumulusプラグインの設定方法が2通りある理由

続いて、WP-Cumulusプラグインの詳細設定を行いましょう。
WP-Cumulusプラグインの設定は、二ヶ所から行う事ができます。
それは、WordPressの「サイドバー」の「設定」の中に表示されている「WP Cumulus」と言うメニューから行う方法と、「ウィジェット」から行う方法です。

WP Cumulus

基本的には、WP-Cumulusプラグインの詳細設定は「ウィジェット」から行えば良いです。
当サイトも、ウィジェットから設定を行う方法で解説をしたいと思います。

余談ですが、サイドバーからも設定が行える仕組みになっているのにはきちんとした理由があります。
実は、WP-Cumulusプラグインは投稿ページや固定ページの記事内にWP-Cumulusプラグインのショートコード[wp-cumulus]を記述する事で、WP-Cumulusプラグインのタグクラウドを呼び出す事ができるのです。

ですが、ウィジェットを使ってタグクラウドを呼び出した場合と違い、ショートコードを使う方法ではタグクラウドの詳細設定を行う事ができません。
そこで、ショートコードで呼び出すタグクラウド用として、サイドバーに「WP Cumulus」と言うメニューが設置されているのです。

ちなみに、記事内にタグクラウドを呼び出すと言う機会は、ハッキリ言ってありません。
ですので、基本的に、このショートコードの方法を覚える必要はありません。

・・・ただ、ウィジェットの中にテキストウィジェットを挿入し、その中にショートコードを記述してWP-Cumulusプラグインのタグクラウドを呼び出すと言うテクニックもありますので、応用として覚えておきたい方は、覚えておくのも悪くはないでしょう。

WP-Cumulus応用

ショートコードを<div>タグでくくる事で、WP-Cumulusプラグインのタグクラウドの位置をCSSで動かす事が可能になります。

▲もくじへ戻る

WP-Cumulusウィジェットの設置方法

横道に反れてしまいましたが、早速、ウィジェットにWP-Cumulusプラグインのタグクラウドを設置してみたいと思います。

「サイドバー」の「外観」の中にある「ウィジェット」をクリックして下さい。

ウィジェット

「ウィジェット」のページが表示されました。
この中に、「WP-Cumulus」と書かれてあるウィジェットがあると思います。
これを、設置したい部分にドラッグ&ドロップします。

WP-Cumulusをドラッグ&ドロップ

ちなみに、WP-Cumulusウィジェットは1サイトに1回しか使用できない仕様になっているようで、WP-Cumulusウィジェットをドラッグ&ドロップすると、ウィジェット一覧の中から、WP-Cumulusウィジェットが消えてしまいます。

WP-Cumulusウィジェットは1回きり

当サイトで使用しているWordPressのテーマ「THE WORLD」の場合はそれでも構いませんが、使用しているテーマによっては、数ヶ所にWP-Cumulusウィジェットを設置する必要があるものもあるでしょう。
その場合は、前述したように、テキストウィジェットを設置し、その中にWP-Cumulusプラグインのタグクラウドを呼び出すショートコードを記述すれば良いです。

WP-Cumulus応用

▲もくじへ戻る

WP-Cumulusウィジェットの設定方法

WP-Cumulusウィジェットを設置場所にドラッグ&ドロップすると、中身が展開され、詳細設定を行う事ができるようになります。

WP-Cumulusウィジェットの詳細設定

設定項目について、上から解説して行こうと思います。

まず、「タイトル:」の部分はタグクラウドの見出し部分になります。
空欄でも構いませんし、「タグクラウド」と記述するのも良いでしょう。

「Width:」の部分はタグクラウドの「横幅」を表しています。
設置場所の横幅よりも大きくならないようにしましょう。
サイドバーにWP-Cumulusウィジェットを設置する場合を例に挙げると、WP-Cumulusウィジェットの横幅がサイドバーの横幅を超えると、記事本文にまでタグクラウドがはみ出してしまいます。
ちなみに、数字の単位はpx(ピクセル)で、単位は省略して記述します。

「Height:」の部分はタグクラウドの「縦幅」を表しています。
ウィジェットには表記されていませんが、サイドバーのWP-Cumulusプラグインの詳細設定画面では、縦幅は横幅の3/4サイズが理想的だと表記されています。
表示される文字は横書きですので、タグクラウドを少し潰した形にした方がバランスが取れると言う事でしょうか。

「Tag color:」の部分では、タグクラウドの文字色を設定します。
タグクラウドに表示される文字の中でも、使用頻度の高いタグ(大きい文字)の色をここに指定します。

使用頻度が高い文字

文字色は6桁の16進数で指定し、「#」は省略します。
文字が手前に来ると、ここで設定した文字色になりますが、文字が奥に引っ込むと、徐々に色が半透明になります。

「Optional second color for gradient:」の部分では、使用頻度の低いタグ(小さい文字)の色を指定します。

使用頻度が低い文字

使用頻度が中間のものは、先ほど設定した文字色と今回設定した文字色の中間色になります。

「Tag color:」と「Optional second color for gradient:」の文字色を変えると、タグクラウドが色鮮やかになります。
その結果、タグクラウドが目立ち過ぎますし、色が散らかってしまいます。
ですので、特に意図するものがないのでしたら、「Tag color:」と「Optional second color for gradient:」の文字色は統一しましょう。

「Optional heighlight color:」は、タグにマウスオーバーした際のタグに表示される枠線と文字色を設定します。

heighlight color

「Background color:」は、タグクラウドの背景色を設定します。
ちなみに、「Background transparency」にチェックが入っていると、背景色は透明になります。

「Speed:」は、タグクラウドが回転するスピードを設定できます。
数字が高いと早く、少ないと遅くなります。

「Distribute evenly on sphere」にチェックを入れると、各タグが均等なスペースを保って配置されるようになります。

その下のラジオボタンでは、タグクラウドに表示する文字の設定を行う事ができます。

タグクラウドに表示する文字設定

「Tags」はタグのみを表示、「Categories」はカテゴリーのみを表示、「Both」はタグとカテゴリー、両方を表示するように設定する事ができます。

「wp_tag_cloud parameters:」では、パラメーター値を利用して、タグクラウドをより細かく設定する事ができます。
例えば、タグクラウドの表示文字数や、文字サイズなどなど・・・。
パラメーター値の設定方法に関しては、「サイドバー」の「設定」の中にある「WP Cumulus」の設定画面の方に、説明が書かれてあるページヘのリンクが貼っています。

WP Cumulus

ページの中間辺りにある「Advanced options」の「wp_tag_cloud parameters」欄にリンクがあります。

パラメーターの設定

英語のサイトですが、興味のある方はアクセスしてみるのも良いかもしれません。

Parameters

これで、WP-Cumulusウィジェットの設定は完了です。

ちなみに、「サイドバー」の「設定」の中にある「WP Cumulus」では、更に2項目の設定があります。

WP-Cumulusの残りの設定

上の方が「互換モードの使用設定」で、下の方が「HTMLタグクラグドの表示設定」です。
HTMLタグクラグドとは、通常のタグクラウドの事です。
Flash Player9よりも古いバージョンのFlash Playerを使っていたり、Flash Playerが有効化されていなかったりする事が原因でFlash Playerが正常に動いていない場合に、代わりに通常のタグクラウドを表示するのかどうかを設定します。
この二ヶ所はデフォルトの設定のままで構いませんので、特に気にする必要はありません。

▲もくじへ戻る

WP-Cumulusプラグインを日本語対応にする

必要なファイルをダウンロードする

前述しましたが、初期状態のWP-Cumulusプラグインは、日本語タグに対応していません。
ですので、WP-Cumulusプラグインのタグクラウドでは日本語タグが非表示状態になってしまいます。

そこで、WP-Cumulusプラグインを日本語対応に改造し、なおかつ、全体の容量を軽くしたもの公開しているサイトがありますので、そこのファイルを利用させてもらいましょう。

そのサイトのページ下部にあるZIPのアイコンをクリックする事で、ファイルをダウンロードする事ができます。

ZIPファイル

▲もくじへ戻る

FTPソフトを使ってファイルを上書きする

ダウンロードしたZIPファイルは、そのままWordPressのプラグインページからアップロードする事も可能ですが、今回は、日本語タグに対応する為の部分のファイルのみを取り出し、WordPress内にある該当ファイルを上書きすると言う方法を行いたいと思います。
必要なファイルは「tagcloud.swf」と言うファイル一つだけですので、ダウンロードしたZIPファイルは解凍してしまいましょう。

必要なファイル

そして、FTPソフトを使って「tagcloud.swf」と言うファイルをサーバー上にアップロードして下さい。

ファイルのアップロード

ファイルのアップロード先は、「wordpress>wp-content>plugins>wp-cumulus」の中です。

ファイルのアップロード先

これで、WP-Cumulusプラグインが日本語タグに対応するようになりました。

▲もくじへ戻る

Flash Playerへのリンクをnofollowに

修正箇所の探し方

残る作業は、Flash Playerへのリンクを、評価を渡さないように設定し直すだけです。

「サイドバー」の「プラグイン」の中にある「インストール済みプラグイン」をクリックします。

インストール済みプラグイン

「プラグイン」ページの中にある「WP-Cumulus」下部の「編集」をクリックします。

WP-Cumulusの編集

WP-Cumulusプラグインを構成するPHPファイルが表示されます。

キーボードの「Ctrl」と「F」を同時入力します。
すると、ブラウザに検索窓が表示されるようになります。
その検索窓の中に、「<a」と入力をします。

ブラウザ内検索

キーボードの「Enter」を入力すると、WP-Cumulusプラグインを構成するPHPファイルの中のリンクタグが強調表示されるようになります。
この中から、「rel="nofollow"」が記述されていないリンクを探し出せば良いです。

▲もくじへ戻る

該当するリンクにnofollowを記述する

「rel="nofollow"」が記述されていないリンクを見付けたら、該当するリンクに「rel="nofollow"」を記述しましょう。

<a href="リンク先のURL" rel="nofollow">アンカーテキスト</a>

ちなみに、これに該当するのが2番目と4番目のリンクです。
5番目のリンクにも「rel="nofollow"」は記述されていませんが、これはダッシュボードにログイン後の編集画面内のリンクですので、あまり気にする必要はありません。

パラメーターの設定

それでも、一応気になると言う方は、念の為に「rel="nofollow"」を記述しておいても問題はありません。

これで、Flash Playerのサイトへ評価を渡す設定が修正されました。

注意点ですが、WP-Cumulusプラグインの更新があった場合、日本語化と「rel="nofollow"」の設定は再び行う必要があります。
ですので、作業手順は覚えておいて下さい。

▲もくじへ戻る

まとめ

作業は大変ですが・・・

今回は、WordPressのタグクラウドに、3Dタグクラウドを設置する方法をご紹介しました。
少し説明が長かったので、作業は大変だったかもしれませんが、いかがでしたでしょうか?

作業は大変ですが、3Dタグクラウドは見た目が迫力ありますので、訪問者へのアピールは強いと思います。
マウスカーソルを合わせると動きますから、ついつい、マウスを当てたくなりますしね。

是非とも今回の記事を活かして、あなたのサイト運営に役立てて下さい。
応援しています。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :         

ホームページ作成 WordPress   コメント:0

この記事に関連する記事一覧

TOPへ戻る