Jimdoでパンくずリストを簡単に追加する

※ 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等でお願いします。

コメント: 27 (ディスカッションは終了しました。)
  • #1

    athomes (水曜日, 13 10月 2010 15:47)

    またまた、有り難うございます。早速使わせて頂きました。便利です。

  • #2

    Be Beautiful (日曜日, 17 10月 2010 18:44)

    使わせていただきます。ありがとうございました。仮に不要になりこのスクリプトを削除する場合は、どうしたらいいのでしょうか?

  • #3

    final-audio-design (火曜日, 19 10月 2010 17:41)

    こんにちは。これは大変便利なので早速使わせていただこうとおもい、記入例通りに設置したのですが、第二階層のところが 重なって表示されてしまいます。これは何故なんでしょう?

  • #4

    atelierLien (水曜日, 20 10月 2010 17:40)

    始めまして。
    便利なものがあるんですね。早速使わせていただいております。
    分からないことだらけですので、いろいろと勉強させていただきます。

  • #5

    kataben (金曜日, 22 10月 2010 11:37)

    はじめまして。
    早速自分のページに利用させていただきました。
    パンくずが簡単に設置できないか色々と探していたので、大変役に立ちました。どうもありがとうございました。

  • #6

    飯若連 (水曜日, 03 11月 2010 10:51)

    使わせていただきました。今まで各ページにリンクを張りまくっていた労力を考えると、神様・仏様って感じです。ありがとうございました。

  • #7

    childcom05 (土曜日, 13 11月 2010 19:24)

    使わせて頂きました。とてもスマートで良いと思います!ありがとうございました。
    ところでjavaで作られたパンくずリストは、SEO的に効果があるのでしょうか?

  • #8

    宮西洋充 (月曜日, 15 11月 2010 19:47)

    SEO的な効果については、Javascriptで作られているため残念ながら期待はできません。

    あくまでユーザーフレンドリーという風に理解して頂ければと。

  • #9

    how-to (月曜日, 15 11月 2010 22:09)

    使わせて頂きました。ブログの投稿には反映されないようですが、これは何故なんでしょう?

  • #10

    水前寺 肥後太郎 (金曜日, 10 12月 2010 14:10)

    使わせていただきました!完璧です!ありがとうございますm(_ _)m

  • #11

    社会福祉法人まつみ福祉会 桜山荘 (金曜日, 21 1月 2011 11:11)

    こんにちわ。
    使わせていただきました!
    ありがとうございます。

  • #12

    kazemachi (木曜日, 03 3月 2011 17:54)

    Jimdoサイト作成時からあったらいいな〜と思っていました♪
    早速使わせていただきました。
    ありがとうございます。

  • #13

    studiofreshyokohama (金曜日, 23 9月 2011 19:41)

    はじめまして。
    スバラシですね。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

    pellet-stove (月曜日, 24 10月 2011 15:42)

    はじめまして。Jimdoサーポートさんより紹介されました。
    まったくの素人なので説明通り行ったらうまく行きました。
    ありがとうございます。

  • #15

    lucky-cookie-cherry (火曜日, 15 11月 2011 17:07)

    こんにちわ。
    パンくずないかなぁ~って思っていたら見つけました。
    便利なものをありがとうございます。

  • #16

    arc-ltd (土曜日, 24 3月 2012 22:40)

    感謝(^^)

  • #17

    niwas (金曜日, 11 5月 2012 10:13)

    早速設置しました。
    ありがとうございます!

  • #18

    milkey-makky (水曜日, 27 6月 2012 18:40)

    使わせていただきました!ありがとうございます!!

  • #19

    aoboshi (水曜日, 08 8月 2012 13:42)

    良いものをありがとうございます(^^)

  • #20

    jobnew (土曜日, 24 11月 2012 19:26)

    悩んでいました。かなりネットサーフィンして疲れたときにGOOD!助けていただきました。ありがとうございます。

  • #21

    羽島市 Weblink Project (月曜日, 17 12月 2012 20:33)

    パンくず設置させていただいています。
    ありがとうございます。

  • #22

    milky-fight (水曜日, 13 2月 2013 01:31)

    素晴らしすぎます

  • #23

    a-zyutaku (日曜日, 10 3月 2013 09:19)

    早速使わせてもらいました。ありがとうございます。

  • #24

    大鉄 寸 (木曜日, 09 5月 2013 18:02)

    使わせていただきました。手作業だと数か月もかかりそうだったので探していました。
    ありがとうございます。

  • #25

    sled1 (水曜日, 24 7月 2013 18:12)

    エクスプローラーで観覧するとパンくずが2重になって表示されます。

    なぜだかわかりますか?

  • #26

    hatarakudb (火曜日, 01 4月 2014 17:57)

    利用させていただきます。ありがとうございます。

  • #27

    Tahara (水曜日, 11 6月 2014 17:08)

    はじめまして。超初心者です。

    パンくずリストを入れるため、ヘッダー部分を編集にコピペしました。
    最初は、パンくずリストが表示されていたのに、急に表示されなくなりました。
    なぜでしょうか?
    リンクの色を変更した後に表示されなくなったように思います。

blog comments powered by Disqus