WPテーマ「STORK」カスタマイズ!サイトマップを美しく表示させる方法

STORK:PS Auto Sitemapでサイトマップを美しく表示させる方法

 

ここあです。

 

あなたのオウンドメディアをWordPressで構築し

Webサイトやブログを公開したら

やはり目指すはサイトの収益化です。

 

オウンドメディアを収益化するには

あなたがまとめた記事やWebページを

できるだけ多くの人に見てもらう必要があります。

 

オウンドメディアを運営し始めたばかりの頃は

コンテンツ数も少なく

 

サイト訪問者にとっても興味のあるコンテンツを探すのに

それほどストレスを感じることはないはずです。

 

しかし、サイト運営が長くなるにつれて…

  • ブログの記事数
  • Webサイトページ

といったコンテンツの数が増えてくると…

 

サイト訪問者であるユーザーが興味のある

コンテンツをわざわざ探さなければならないという

非常にストレスのかかる状態になってしまいます。

 

だからそんな時に、サイト全体の構成を一目で確認できる

サイトマップページがあると…

 

ユーザーは迷うことなく興味のあるコンテンツだけに

アクセスすることができます。

 

つまり、サイトマップページがあると

サイト訪問者のユーザビリティ(利便性)が上がるんですね。

 

ただ、サイトマップページを作ることで

ユーザービリティが上がる一方

 

あなたがコンテンツを公開する度に

サイトマップをイチイチ更新するのは

非常に手間で非効率な作業となってしまいます。

 

そこで今回、あなたにご紹介したいのは…

 

そんな手間のかかる非効率な作業を

あなたの代わりに自動で生成してくれる

PS Auto Sitemapというプラグインです。

 

WordPressにはこのように

後から便利な機能を追加できる

プラグインという拡張機能が備わっています。

 

PS Auto Sitemapを使って

あなたのサイトマップを作成しておけば

ユーザビリティが向上し、アクセス数の増加にも期待できます。

 

なので、WordPressでオウンドメディアを構築し

ある程度、記事数やWEBページが増えてきたら…

  • ユーザビリティ(利便性)を上げるため
  • あなたのコンテンツをたくさん見てもらうため

必ずサイトマップを作成しましょう。

 

わたしもサイトのユーザビリティを上げるために

サイトマップを作成しています^^

わたしのサイトマップ

 

ということで今回は…

サイト訪問者のユーザビリティを上げる便利なプラグイン

PS Auto Sitemapの導入方法について詳しく解説していきます。

 

サイトマップとは?

サイトマップとは?

 

先にサイトマップについて簡単に説明しておきますね。

 

サイトマップには大きく分けて2種類あります。

  1. HTMLサイトマップ
  2. XMLサイトマップ

 

❶HTMLサイトマップ(ユーザー向けのサイトマップ)

HTMLサイトマップは、あなたのサイト訪問者が

サイト上にあるコンテンツを

見つけやすくなるために一覧表示するものです。

 

今回あなたが導入するPS Auto Sitemapは

こちらのHTMLサイトマップに当たります。

 

❷XMLサイトマップ(検索エンジン向けのサイトマップ)

XMLサイトマップは、HTMLサイトマップとは異なり

検索エンジンがあなたのサイト構成を

正しく認識するためのサイトマップとなります。

 

こちらも自動でXMLサイトマップを生成してくれる

Google XML Sitemapsという代表的なプラグインがありますので

Google XML Sitemapsもぜひ導入してくださいね。

 

PS Auto Sitemapの導入メリット

PS Auto Sitemapの導入メリット

 

PS Auto Sitemapの導入メリットは…

以下の2つです。

 

  1. ユーザビリティが上がる
  2. サイトマップを自動生成してくれる

 

❶ユーザビリティが上がる

以下のような…

  • 記事数が多いサイト
  • カテゴリーが煩雑なサイト

などは、ユーザーがお目当ての記事を見つけにくく

ユーザーの離脱率が高くなってしまいます。

 

しかし、PS Auto Sitemapを導入することで

サイト内の記事が一覧表示でき、過去記事も含め

サイト訪問者がお目当ての記事を見つけやすくなるため

 

  • サイト訪問者の離脱率が低下する
  • サイト内の回遊率が上がる

といったSEO効果にも期待できます。

 

❷サイトマップを自動で生成してくれる

PS Auto Sitemapは新着記事など

サイト内の記事を一覧表示してくれるサイトマップページで

自動的にサイトマップを生成してくれます。

 

あなたが手動でサイトマップを更新する手間もなく

サイトの更新に合わせ随時サイトマップも更新されるので

わざわざサイトマップをメンテナンスする必要もありません。

 

PS Auto Sitemapの導入方法

さて、ここからはいよいよWordPressのプラグイン

PS Auto Sitemapの具体的な導入手順を説明します。

 

まだプラグインを導入したことがないという場合は

先にこちらの記事を参考にしてください。

ワードプレスの便利機能「プラグイン」の導入方法

 

尚、導入手順はPS Auto Sitemapがあなたのサイトに

インストールされているのを前提でまとめています。

 

なので、まだPS Auto Sitemapの導入がまだという場合は

先にプラグインをインストールしてから進めてくださいね。

 

1)固定ページでサイトマップを作成する

PS Auto Sitemapでサイトマップを作る場合は

固定ページを用意しておくと便利です。

 

ということで、まずは固定ページで

サイトマップページを作成をしましょう。

 

ダッシュボードメニューから

固定ページ → 新規追加をクリックします。

PS Auto Sitemap使い方:固定ページから新規追加

 

 

新規固定ページを開いたら

ページタイトルを入力してください。

 

タイトルはできるだけ分かりやすく付けましょう。

例えば…

  • サイトマップ
  • 目次
  • CONTENTSなど

こうしておけば、ユーザーにも親切です。

 

PS Auto Sitemap使い方:固定ページタイトル入力

 

 

ページタイトルが入力できたら、一旦下書き保存して

パーマリンクの設定を行います。

PS Auto Sitemap使い方:固定ページパーマリンク設定

 

 

パーマリンクを設定する場合は

検索エンジン用のXMLサイトマップと

パーマリンクがバッティングするリスクを避けるために

 

HTMLサイトマップのパーマリンクは

シンプルにsitemapとしないようにしてください。

 

パーマリンクはあなたが分かりやすい名前で構いませんが

必ず一工夫入れるようにしておく方が安心です。

注意ポイント! ここのパーマリンク設定がシンプルにsitemapとなっていると、検索エンジン用のサイトマップ「XMLサイトマップ」のURLとバッティングして正常に認識されない可能性があります。
パーマリンク名は単純に「sitemap」とするのではなく、「ps-sitemap」など、一工夫しておく方が安全です。

 

2)PS Auto Sitemapのコードを貼る

固定ページにサイトマップのタイトルと

パーマリンクが入力できたら

 

本文の入力エリアにテキスト編集モードで

 

PS Auto Sitemapの出力コード

<!-- SITEMAP CONTENT REPLACE POINT -->

を貼り付けてください。

PS Auto Sitemap使い方:PS Auto Sitemapコードの貼り付け
〈ご注意〉 PS Auto Sitemapのコードの貼り付けは、必ずテキスト編集モードで行ってください。ビジュアル編集モードでコードを貼り付けると反映されません。また、PS Auto Sitemapのコードはプラグインからコピーして直接貼り付けてください。※コピーしたコードを一旦、ワードなどのソフトにコピーすると正常に動作しなくなる可能性があります。

 

以前は、ここに記事がないと

WordPressがコンテンツが何もないページとして判断し

表示されないこともありましたが

 

現在はPS Auto Sitemapの出力コードだけで

正常に表示されるようになっています。

 

もしも不安な場合は、念のため…

<!-- SITEMAP CONTENT REPLACE POINT -->のコード上に

 

「サイトマップへようこそ」みたいな

適当な一文を追加しておいてください…^^;

 

3)固定ページのID番号を控える

サイトマップのタイトルとパーマリンクの設定

PS Auto Sitemapの出力コードが貼り付けできたら

そのまま公開ボタンをクリックし、固定ページを公開します。

 

固定ページのサイトマップが公開できたら

サイトマップページのURLにある

 

以下の?post=●●●にあるID番号(赤枠の部分)をメモしてください。

PS Auto Sitemap使い方:固定ページID番号控える
〈ご注意〉ここのID番号をサイトマップページではなく、記事投稿ページのID番号と勘違えるとサイトマップが表示されないので気を付けましょう。

 

わたしの場合は、781ですがあなたの番号は違います。

しっかり確認してメモしてくださいね^^

 

4)PS Auto sitemapを設定する

次に、先ほど控えたサイトマップの

ID番号(わたしの場合は781)

PS Auto Sitemapのプラグインに設定します。

 

ダッシュボードメニューの

設定 → PS Auto sitemapをクリックし

PS Auto sitemapのプラグイン設定画面に移動しましょう。

 

PS Auto Sitemapの設定画面に移動したら

サイトマップを表示する記事の空欄に

 

先ほどあなたが控えたサイトマップページのID番号を

入力してください。

 

PS Auto Sitemap使い方:PS Auto SitemapにID番号入力
〈ご注意〉ここのID番号は人それぞれで異なります。入力の際には、必ず先ほどお伝えした?post=●●●の記事ID番号を入力してください。

 

ID番号が入力できたら、最後に変更を保存をクリックして

設定を保存すれば、サイトマップの設置は完了です。

 

PS Auto SitemapにID番号を入力し、設定が完了したら

実際にサイトマップページを開き、あなたのサイトマップが

正しく表示されているか確認してください。

 

無事にサイトマップが表示されていたら完璧です。

 

あとは、あなたが記事を更新するたびに

このPS Auto Sitemapが自動でサイトマップを更新してくれます^^

 

PS Auto Sitemapの表示スタイルを変更する方法

PS Auto Sitemapの表示スタイルを変更する方法

 

PS Auto Sitemapで表示される

サイトマップのデザインは全部で14種類あります。

 

ダッシュボードメニューから

設定 → PS Auto Sitemapをクリックすると

PS Auto Sitemapの設定画面に入れます。

 

PS Auto Sitemapの設定画面

下の方にあるスタイルの変更という部分から

 

プルダウンメニューでサイトマップの

デザイン表示を切り替えることが可能です。

PS Auto Sitemap表示切り替え

 

 

デザインのバリエーション全14種類も

ここで紹介しておきますので

あなたのお気に入りのデザインを設定してみてくださいね。

スタイルなし

PS Auto sitemap:スタイルなし

シンプル

PS Auto sitemap:シンプル1 

シンプル2

PS Auto sitemap:シンプル2

チェックリスト

PS Auto sitemap:チェックリスト 

蛍光ペン

PS Auto sitemap:蛍光ペン

ドキュメントツリー

PS Auto sitemap:ドキュメントツリー 

付箋(ふせん)

PS Auto sitemap:付箋

音符

PS Auto sitemap:音符 

矢印

PS Auto sitemap:矢印

ビジネス

PS Auto sitemap:ビジネス 

索引

PS Auto sitemap:索引

アーバン

PS Auto sitemap:アーバン 

アンダーコア

PS Auto sitemap:アンダーコア

キューブ

PS Auto sitemap:キューブ 

以上、これらが全14種類の

サイトマップデザインになります。

 

少し小さくてわかりにくいかもしれませんが

何となくデザインの雰囲気だけも

わかってもらえると嬉しいです^^

 

PS Auto Sitemapと相性の悪いSTORK!

PS Auto Sitemapと相性の悪いSTORK!

 

ここからはWordPressテーマ

STORKを使われている方のみへの補足事項です。

 

サイトマップを無事作成できたのも束の間

サイトマップのデザインをカスタマイズしようと

PS Auto sitemapの設定を触っていると

 

なんと、デザインがバグって崩れている!

あなたはお気付きでしょうか?^^;

 

↓ わたしの今のサイトマップのデザインがこれです(索引)

PS Auto sitemap:索引画面

 

私はサイトマップのデザインを

CSSコードを追加して修正したので

このようにキレイに表示されています。

 

しかし、PS Auto Sitemapを反映しただけの状態

というのはこんな感じになってしまうんですね…^^;

PS Auto sitemap:索引

 

 

これではさすがのサイト訪問者もサイトマップを

じっくり見ようとは思わなくなりそうなので…

 

私はこのままでは使いたくないと思い

CSSコードを編集して、この無意味な青い丸と

アンダーラインを消してスッキリさせました。

 

なので、サイトマップを作り

これら余計なオブジェクトが視覚的に気になるという場合は

CSSコードを追加して表示させないようにしてくださいね。

 

CSSコードを追加、編集する場合は

ダッシュボードメニューから

外観 → カスタマイズをクリックし

 

追加CSSのCSS編集コードの部分に

以下のコードをコピペして貼り付けます。

 

↓ 頭に出る青い丸を消すためのコード

/* PS Auto Sitemapリストの●を消す*/
#sitemap_list li:before{
width: 0;
height: 0;
}

 

↓ リンクのアンダーラインを消す場合はこちら

/* PS Auto Sitemapの_を消す*/
#sitemap_list li a {
text-decoration: none;
}

 

私はこれらを両方追加して

それぞれが表示されないように編集しました。

 

ストーク:追加CSS

 

 

CSSコードについての詳しい説明は省きますが

もしもあなたがSTORKを使っていて

サイトマップを美しく表示させたい場合は

 

上記2つのコードを足してみてくださいね。

必ずキレイに表示されます^^

 

サイトマップを美しく表示させる方法まとめ

サイトマップを美しく表示させる方法まとめ

 

PS Auto Sitemapは最初にもお伝えした通り

HTMLのサイトマップを作成し

 

サイト訪問者がWebサイトの全体像を掴める

ユーザビリティをとても良くするプラグインです。

 

サイトマップがあることで、最近書いた記事のみならず

ずっと以前に書いた古い記事も

 

訪問者に読んでもらえるというのが

サイトマップを作成する大きなメリットでもあります。

 

また、せっかくサイトマップを用意しても

WordPressのテーマによっては

 

STORKのようにプログラミングコードが重複し

表示上のバグが出ることもあります。

 

今回は簡単なCSSコードを追加するだけで

不要な表示を消すことができましたが

 

バグ表示も気にせずそのまま表示させておくことは

あなたが気にならなくても

サイト訪問者が気になる場合も多いにあるワケです。

 

もちろん、その逆もしかりなので

必ずしも修正や、デザインのブラッシュアップが必要か?

というと100%必要とは言い切れません。

 

しかし、あなたがどんなサイトを運営しようと

デザインの細部に無頓着な人の記事というのは

記事の信憑性自体も疑われる可能性もあります。

 

もしも訪問者にサイトデザインを見て

「この人いい加減そう」と思われたら…

 

「この記事も適当だろう」と思われる

可能性すらあるんですね^^;

 

なので…

  • サイト訪問者のユーザビリティを上げる
  • サイトマップも美しく表示させる

これらをちゃんとすることで

あなたのサイトに対する訪問者の信用度も変わります。

 

もしもあなたがSTORKを使っているなら

サイトマップを作成の際にPS Auto Sitemapを導入したら

ぜひデザインの方もCSSを加えて美しく表示させてくださいね。

 

とにかくサイト訪問者のユーザビリティを良くすることは

オウンドメディアの運営においてはとても大事なことです。

 

ぜひこの機会にあなたもPS Auto Sitemapを導入して

ユーザビリティの高い美しいサイトマップに

仕上げてみてくださいね!

 

最後までお読みいただきありがとうございました。

 

合わせて読みたい!

STORK:PS Auto Sitemapでサイトマップを美しく表示させる方法

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。