Bloggerで並べ替えや絞り込み表示が可能なサイトマップを作成する方法

カスタマイズ
スポンサーリンク

突然ですが、あなたはブログのメニューバー(グローナビ)にサイトマップを表示していますか?

私は以前、クリボーさんのこちらの記事を参考させていただき、サイトマップを作成していました。
http://www.kuribo.info/2012/04/blogger.html

つい最近、当ブログをSSL化したのですが、その影響なのかサイトマップが表示されなくなってしまいました(><)
※ブログのURLを指定する部分を” http ” → ” https ”に変更してもダメでした。

そこで今回は、別のスクリプトを使ってサイトマップを作成する方法をご紹介します。

スポンサーリンク

サイトマップの作成手順

やり方は超簡単。コードをコピー&ペーストするだけでサイトマップが作成できてしまいます。

  • CSSコードの追加
  • HTMLコードの追加

まずはこちらのサイトにアクセス

My Blogger Lab
https://www.mybloggerlab.com/2016/08/how-to-add-html-sitemap-page-in-blogger.html

CSSコードの追加

1. サイト内の次のコードを全てコピー

2. Blogger管理画面「テーマ」 → 「HTMLの編集」を選択

3. 「Ctrl + F」で検索窓を表示 → 「]]></b:skin>」と入力後、「Enter」キー

4. コードを貼り付ける → 「テーマを保存」をクリック

 

HTMLコードの追加

1. サイト内の次のコードを全てコピー

2. Blogger管理画面「ページ」 → 「サイトマップ」を選択

※サイトマップがない場合は、新規作成して下さい(「新しいページ」 → ページタイトル部に「サイトマップ」と入力)

3. 「HTML」をクリック → コードを貼り付ける → 「更新」をクリック

以上で「サイトマップの作成」は完了です。
お疲れ様でした!

では、作成したサイトマップを見てみましょう!

スポンサーリンク

作成したサイトマップの機能紹介

ブログタイトルにもありますが、今回作成したサイトマップには2つの機能があります。

  • 記事タイトル・投稿日の並べ替え
  • ラベル(カテゴリ)の絞り込み表示

記事タイトル・投稿日の並べ替え

項目部分(「POST TITLE」や「POST DATE」)をクリックするだけで昇順に並べ替えることができます。
ちなみにもう1度クリックすると降順になります。
※ラベルの並べ替えはできません。

 

ラベル(カテゴリ)の絞り込み表示

表示したいラベルをクリックするだけで、絞り込み表示することができます。
元の一覧表示に戻したい場合は、「LABELS」をクリック。

 

スポンサーリンク

さいごに

いかがでしたでしょうか?
投稿記事を一覧表示できる便利なサイトマップ。
今回ご紹介したサイトマップは並べ替えやラベルの絞り込み表示ができるスグレモノです。
ぜひお試し下さい!
この記事が少しでもお役に立てましたら嬉しいです。

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント