WordPress（ワードプレス）最強のタグの使い方はアイコン化！ 方法を徹底解説

2018-03-23

2019-11-23

WRITER

上田洋平（y-hey）

　

この記事を書いている人 - WRITER -

上田洋平（y-hey）

日本山岳ガイド協会認定登山ガイド ステージ Ⅱ かながわ山岳ガイド協会所属 日本オートキャンプ協会公認オートキャンプ指導者 写真も撮れる登山ガイドとして 関東、富士山、北アルプス等の山々をガイドしています。 ブログでは登山、アウトドア等の記事の発信を通して 読者の方に”人生を120％楽しんでもらいたい”と考えています。 ２児の父ですが単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロをフルサイズ一眼レフカメラを抱えて登ったり（普段は自称イクメンです）空手もやってた多趣味な男です。 ブログはゆるいペースですが2005年から書き続けています。（当サイトは2015年から） 2017年11月にテレビ出演、2018年5月には10万PV突破、 2022年7月には執筆協力させて頂いた登山ガイド本が発売されました！

詳しいプロフィールはこちら

こんにちは！ブログ歴13年のy-heyです。

WordPress（ワードプレス）ブログで
記事をキッチリ分類し、階層構造を持てる「カテゴリ」に対して、
イマイチ使い方の分かりづらい「タグ」の存在ですが、最強の使い方を発見しました！

その使い方とは、トップページにアイコンを置いて読者の方が目的の記事を探しやすくするという方法です。

（参考までに完成形のイメージとしてトップページを見てみて下さい）

このようにアイコンをトップページにメニューとして設置した所、PVが30％アップしました。

アイコン設置によってメニューが見やすくなり、サイトを回遊して下さるユーザーが増えたためだと思われます。

その方法を今回は徹底解説します。

簡単な流れとしては

1. 各記事に対して複数の「切り口」を考え、一覧にする
2. 「切り口」をタグとして設定し、各記事に追加
3. アイコンを作成
4. ウィジェットとしてビジュアルエディタをトップページへ挿入し、アイコンを各タグ一覧へリンクさせる

となります。

ちなみにタグを設定する前に押さえておきたい、タグとカテゴリーの違いをまずは簡単に解説します。

このように、タグは１記事に複数設定が可能なため、複数の「切り口」を持つことができます。

次の章で「切り口」についての考え方を具体例も交えながら説明します。

手順1. タグの使い方　「切り口」を考える

タグの設定については、各記事の情報の「切り口」が超重要になります。

読者の方はどんな「切り口」で情報を探したいのか？

これを徹底的に考えます。

例えばこのブログ、「登っちゃえば？」は

登山の記事（山に登った時のレポート記事）や、キャンプ系の記事（キャンプ場紹介記事）のが多いです。

そのため、タグの大分類として

１．登山

２．キャンプ

とし、さらにこれらを中分類に当たる切り口で分けました。

１．登山

登山の教科書、、場所で選ぶ、日数で選ぶ、季節で選ぶ、日数で選ぶ、宿泊方法で選ぶ、人数で選ぶ

２．キャンプ

キャンプノウハウ、場所で選ぶ、ロケーションで選ぶ、季節で選ぶ、日数で選ぶ、宿泊方法で選ぶ、人数で選ぶ

さらにこれらを小分類としてタグ名を付けます。

具体的にはエクセルを使って↓の表のようにしました。（スマホで見る時は横向きでご覧ください）

これはタグの設計図とも呼べるべき重要なポイントです。

この「切り口」がしっかりしていないと、読者の方が情報を探すのが大変になります。

ちなみにこのエクセルの表は↓のボタンから無料ダウンロードできます。

手順2. タグを新規追加し、各記事に設定する

ここでは手順１で作成したエクセルシートを元にブログ内のタグを新規追加します。

タグを新規追加

WordPress（ワードプレス）管理画面の「投稿」→「タグ」を選択。

「新規タグを追加」の画面になりますので、「1. タグの使い方「切り口」を考える」の部分で考えた
タグ名とスラッグ（タグ名のURL、半角英数字がベター）を作成していきます。

作成したタグを各記事に設定

タグを作成できたら、各記事にタグを設定していきます。

WordPressの管理画面の「投稿」→「投稿一覧」
から「クイック編集」を選択

すると、タグを入力する枠が出てきますので、この中に先程新規作成したタグ名を入力していきます。

例えば当サイトの愛知県民の森へ２月に登った記事ですと、付けられるタグは

• 東海・関西登山
• 冬登山
• 日帰り登山
• 子連れ登山

となります。

手順3. アイコンを作成する

手順２でタグの設定は完了しましたが、WordPress（ワードプレス）のサイトでは通常、タグはメニューに出てきません。

そこで、トップページにアイコンを設定してあげます。

アイコンを使うのは、写真よりもシンプルなため
読者の方のインプットの負担を減らし、直感的に目的のタグカテゴリを選択しやすくするためです。

アイコンはなんでも良いですが、png, jpg, svg形式で無料ダウンロードできてシンプルな

ICOOON MONOというサイトがオススメです。

他にもサルワカ殿のサイトでオススメなアイコンサイトが紹介されていますので参考にして下さい。

サルワカ

そしてダウンロードしたアイコン画像ファイル（jpg,かpng）をパワーポイントを使って枠や文字を付けて装飾します。

参考までに私が使ったパワーポイントファイルをアップロードしますので、ダウンロードしてアイコン画像や文字を書き換えて使ってみて下さい。

そして、アイコンができたら、アイコンを一つずつスクリーンショットで画像として保存するか、
パワーポイントでグループ化したアイコンを「画像として保存」して保存します。

手順4. ウィジェットとしてビジュアルエディタをトップページへ挿入

ここからブログのトップページの作成をします。

一般的には固定ページを作って、それをトップページにする方法だと思いますが、
このサイトで使っている『Seal～アザラシ～』（シール）ではそんな面倒な作業も不要です。

WordPress（ワードプレス）管理画面の「外観」→「ウィジェット」を選択。

↓のようなウィジェット設定画面になります。

画面を下側までスクロールさせると、↑のウィジェット設定画面の左側にある「利用できるウィジェット」
の項目内に「ビジュアルエディター」があります。

この「ビジュアルエディター」を先程の「トップページ記事一覧上部」の部分にドラッグ＆ドロップします。

ここからは、いつもブログ記事を書くのと同様に文字やアイコン（画像）を並べていきます。

まずは「メディアを追加」を選択

アイコン画像をメディアライブラリにアップロードします。

その後、アイコン画像を選択した状態で、「画像を編集」を選択。

画像を編集する画面になります。

ここでアップロードしたアイコン画像の枠には余白が付いている場合があるのでトリミングで消します。

アイコン画像内でドラッグをすると、↓のようにトリミングする範囲を選択できますので、

枠内だけおさまるように、選択範囲を調整して、左上の「トリミングのアイコン」を選択

すると画像がトリミングできるので、「保存」を選択

その後、画像を編集画面に戻り、画像サイズの横幅を110pxに調節し、（縦幅は自動で調整されます）「縮尺変更」を選択

「画像を保存しました」とメッセージがでるので、右下の「戻る」を選択

画像を選択した状態で、「投稿に挿入」を選択

これでアイコン画像が追加されました。

ただし、この状態ではアイコン画像にはリンクが付いていないので、追加していきます。

画像を選択すると出て来る「編集」を選択

「リンク先の右端の矢印」を選択

「カスタムURL」を選択

アイコン画像にリンクさせたいURLを入力します。

リンクさせるURLを入力したら、「更新」を選択

これを続けて行い、複数のアイコン画像を設置すれば、↓のように完成です！

ちなみに３カラム（３列）にするのも『Seal～アザラシ～』（シール）ならショートコードを入れるだけで一発で行けます。めっちゃ便利！

完成した状態は、ぜひ当ブログのトップページを見てみて下さいね(^o^)

まとめ

今回はWordPress（ワードプレス）ブログで
「タグ」最強の使い方として、トップページにアイコンを置いて読者の方が目的の記事を探しやすくする方法
をお伝えしましたがいかがでしたでしょうか？

この記事を読んであなたのブログライフが豊かになれば幸いです。

最後までお読み頂き本当にありがとうございました。