2010年5月9日日曜日

Blogger にパンくずリスト ( Breadcrumb ) を導入する方法

2010年5月9日日曜日 0
日記のようにブログ更新しているとは言え、数が増えてくると少しはカテゴリーが整ってくるものです。最近は前に書いたことがあるかもと探す手まわることが増えてブログ内検索の大切さをわたし自身良く感じるようになりました。サイドバーにカテゴリーをリスト表示しているものの、関連するものも多様化してくると数が増えるばかりです。
今日は Blogger にある、わたしの最も古いブログ「アマデウスレコードブログ組曲第4番 http://www.amadeusrecord.com/ 」に“パンくずリスト”と呼ばれるナビ、 Breadcrumb を導入することを試みてみました。



「ホーム > Twitter > ・・・」とあるのがパンくずリストです。思いの外簡単でした。あとは少し色を変えるとか、文字のサイズとかと言った視認性を修正してみることとなるでしょう。あとは毎回の記事にカテゴリーをつける習慣がまだまだ。導入した意味のあるものに充実させていきたいと努力します。

導入方法はテンプレートのカスタマイズ。

1.Bloggerにログイン後、 [レイアウト] → [ HTML の編集] → [ウィジェットのテンプレートを展開] にチェック。
レイアウトを調整するのに HTML の編修は慣れていたのですけど、今日修正する項目を見つけられなくて諦めかけていました。“[ウィジェットのテンプレートを展開] にチェック”を入れてなかったのでした。これまでウィジェットのテンプレートは手を入れたことがなかったのです。これで今後は少しウィジェットも修正するかも知れません。
ブラウザに表示できる領域は狭いし、作業中にブラウザが落ちたりすると大変ですからエディタでバックアップを取りながら修正されるのが良いと思います。テンプレートの中から該当する部分を見つけるのも容易ですからね。
変更するのは3箇所です。

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. [プレビュー] をクリックして、パンくずリストが追加されていることを確認して、 [テンプレートを保存] する。
プレビューしても個別のページでは、機能しているか確認できませんからトップページに「ホーム」とあれば大丈夫でしょう。



デザインを工夫しているブログでは違和感が出てくるものもあると思います。「6」で追加したスタイルシートを工夫してみましょう。
普通はそのままでも問題無しだと思います。以前より感想を頂いていることですけど、わたしのブログはエントリー個々のタイトルがとても個性的だと言うことです。長いタイトルをつけることが多いので少々煩わしい感じがします。文字の色を工夫してみたいと思います。
これで何でもかんでも雑多に盛りだくさんのわたしのブログもまとまった形に見えるかな?テーマを決めてかかれているブログも目次替わりになるので便利、有用性の高い機能ですね。

今日のカスタマイズには、「Bloggerカスタマイズ情報」の「 Bloggerにパンくずリスト(Breadcrumb)を導入する方法 」を参考にしました。記事に引用したコードはその記事から引用しました。

国際版の「あし@」かしら?登録無用設置も簡単!!訪問者数が分かるバッヂ http://whos.amung.us/

朝方、わたしの写真が掲載されている海外系のブログにも利用されていたブログパーツ。日本での「あし@」の簡易版と言うところかな? 訪問中の人数が分かるだけのもので、Ninja Tool の海外版というものかも知れません。が、昨日、いくつか訪問することになった海外のブログで目にとまりました。
お昼に「ブログを見てちょうだい」とTwitterで声かけてくれた海外のユーザーがいらっしゃったので早速拝見させて頂きました。その方のブログでも利用されていました。

ブログの左下に数字が表示されているタグが、そのブログパーツです。わたしも試しに設置。サイト( http://whos.amung.us/ )で提供されているタグをサイドバーのフリースペースに貼り付けただけで、フリーでは登録も必要ありませんでした。
どのような解析機能があるのかは、これから観ていく段階です。プロ版を登録すれば、しっかりとした解析の記録が出るのかも知れません。が、まずは動作の確認というところです。JavaScriptを使用しているようなので、設置したことでブログの表示のストレスになるかも知れないから。
先日も、あし@の仕様変更に伴うトラブルかオフィシャルのブログが完全に表示されないという状態がありました。ブログパーツはタグを何処に張り込むかという難しさもありますね。

http://www.respirandoarte-davi.blogspot.com

Posted via email from littleconcert's posterous

 
アマデウスレコード☃ブログ組曲第4番. Design by Pocket