水
13
10月
2010
Jimdoでパンくずリストを簡単に追加する
最近コンテンツがだんだんとJimdo寄りになってきました。
パンくずリストとは、ウェブサイト内において、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。
だそうです。
Jimdoサイトでは、パンくずリストは自動的には追加されません。
通常、Jimdoでパンくずリストを追加しようと思った場合、
エレメントの追加から「文章」等を選んで、手動でテキストとリンクを追加しないといけません。
それも、全ページ個別に。
また、ナビゲーションの変更を行った際には、また一からやりなおしです。
そこで、Jimdoで簡単に追加できるものを作ってみたので、
追加する方法を紹介したいと思います。
相変わらずJavascriptで解決します。
追加する場合は、シンプルに
「設定」 -> 「ヘッダー部分を編集」
で、テキストボックスの中へ下記のコードを貼付けて下さい。
<script type="text/javascript" src="http://open-lab.jp/jimdo/breadcrumb.js">
</script>
はい。以上です。
ちなみに、このパンくずリストは
<div class="jimdo-breadcrumb">[リスト] </div>
というタグを書き出しているので、
スタイルを変更（下線をつけたり）する場合は下記のような感じにスタイルを定義します。
.jimdo-breadcrumb {
border-bottom: 1px solid #ccc;
}
いつものように、あまりテストをしていないので
もし問題があれば、コメントやTwitter等でお願いします。
コメント: 17
-
#1
またまた、有り難うございます。早速使わせて頂きました。便利です。
-
#2
使わせていただきます。ありがとうございました。仮に不要になりこのスクリプトを削除する場合は、どうしたらいいのでしょうか？
-
#3
こんにちは。これは大変便利なので早速使わせていただこうとおもい、記入例通りに設置したのですが、第二階層のところが 重なって表示されてしまいます。これは何故なんでしょう？
-
#4
始めまして。
便利なものがあるんですね。早速使わせていただいております。
分からないことだらけですので、いろいろと勉強させていただきます。 -
#5
はじめまして。
早速自分のページに利用させていただきました。
パンくずが簡単に設置できないか色々と探していたので、大変役に立ちました。どうもありがとうございました。 -
#6
使わせていただきました。今まで各ページにリンクを張りまくっていた労力を考えると、神様・仏様って感じです。ありがとうございました。
-
#7
使わせて頂きました。とてもスマートで良いと思います！ありがとうございました。
ところでjavaで作られたパンくずリストは、SEO的に効果があるのでしょうか？ -
#8
SEO的な効果については、Javascriptで作られているため残念ながら期待はできません。
あくまでユーザーフレンドリーという風に理解して頂ければと。 -
#9
使わせて頂きました。ブログの投稿には反映されないようですが、これは何故なんでしょう？
-
#10
使わせていただきました！完璧です！ありがとうございますm(_ _)m
-
#11
こんにちわ。
使わせていただきました！
ありがとうございます。 -
#12
Jimdoサイト作成時からあったらいいな〜と思っていました♪
早速使わせていただきました。
ありがとうございます。 -
#13
はじめまして。
スバラシですね。javascriptを読み込むだけというのが、ありがたいです。
組み込んでみましたところ、あれっと思ったので、ご連絡差し上げます。
このページをご覧ください。
http://www.studiofreshyokohama.jp/%E8%A3%9C%E8%81%B4%E5%99%A8%E3%81%AE%E7%B4%B9%E4%BB%8B/%E8%A3%9C%E8%81%B4%E5%99%A8%E3%81%AE%E7%B4%B9%E4%BB%8B1/
パン屑javascript組み込んでみた後、サブメニューを作ってそのページを見てみた際に、パン屑の親階層が2重に表示されてしまいました。
サブメニューの作り方が悪いのでしょうか。
これを回避する方法はありますでしょうか。
よろしくお願いいたします。 -
#14
はじめまして。Jimdoサーポートさんより紹介されました。
まったくの素人なので説明通り行ったらうまく行きました。
ありがとうございます。 -
#15
こんにちわ。
パンくずないかなぁ～って思っていたら見つけました。
便利なものをありがとうございます。 -
#16
感謝(^^)
-
#17
早速設置しました。
ありがとうございます！ 
