キーボード

Googleが提供する無料ブログサービスに Blogger(ブロガー)というのがあります。無料ブログサービスにはFC2やライブドアブログ、アメブロなどがあります。ほとんどの無料ブログサービスには無料で提供されているブログツールが幾種類もあるのですが、ここではBlogger(ブロガー)で「サイトマップ(記事一覧)を自動で作成する方法」について書きたいと思います。

Blogger(ブロガー)のサイトマップ(記事一覧)を作成するメリット

Blogger(ブロガー)にはブログ管理ページにガジェットと呼ばれるブログツールがあり、人気記事や訪問者数をサイドバーなどに簡単に表示することが出来ますが、残念なことに自動でサイトマップを作製するガシェットはありません。

ブログの記事が増えてくると、カテゴリーやタグの管理だけでは閲覧者の方が記事を見つけるのに不便になってくることもありますし、ブログ管理者にとっても記事一覧があった方がブログの運営上でメリットがあります。つまりサイトマップがあるとwin-winの関係になるということです。そこで以下のようなサイトマップを簡単に作成できる方法をご紹介したいと思います。
 
サイトマップ

Blogger(ブロガー)のサイトマップ(記事一覧)作製手順

①まずはBlogger(ブロガー)の管理画面にて画面左側の「ページ」という部分を選択します。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その1

②次に「新しいページ」のボタンを押すと下記のような画面が表示されます。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その2

③そして新しいページを作成する画面が表示されます。下記の画像のページです。ここで注意したいのは、画面を表示した時は「作成」が選択されていますので、必ず「HTML」をクリックしてください。 さらに作成したページにタイトルを付ける必要がありますので、ここでは「サイトマップ」とします。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その3

④最後に以下のhtmlコードを貼りつければ完成です。

<script type="text/javascript">
var POSTSTOC_SETTINGS = {"blogURL":"igaito.blogspot.jp/","sort":{"key":"title","order":"default"},"printby":"title"}
</script>
<link rel="stylesheet" type="text/css" href="https://garafu.github.io/blogger.toc/release/latest/simple.css" />
<script type="text/javascript" src="https://garafu.github.io/blogger.toc/release/latest/blogger.toc.min.js"></script>

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その4

尚、貼りつけるhtmlコードのカスタマイズ方法は当記事の下の方で説明しています。
htmlコードの赤文字の部分をあなた様のブログのURL(ドメイン)に置き換えれば、それで終了です。サイトマップに日付等を入れたい場合は、htmlを作成してカスタマイズできるページのリンクを一番最後に設置していますので、そちらから参照して下さい。

上記コードはhttpsに対応したコードを記載しています。当記事の最後に掲載しているサイトで、htmlコードを作成する場合は、上記コードと同じように「http」を「https」と手入力で変更してください。Bloggerに暗号化されていないサイトのリンクを貼る場合は、画面上部に警告が表示されます。それを避ける為に「s」を付け加えます。

⑤「公開」ボタンを押して、記事を保存します。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その5

⑥次にブログ管理画面の左側にある「レイアウト」を選択して、「Cross-Column」にある「ガジェットを追加」ボタンををクリックします。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その6

⑦そして、ガジェット追加ボタンを押してからガシェットの「ページ」を選択します。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その7

ここまで終わればあともう少しです。

⑧次にもう一度、管理画面左側から「レイアウト」を選択して「Cross-Column」の編集ボタンをクリックします。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その9

⑨そして最後に、先程作成したページ「サイトマップ」を表示させるためにボックスの中にチェックを入れると完成です。これで「サイトマップ」ボタンがブログタイトル下に表示されるようになります。これですべて完成です。

Bloggerでサイトマップ(記事一覧)を自動で作成する方法その8

Brogger(ブロガー)の自動サイトマップhtmlをカスタマイズする方法

下記のページよりhtmlを簡単にカスタマイズできます。


Your blog URL という場所にあなた様のブログURLを入れることによって、日付等を入れたり、ソートする順番を変更したり出来ます。尚、入力するブログのURLはhttp://以降のアドレスを入力してください。つまりhttp://は不要ということです。ブログURLを入れた後に、「open window」ボタンを押せば、htmlコードが表示されます。英語表記ですがちょっと触れば、直感で分かる仕様となっています。

尚、上記のサイトでhtmlを作成された際は、手入力でhttpをhttpsと変更してください。上記サイトの仕様が古いために、自動生成されるhtmlコード内のアドレスがhttpのままになっています。

スポンサーリンク