【Blogger】ソートできるリスト型HTMLサイトマップ【設置編】

ソートできるリスト型HTMLサイトマップをBloggerで導入しました。今回は設置に絞って記載し、次回に色などのカスタマイズについて分けて投稿させていただきます。

この記事でわかること

Bloggerで「ソートできるリスト型サイトマップ」を導入する手順

環境

リファレンス

こちらのサイトで公開されているスクリプトを使わせていただきました。以降の引用は全てこのサイトからのものになります。

My Blogger Lab
How to add an HTML Sitemap Page in Blogger

導入手順

テーマのバックアップ

テーマに変更を加えるので忘れずにバックアップを取っておきましょう。

CSSを追加

引用元が英語のサイトなので日本語で手順を紹介させていただきます。

以下のコードをCSSに貼り付ける、という手順です。

コードコピー

以下のコードを全てコピーします。

/* Sitemap plugin By MyBloggerLab */
#bp_toc {
     color: #666;
     margin: 0 auto;
     padding: 0;
     border: 1px solid #d2d2d2;
     float: left;
     width: 100%;
}
span.toc-note {
     display: none;
}
#bp_toc tr:nth-child(2n) {
     background: #f5f5f5;
}
td.toc-entry-col1 a {
     font-weight: bold;
     font-size: 14px;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
    background:#9E9E9E;
}
.toc-header-col1 {
     padding: 10px;
     width: 250px;
}
.toc-header-col2 {
     padding: 10px;
     width: 75px;
}
.toc-header-col3 {
     padding: 10px;
     width: 125px;
}
.toc-header-col1 a:link,
.toc-header-col1 a:visited,
.toc-header-col2 a:link,
.toc-header-col2 a:visited,
.toc-header-col3 a:link,
.toc-header-col3 a:visited {
     font-size: 13px;
     text-decoration: none;
     color: #fff;
     font-weight: 700;
     letter-spacing: 0.5px;
}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover {
     text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2,
.toc-entry-col3 {
     padding: 5px;
     padding-left: 5px;
     font-size: 12px;
}
.toc-entry-col1 a,
.toc-entry-col2 a,
.toc-entry-col3 a {
     color: #666;
     font-size: 13px;
     text-decoration: none
}
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover,
.toc-entry-col3 a:hover {
     text-decoration:underline;
}
#bp_toc table {
     width: 100%;
     margin: 0 auto;
     counter-reset: rowNumber;
}
.toc-entry-col1 {
     counter-increment: rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
     content: counter(rowNumber);
     min-width: 1em;
     min-height: 3em;
     float: left;
     border-right: 1px solid #fff;
     text-align: center;
     padding: 0px 11px 1px 6px;
     margin-right: 15px;
}
td.toc-entry-col2 {
     text-align: center;
}

CSSに挿入

次にダッシュボード「テーマ」→「カスタマイズ」横のボタンから「HTML編集」に進みます。その中のCSS部分に上のコードを全て貼り付けます。

<b:skin><![CDATA[ から]]></b:skin>の間に挿入することになります。私は]]></b:skin>のすぐ上に挿入しました。下の写真の赤枠部分です。

貼り付け後、「保存」してください。CSSは以上です。

サイトマップページ作成

次にサイトマップのページを作成します。投稿ではなく「ページ」内に作るのが一般的なので、それに従います。

以下のコードをサイトマップのページに貼り付ける、という手順です。

コードコピー

以下のコードを全てコピーします。

<div id="bp_toc"></div>
<script defer="defer" src="https://mybloggerlab.com/js/sitemap.js" type="text/javascript"></script>
<script defer="defer" src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

新規ページ追加

ダッシュボード「ページ」→「＋新しいページ」から新ページを作成します。

HTMLに挿入

次に左上の鉛筆ボタンから「HTMLビュー」に切り替え、先ほどのコードを貼り付けます。