[Blogger] コンテンツ一覧表を追加する方法 - Table Of Contents Widget For Blogger: LAB@Moon

[Blogger] コンテンツ一覧表を追加する方法 - Table Of Contents Widget For Blogger

Table Of Contents Widget For Blogger - Blogger Widgets

Blogger には、静的な情報を公開する独立したページを簡単に作成する「ページ」機能があります。

この「ページ」機能を使用して、ブログ閲覧に役立つアーカイブやサイトマップなどの役割をさらに発展させた "コンテンツ一覧表" (Table Of Contents) を追加してみました。

手順は、次の通り。

Blogger 管理画面の左メニューから [ページ] をクリックする。
[新しいページ] プルダウンメニューをクリックして、 [空白のページ] をクリックする。
ページのタイトルを入力する。

HTML モードに切り替えて、次のコードを貼付ける。

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://bloggergadgets.googlecode.com/files/blogtoc_orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

[公開] ボタンをクリックする。

以上です。

さらに、コンテンツ一覧表の背景やレイアウト、色、フォントなどをカスタマイズする場合は、[Blogger テンプレートデザイナー] > [アドバンス] から[ css を追加] 画面を開き、[カスタム CSS を追加] 欄に次のスタイルシートを追加すると、お好みで変更できます。

#bp_toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:500px;
  margin-top:10px;
}

/* コンテンツ一覧表の見出し
    toc-header-col1 = 「 POST TITLE 」
    toc-header-col2 = 「 POST DATE 」
    toc-header-col3 = 「 LABELS 」 */
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  width:250px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  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:80%;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:80%;
  text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
}

29 Feb 2012

[Blogger] コンテンツ一覧表を追加する方法 - Table Of Contents Widget For Blogger