サイドバーにきれいにタグを表示する方法(simplicity2)

ワードプレス(wordpress)でブログを運営していて思うのが、タグを適切に表示させて閲覧されるかたの利便性を向上させたい、というものです。その方法を簡単にまとめているサイトがあまりありませんでしたので、その方法をまとめました。ここでは、タグを表示させる方法も含めて紹介します。また、SEOの対策も示しています。


完成系の復習

まずは、私がどのようなことを目指しているのかを簡単に示します。

タグを美しく表示(パソコン)

写真1. パソコン画面での表示

パソコン画面で弊ブログを表示させた場合、サイドバー(弊ブログではメイン画面の右側)にタグ一覧が表示され(写真1)、そのタグをクリックすると、関係あるページ一覧が表示されるシステムです。

タグを美しく表示(モバイル)

写真2. モバイル画面での表示

モバイルでも基本的には同じですが、ページ下にこのようなタグが表示されても見ない人が多いでしょうから、常にページ下にメニューバーが表示されており、その右をクリックするとこのようなサイドバーが表示されるようになっています(写真2)。

※常にメニューバーを表示させるようにする方法はグローバルナビゲーションを常に表示する方法【simplicity2】で紹介しています。

このように設定する方法をまとめましょう、というのが本記事の主眼です。

今回の方法のまとめ

先に方法のまとめを簡単に示します。これだけでは意味がわからなければ、下の項目をお読みください。詳しく記しています。

1) タグをある程度整理する:100種類は論外、私は39種類まで整理しました。
2) ウィジェットの追加でタグクラウドを追加する
3) 2) を美しく表示するために、CSSファイルとテーマファイルのそれぞれ末尾にコードを追加する

復習.タグとカテゴリーの意味

さて、もう1度「タグ」と「カテゴリー」の意味を復習しましょう。これについては、多くの議論があると思いますが、私は以下のように考えています。

カテゴリ:一連の記事について分類されたもの、親子の分類も可能
タグ:特定のキーワードをまとめたもの

例えば、私は旅行記はシリーズものと考え、カテゴリ分けをしています。また、旅行も複数回実施していますので、その中に複数の旅行があります。例えば、「旅行記」という大分類に対して「18年GW中欧鉄道旅行記」というものです。このようにカテゴリーを分類しています。

また、私の記事では地下鉄を扱ったものが多くあります。混雑調査や旅行記、そしてダイヤ解析などです。地下鉄全体に興味ある人は、わざわざ別のカテゴリーに移動せずに地下鉄関連の記事を集めたいことでしょう。このような人のために、別の分類が必要です。この分類として「タグ」があります。

乱暴な言葉でまとめると、カテゴリーは主流となる分類、タグは横のつながりを持たせるための分類ということができます。弊ブログではカテゴリを常に表示できるような仕組みは整っています。今度はタグを常に表示させる仕組みを作ろうというものです。

実際にタグを表示させるようにする

準備:タグを整理する

私はこれまでタグを好き放題つけてきました。その種類は100を超えることでしょう。これでは、1タグ1記事でタグを付ける意味はありません(1つのタグで2つ以上の記事が該当しないと、読者さまには親切ではないでしょう)。そこで、私はタグを整理しました。以下の要領です(鉄道に興味ない人はわからないかもしれません…)。

常磐線、東海道線、山手線など→JR東日本(路線ごとではなく鉄道会社ごとにまとめました)
ダイヤ改正、ダイヤ解析→ダイヤ(似た言葉のタグについてはまとめました)

このようにタグを整理した結果、タグは39種類まで集約できました。それでも、ポーランドや相鉄などほとんど記事のないタグがあることは確かです…。また、タグはカテゴリとは異なるワードだけを選出しています。ただし、アクセスの多い「混雑調査」については、あえてそのタグをつけています。

タグをメニューに表示させる方法

このような下ごしらえを終えたら、タグをメニューに表示させます。私はsimplicity2というテーマを導入していますが、他のテーマでも大きな差はないことでしょう。以下に詳細な手順を示します。

外観→ウィジェット

写真3. 外観→ウィジェットを選択

wordpressの管理画面にアクセスし、そこの外観を選択し、右側に表示されるウィジェットをクリックします。

すると、利用できるウィジェットが一覧として表示されていますので、タグクラウドを選択し、追加をクリックします。追加をクリックした後に、どの領域に追加させるかの画面がありますので、そこをいじります。

サイドバーウィジェットの設定画面

写真4. ウィジェットの設定画面

ウィジェットの設定画面では大して設定する内容はありません(写真4)。内容はないよーということです。ここで、ポイントは以下の3つです。

・タイトル:どのようなタイトルにするかという設定です。弊ブログでは主に鉄道会社ごとの分類としていますので、「鉄道会社などの分類です!」という設定にしました。一般的には、「キーワード別の分類」などの文言で良いです。

・分類:私は文句なしに「タグ」としました。カテゴリー別の分類は別の設定で実施していますので、今回はやる必要はありません。

・サイドバーウィジェット:一番上のサイドバーウィジェットを選択しました。この右側に数字が書いていますが、これはサイドバーの上から何番目に表示させるか、というものです。私は上のほうに表示させたかったので、3としました。

これでサイドバーにタグの一覧は表示されますが、多くの記事があるタグと少しの記事しかないタグでは文字サイズが異なり、あまり美しくありませんでした。ただし、このような見た目を無視しても良いと割り切れば、ここで終了です。

パソコンでの見た目を改善する

次に、コードソースをいじることで、フォントサイズを統一します。

スタイルシートCSSを編集することで対応可能です。CSSとは「デザインをこのようにしましょう」というおまじないを命令するための文です(と私は理解しています)。

CSSを呼び出す画面

写真5. CSSを呼び出す画面

CSSをいじるためのソースコードを呼び出します。具体的には、wordpressの管理画面から外観→テーマの編集を選択します。simplicity2の場合は、テーマの編集をクリックするとそのままCSSの編集画面にアクセスできます。

CSSファイル:タグクラウドの編集

写真6. CSSファイルを上書き内容

上記の内容をCSSファイルに上書きします。コピペしたい人のために文字列も示します。

  1. /*タグクラウドのデザイン*/
  2. .tagcloud a {
  3. font-size: 15px !important;
  4. line-height: 1;
  5. text-decoration: none;
  6. transition: 0.8s ;
  7. }
  8. .tagcloud a:hover {
  9. background: #dcdddd;
  10. color: #fbfaf5;
  11. }
  12. /*
  13. これでカスタマイズ終了*/

これでパソコンで表示を確認すると、ばっちりです。でも…。

モバイルの表示も反映させる

上機嫌になった私は「モバイルも美しい表示になっているだろう」と期待してモバイルも同様に表示を確認しました。すると、全く反映されていませんでした。諸先輩方の記述を流し読みすると、別のファイルもいじらないといけないようです。その方法も示します。

タグクラウドのカスタマイズ:テーマのための関数

写真7. テーマのための関数をいじる

さきほどいじったファイルのすぐ下に「テーマのための関数」という項目があります(右側をたどってみましょう)。ここをクリックして、おまじないを追加します(写真7)。このおまじないではフォントサイズの最大値と最小値を同じにしているので、美しい表示が実現できます。

  1. //タグクラウドのカスタマイズ
  2. function tag_cloud_customize($args) {
  3.  $myargs = array(
  4.  ‘smallest’ => 14, //最小フォントサイズ
  5.  ‘largest’ => 14, //最大フォントサイズ
  6.  ‘unit’ => ‘px’, //フォントサイズ単位
  7.  );
  8.  $args = wp_parse_args($args, $myargs);
  9.  return $args;
  10. }
  11. add_filter(‘widget_tag_cloud_args’, ‘tag_cloud_customize’);

このように設定を変更することで、弊ブログは少しだけ読者に優しいブログになりました(よね?)。

コラム.タグとSEO
ここまでタグをサイドバーに表示させて、特定のタグをつけた記事一覧を素早く検索する方法を紹介しました。では、タグをつけることで、SEO(検索エンジンに好まれる技術)的にはどうなのでしょうか。

この答えは、「タグをつけすぎると良くない」「タグ一覧ページが多いとブログの価値が下がる」というもののようです。(正しい答えはすぐには明らかになりませんし、サイトごとで異なるでしょう)

タグをつけすぎると良くない

1つの記事でタグを多く付けると良くないとされています。そのため、弊ブログでは、原則として3つまでとしています。ただし、タグは読者さまが弊ブログの記事を探しやすくするためのものですから、読者さまが探しやすくすることを最優先事項としています。

このこともあり、当初100以上あったタグを集約するなどしてを39までに減少させています。今後旅行先が増えればタグは増えるでしょうが、それでも45以内にはしたいと考えています。

タグ一覧ページが多いとブログの価値を下げる

これは「重複コンテンツ」問題です。同じような内容が複数ページにまたがっていると、「このブログは内容が無いようだ」と検索エンジンに判断されてしまい、検索順位が落ちてしまいます。

タグ一覧ページ(例えば、「小田急」というタグが入っている一覧ページ)が検索エンジンにインプットされるから問題なのです。逆にいうと、このページが検索エンジンにインプットされなければ良いわけです。そのため、弊ブログでは、タグをno index(=検索エンジンに認識させない)とすることでこの問題を回避しています。具体的には、All in One SEO Pack プラグイン設定の一般設定で、タグをno indexにするをクリックします。

3) タグとSEOのまとめ

一時期はタグを多く入れるとSEOに有利とされたようですが、現在はそのようなことはありません。現在は「読者さまが他の記事を探しやすい」ようになっていることが重要です。そのため、私は読者さまが探しやすいようにタグを整理、きちんと表示させれば問題ないと認識しています。テクニカル的な対策として、タグをno indexとすることにしています。



シェアする

  • このエントリーをはてなブックマークに追加

フォローする