※本サイトのコンテンツには広告が含まれている場合があります

プラグイン

『PS Auto Sitemap』でHTMLサイトマップを綺麗に作成する方法

  /
PS Auto SitemapでHTMLサイトマップの作り方

ブログ開設5ヶ月目にして、やっとサイトマップを作成しました。

ずっとやらなきゃと思いつつも、「大変そう」「めんどくさい」という理由から、ずっと先伸ばししていたサイトマップ設置。
 

みずー
みずー
いざやってみると、驚くほどあっけなく簡単に出来てしまいました。

 
今回は、WordPressプラグイン『PS Auto Sitemap』でHTMLサイトマップを作成する方法をご紹介します。

※HTMLサイトマップとは、サイトを訪問してきたユーザー向けのサイトマップです。
 

みずー
みずー
HTMLサイトマップを作成するメリットは、以下のとおりです。

 

  • サイトのユーザビリティ(使い勝手)向上
  • 目的の記事を見つけてもらいやすいためPV数アップにつながる

HTMLサイトマップは、プラグインを使えば簡単に作成できてメリットが大きいです。
まだ設置していない人は、すぐに作成しましょう！

こんな人におすすめ
  • HTMLサイトマップを作成・設置していない
  • サイトマップ作成方法がわからない
  • サイトのユーザビリティを向上させPVアップにつなげたい

『PS Auto Sitemap』のサイトマップデザイン一覧

『PS Auto Sitemap』プラグインで、どんなデザインのサイトマップが作成できるのか気になりませんか？
 

みずー
みずー
私はすごく気になりました！

 
『PS Auto Sitemap』は、14種類のサイトマップデザインがあります。

どんなデザインのサイトマップができるのか、一つずつ簡単にご紹介します。
 

みずー
みずー
デザインに興味のない方は、サイトマップ作成方法へどうぞ。
=>サイトマップ作成方法へジャンプ

 
■スタイルなし
 

みずー
みずー
字の大きさも程よく、シンプルで見やすいデザインです。

 
PS Auto Sitemapデザイン「スタイルなし」
 

■シンプル
 

みずー
みずー
シンプルでいいけど、ちょっと字が小さいです。
あと、先頭の赤丸がデザインとかぶってしまってます。

 
PS Auto Sitemapデザイン「シンプル」
 

■シンプル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デザインについて、個人的な意見を好き勝手言ってみました。

謎の赤丸なんですが、使用しているWordpressテーマ『JIN』の仕様なのか、Wordpressの仕様なのか、他に原因があるのかわかりません。
 

みずー
みずー
わかる方いらっしゃいましたら教えてください。

 
【追記】
さっそくTwitterで『謎の赤丸』について情報をいただきました！
 

みずー
みずー
さんぺいちゃん(@3pei_tw)
ちゆきちゃん(@chiyuki3030)
ひなたん(@hinatan_mama)
キャンちゃん(@4182_y)

ありがとうございます！

 

どうやら、テーマの仕様が原因のようです。

  • 『JIN』は赤丸
  • 『STORK』は青丸
  • 『cocoon』は何も出ない！
  • 『AFFINGER』は黒丸

 

みずー
みずー
私は、赤丸が良い感じにデザインのアクセントになる「スタイルなし」デザインを使うことにしました！

 
それでは、実際にサイトマップを作成していきましょう。

目次に戻る▶▶

『PS Auto Sitemap』を使ったHTMLサイトマップの作成方法

みずー
みずー
『PS Auto Sitemap』プラグインを使ったHTMLサイトマップ作成手順は以下のとおりです。
サイトマップ作成手順
  1. 『PS Auto Sitemap』プラグインをインストールする
  2. サイトマップを出力するページを作成する
  3. 『PS Auto Sitemap』の設定をする

 

みずー
みずー
手順としては、3ステップで完了です。簡単で時間もそれほどかかりません。
さっそくサイトマップを作成していきましょう！

 

サイトマップ作成手順
  • Step1
    『PS Auto Sitemap』をインストールする

    WordPressダッシュボードの「プラグイン」→「新規追加」をクリックします。
    プラグインの新規追加

    検索バーに“PS Auto Sitemap”を入力して検索します。
    PS Auto Sitemapプラグインを検索

    『PS Auto Sitemap』の「今すぐインストール」ボタンをクリックします。
    PS Auto Sitemapをインストール

    「有効化」ボタンをクリックして、インストールは完了です。
    PS Auto Sitemapを有効化する

  • Step2
    サイトマップを出力するページを作成する

    WordPressダッシュボードの「固定ページ」→「新規追加」をクリックします。
    Wordpressの固定ページを新規追加する

    サイトマップを出力するための固定ページを作成します。
    固定ページでサイトマップ出力ページを作成
    ➀編集モードは「テキスト」にします。

    ➁サイトマップページのタイトルを入力してください。
    わかりやすく「サイトマップ」でいいです。
     

    みずー
    みずー
    ここは後からいつでも変えられます。

     
    ➂パーマリンクを設定します。
    サイトマップであることがわかる英単語を入れましょう。
     

    みずー
    みずー
    私は「sitemaps」としました。

     

    「sitemap」のみの設定はNGです！

    SEO、サイトマップ系の他プラグインと干渉する可能性があるためです。
    ※URLがhttps://○○○○/sitemap.htmlとなるため、干渉する可能性があります。

    ➃記事本文に、サイトマップ出力コードを入力します。
    サイトマップは、以下のコードが記載されているページに出力されます。
     

    みずー
    みずー
    このままコピペでOKです！

     

    <!– SITEMAP CONTENT REPLACE POINT –>

    ➄サイトマップページを公開します。
    ➀～➃まで、すべて終わったら「公開」ボタンをクリックします。
     

    みずー
    みずー
    サイトマップページを公開したら、下記の要領でサイトマップページのIDを確認し、控えておきます。
    次の『PS Auto Sitemap』の設定で使います！

     
    【サイトマップページIDを確認する】
    Wordpressダッシュボードの「固定ページ」→「固定ページ一覧」をクリックします。

    サイトマップページの固定ID

    今作成したサイトマップページのIDを確認し、控えておきましょう。
     

    みずー
    みずー
    このページIDは、人によって異なります。私は“3006”でした。

     

  • Step3
    『PS Auto Sitemap』の設定をする

    WordPressダッシュボードの「設定」→「PS Auto Sitemap」をクリックします。
    PS Auto Sitemapの設定画面を出す

    下記画面の➀～⑪までを設定していきます。
     

    みずー
    みずー
    一つずつ解説します。

     
    PS Auto Sitemapの設定画面

    ➀ホームページの出力
    チェックを入れた場合、下記画像のようにサイトマップの先頭にホームページへのリンクが表示されます。

    PS Auto Sitemapのサイトマップ例

    ➁投稿リストの出力
    投稿記事がサイトマップに出力されないと意味がないので、当然チェックを入れます。

    ➂固定ページリストの出力
    チェックを入れた場合、固定ページで設定しているページ(プロフィール、お問い合わせ、プライバシーポリシーなど)を出力させます。

    ➃サイトマップを表示する記事
    ここに、先ほど確認して控えておいたサイトマップページの【ページID】を入力します。

    ➄出力階層制限
    基本的には「制限なし」でOKです。

    例として、「第1階層」とした場合、2階層以上あるカテゴリーでも1階層までしか出力されなくなってしまいます。
     

    みずー
    みずー
    表示されない記事があってはサイトマップの意味がありません。

     
    ➅先に出力するリスト
    基本的には「投稿」にチェックします。
     

    みずー
    みずー
    投稿記事と固定ページ記事のどちらを先に表示させるか。という設定です。

     
    ➆カテゴリーと投稿の表示
    「投稿を分割」にチェックを入れた場合、下記画像のように、投稿記事は全てリンク表示となります。
     

    みずー
    みずー
    クリックして違うページを開かなければ見られず、サイト訪問者にとってはストレスとなります。
    また、見ておわかりのように、とても見づらいです。

     
    カテゴリーと投稿の表示をわけた場合

    ➇除外カテゴリ
    表示させたくないカテゴリがある場合、該当するカテゴリIDを入力します。

    ➈除外記事
    表示させたくない記事がある場合、該当する記事IDを入力します。

    ➉スタイルの変更
    先に紹介したサイトマップデザインは、こちらで設定します。
    好きなスタイルを選びましょう。
     

    みずー
    みずー
    私は「スタイルなし」にしました。

     
    ⑪キャッシュの使用
    HTMLサイトマップの表示をする時に、キャッシュを使用するかどうかを選択します。

    ※キャッシュの使用で読み込み速度を上げることができますが、注意が必要です。

    キャッシュ系プラグインをインストールしている、または今後インストールする場合は、干渉して不具合が出る可能性があります。

     

    みずー
    みずー
    私はチェックを外しました。

     
    ➀～⑪の設定がすべて終わったら、「変更を保存」ボタンをクリックします。

  • Step3
    サイトマップページを確認する

    サイトマップページで設定したパーマリンクを実際に開いてみて、問題なく表示されていれば完了です。

 

みずー
みずー
これで、サイトマップページの設定は完了です。おつかれさまでした！

 
ただ、サイトマップはまだブログ上には設置されていません。

引き続き、サイトマップの設置まで行いましょう！

目次に戻る▶▶

作成したサイトマップを設置する方法

PCとスマホそれぞれに、以下の画像の場所へサイトマップを設置する方法を簡単に説明します。
 

みずー
みずー
設置場所は、もちろん好きな場所でOKです。

 
【PCトップページのグローバルメニュー】
PC画面のサイトマップ設置場所

【スマホフッターメニュー】
スマホ画面のサイトマップ設置場所
 

みずー
みずー
私はWordpressテーマ『JIN』を使っています。
多少異なるところがあるかもしれませんが、基本的な操作は同じだと思います。

 
【PCトップページのグローバルメニュー設定】

WordPress「ダッシュボード」→「外観」→「メニュー」をクリックします。

Wordpressダッシュボード

「編集するメニュー」(サイトマップを表示させたい場所のメニュー)を選択します。

編集するメニューを選択

固定ページで設定した「サイトマップ」を「メニューに追加」します。

サイトマップをグローバルメニューに追加
みずー
みずー
追加できたら、「メニューを保存」ボタンをクリックして保存するのをお忘れなく！

【スマホフッターメニュー設定】
スマホフッターメニューも、PCトップページのグローバルメニュー設定と同じページで設定できます。
 

みずー
みずー
「編集するメニュー」でスマホフッターメニューを選択してください。

 
固定ページで設定した「サイトマップ」を「メニューに追加」し、「メニューを保存」ボタンをクリックして完了です。

サイトマップをスマホメニューに追加
 

みずー
みずー
詳しくは、『JIN』公式のマニュアルを参照してください。

 

=>グローバルメニューの設定方法

=>スマホフッターメニューの設定方法

※参考：『JIN』公式マニュアルページ

みずー
みずー
以上で、HTMLサイトマップ設定は完了です！おつかれさまでした！

目次に戻る▶▶

まとめ：プラグインを使えばサイトマップ設置は簡単！

今回、重い腰をあげてHTMLサイトマップの設定、設置まで行いましたが、プラグインのおかげで驚くほど簡単にできました。
 

みずー
みずー
なぜ今までやらなかったのかと後悔…

 

サイトマップを設置することで、ブログ訪問者が読みたい記事を見つける確率が高まり、PV増につながります。

使い勝手のいいサイトは、訪問者に好まれ再訪問にもつながります。

メリットしかないHTMLサイトマップの設置。まだの方は、ぜひ設定しましょう！
 

みずー
みずー
最後まで読んでいただき、ありがとうございました！
記事の更新情報などはツイッターで行ってます。
良かったらフォローお願いします！＝＞みずーのツイッター

目次に戻る▶▶

＝＞『ブログ運営』カテゴリに戻る
＝＞『プラグイン』カテゴリに戻る

Wordpress サイトマップ プラグイン ブログ運営
関連記事はこちら

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA