2012-02-08

Blogger 用「目次」ウィジェットを作った

新テンプレート向け。サイド・バーに「目次」を表示するウィジェットを作った。見た目は以下の通り。コンパクトさを第一に考えて作ったので、ちょっと見栄えが悪いかもしれない。

インストール

下のボタンを押すだけで、ウィジェット登録画面に入れる。

ソース・ファイル

本ウィジェットのソース・ファイルは github で公開している。

パッチは大歓迎。

裏話

過去に、テンプレートをいじって目次を作る方法を解説した。

テンプレートを使う方法は、目次としてかなり良いものになったと自負している。一方で、テンプレートを編集する分、難易度が高かった。

そこで、「ウィジェット」を使って目次を作ろうと思った。けれど、ウィジェットを調べていくうちに、Blogger のテンプレート用の要素が使えないらしいことが分かってきた。テンプレート用のウィジェットが使えないと、同じ様な目次は出来ない。一度、挫折した。これが 2 年位い前のこと。

気を新たに、作り始めたのが当ウィジェット。まず、サイド・バーに置くことを前提にした。そして、「日付」を付けないシンプルな形で妥協することにした。あとは JavaScript を思い出しながらソース・コードを書くだけ。最初は ul 要素を使ってリスト表示にしようとした (github の最初のリビジョンでそのバージョンを見ることができる)。ところが、テンプレートのデフォールトでは ul 要素のスタイルが無効にされていることが分かった。これが、ぼくの選んだテンプレートだけのたまたまなのか、それとも全てのテンプレートに当てはまるのか... 調べるのが面倒だったので、リスト表示はやめた。もっとシンプルを目指す。それで出来たのがこのウィジェット。

ブログ・タイトル同士を「★」で区切る方法は、新聞の「天声人語」を真似した。

あとがき

ウィジェットの利点は、ボタン一押しで追加できること。テンプレートをいじったりと、難しいことをしなくていい。本ウィジェットが役に立つことを願う。

2 comments:

  1. Chrome、IE は問題なかったんですが、Firefox のときだけ動かないですね…。
    Firefox では innerText を取れないのが原因みたいです。

    ReplyDelete
    Replies
    1. Kuribo さん、バグ・レポートありがとうございます。
      早速、修正致しました。

      まさか、Firefox で innerText が使えないとは。見事にやられました。

      Delete