初心者がBloggerにHTMLの記事一覧のサイトマップ(SITMAP)を表示する機能を導入する。

2021/03/23

blogger設定

t f B! P L
 記事を読んでいると”サイトマップ”というラベルごとの記事一覧を準備されている方がいらっしゃいますよね。
 それ、カッコいい!とおもって調べてみました。
 サイトマップは、Helplogger様で公開されているスクリプトを使用します。
 このスクリプトでは、ラベルごとの記事が一覧として取得でき、さらに記事を投稿すると自動でサイトマップに反映される優れものです。
 ということで、今回はHTMLのサイトマップの自動生成スクリプトを導入した体験を具体的にわかりやすくまとめて記事にしています。

HTMLの記事一覧のサイトマップとは

 サイトマップはブログの投稿記事をラベルごとにソートし表示したものになります。
 
カテゴリ別のサイトマップ
記事を投稿すると自動的に反映されっます。
また、新しい記事には”New!”の文字が付け加えられます。

スクリプトコードの入手方法

スクリプトコードは以下で入手願います。
 リンク先の注意事項等をご確認の上ご使用ください。

注意事項
以下の点に注意してください。

コード変更箇所
引用:How to Create a Sitemap or Table of Contents in Blogger

 上記の画像はコピペ元のコードの最後の部分です。
 青文字の”http://helplogger.blogspot.com/”部分はBloggerの自分ブログのURLに変更してください。
 例えば、このブログであれば”https://monocotoyom.blogspot.com/”となります。
 最近始めた方は”HTTPS(Hypertext Transfer Protocol Secure)”を指定していると思いますので間違えないように書き換えてください。

サイトマップの設置方法

 サイトマップの設置は固定ページに追加しましょう。

固定ページの作成

 固定ページについてはわからない場合は関連記事を参照ください。

 ページ→新しいページ
 HTMLビューに切り替えてコードをコピペします。
コードのコピペ
 注意事項
 タイトルがURLになりますので、初めは”HTML SITMAP”など半角英数字で記載し、公開した後で、必要であればタイトルを変更し、”更新”を行ってください。


 コメント機能を好みで変更してください。
ページのコメントを停止
 通常は固定ページには、コメント機能は不要と思うので、右側にあるオプション→”許可しない”にしています。

固定ページをブログに設置する。

 Bloggerのメインメニューのレイアウトから”HTML/JavaScript”ガジェットか、ページリストに追加しましょう。
 このブログでは、ヘッダー部分のページリストに追加しています。
 この方法を説明します。
ページリスト
 固定ページを追加すると、”表示するページ”にタイトルが追加されるようです。
 そのままでよければチェックを追加するだけでもOKです。

 もし、ヘッダー部に表示するタイトルを記事のタイトルから変えたい場合は、”外部リンクを追加”から追加します。
 ”外部リンクを追加”→ページタイトル、ウエブアドレス(URL)
 
外部リンクを追加
 尚、この”外部リンクを追加”で追加したページの内容を後で編集できないようです。
 ページタイトルや(ウエブアドレス)URLを変える場合は新規に追加し、不要になったほうを削除するしかないようです。

ヘッダーの表示例

 ヘッダー部分にページリストに設置した、当ブログでは以下のように動作します。 
サイトマップの動作例

 SITMAPをクリックすると”カテゴリ別サイトマップ”が表示されます。

 尚、このブログでは、表示名を変えたいので”外部リンクを追加”で追加しました。
 ブログ名の下に入れたかったので文字幅も狭めたくて半角英数字”SITMAP”にしました。

まとめ

 以上のように簡単にHTMLの記事一覧のサイトマップを表示させることができます。
ポイントは
となります。

編集後記

 HTMLの記事一覧は記事の管理にも便利ですね。
 しかもなんかカッコいい。
 あと繰り返しになりますがコード自体は、リンク先の注意事項等をご確認の上ご使用ください。

 ほかにやり方、対処の仕方をご存知の方がいればコメントいてだけると助かります。
 また、おなじお悩みを抱えていた方もこの記事で解決できたらコメントいただけるとはげみになりますので、コメントをお願いします!

QooQ