日記のようにブログ更新しているとは言え、数が増えてくると少しはカテゴリーが整ってくるものです。最近は前に書いたことがあるかもと探す手まわることが増えてブログ内検索の大切さをわたし自身良く感じるようになりました。サイドバーにカテゴリーをリスト表示しているものの、関連するものも多様化してくると数が増えるばかりです。
今日は Blogger にある、わたしの最も古いブログ「アマデウスレコードブログ組曲第４番
http://www.amadeusrecord.com/ 」に“パンくずリスト”と呼ばれるナビ、 Breadcrumb を導入することを試みてみました。
「ホーム ＞ Twitter ＞ ・・・」とあるのがパンくずリストです。思いの外簡単でした。あとは少し色を変えるとか、文字のサイズとかと言った視認性を修正してみることとなるでしょう。あとは毎回の記事にカテゴリーをつける習慣がまだまだ。導入した意味のあるものに充実させていきたいと努力します。
導入方法はテンプレートのカスタマイズ。
1．Bloggerにログイン後、 [レイアウト] → [ HTML の編集] → [ウィジェットのテンプレートを展開] にチェック。
レイアウトを調整するのに HTML の編修は慣れていたのですけど、今日修正する項目を見つけられなくて諦めかけていました。“[ウィジェットのテンプレートを展開] にチェック”を入れてなかったのでした。これまでウィジェットのテンプレートは手を入れたことがなかったのです。これで今後は少しウィジェットも修正するかも知れません。
ブラウザに表示できる領域は狭いし、作業中にブラウザが落ちたりすると大変ですからエディタでバックアップを取りながら修正されるのが良いと思います。テンプレートの中から該当する部分を見つけるのも容易ですからね。
変更するのは３箇所です。
2． [テンプレートを編集] 画面で、次のラインを見つける。
＜b:include data='top' name='status-message'/＞
3．見つけたら、それを削除し、削除した位置に次のラインを追加する（書き換え）。
＜b:include data='posts' name='breadcrumb'/＞
4．次に、次のラインを見つける。
＜b:includable id='main' var='top'＞
5．見つけたら、その直前に次のコードを追加する。
＜b:includable id='breadcrumb' var='posts'＞
＜div id='breadcrumb'＞
＜a expr:href='data:blog.homepageUrl'＞ホーム＜/a＞
＜b:if cond='data:blog.homepageUrl == data:blog.url'＞＜!-- breadcrumb on home page --＞
＜b:else/＞
＜b:if cond='data:blog.pageType == "item"'＞＜!-- breadcrumb for the post page --＞
＜b:loop values='data:posts' var='post'＞
＜b:if cond='data:post.labels'＞
>
＜b:loop values='data:post.labels' var='label'＞
＜a expr:href='data:label.url' rel='tag'＞＜data:label.name/＞＜/a＞
＜b:if cond='data:label.isLast != "true"'＞,＜/b:if＞
＜/b:loop＞
＜b:else/＞
> ラベルなし
＜/b:if＞
> ＜span＞＜data:post.title/＞＜/span＞
＜/b:loop＞
＜b:else/＞
＜b:if cond='data:blog.pageType == "static_page"'＞＜!-- breadcrumb for the static page --＞
> ＜data:blog.pageName/＞
＜b:else/＞
＜b:if cond='data:blog.pageType == "archive"'＞＜!-- breadcrumb for the label archive page and search page --＞
> ＜data:blog.pageName/＞
＜b:else/＞
＜b:if cond='data:blog.pageType == "index"'＞
＜b:if cond='data:blog.pageName == ""'＞
> 全投稿
＜b:else/＞
> ＜data:blog.pageName/＞
＜/b:if＞
＜/b:if＞
＜/b:if＞
＜/b:if＞
＜/b:if＞
＜/b:if＞
＜/div＞
＜/b:includable＞
※タグは半角の「<」と「>」を全角にして表示しています。コピー＆ペーストする場合は半角に戻してから行って下さい。
6．最後に、]]>を見つけ、その直前に次のコードを追加する。
#breadcrumb {
margin: 0 0 15px 0;
padding: 5px 5px 5px 0;
border-bottom: 3px double #e6e4e3;
font-size: 95%;
line-height: 1.4em;
}
7． [プレビュー] をクリックして、パンくずリストが追加されていることを確認して、 [テンプレートを保存] する。
プレビューしても個別のページでは、機能しているか確認できませんからトップページに「ホーム」とあれば大丈夫でしょう。
デザインを工夫しているブログでは違和感が出てくるものもあると思います。「６」で追加したスタイルシートを工夫してみましょう。
普通はそのままでも問題無しだと思います。以前より感想を頂いていることですけど、わたしのブログはエントリー個々のタイトルがとても個性的だと言うことです。長いタイトルをつけることが多いので少々煩わしい感じがします。文字の色を工夫してみたいと思います。
これで何でもかんでも雑多に盛りだくさんのわたしのブログもまとまった形に見えるかな？テーマを決めてかかれているブログも目次替わりになるので便利、有用性の高い機能ですね。
今日のカスタマイズには、「Bloggerカスタマイズ情報」の「
Bloggerにパンくずリスト(Breadcrumb)を導入する方法 」を参考にしました。記事に引用したコードはその記事から引用しました。
」より
」より
」より
」より ＣＤ３枚組
」より
」より
」より 入手不可能
」の紹介されているブログを見て回っていると、クラシック音楽のCDの聴き方の新しい側面を感じさせるのが多いのが興味深い。
投稿
