bloggerにパンくずリストを設置する簡単な方法3ステップ

この記事には、アフィリエイト広告を利用しています。

スポンサーリンク

blogger パンくずリスト
By: Acid Pix

海外には色々なbloggerテンプレートが配布されていて、デザインが超かっこいいものばかりですが、パンくずリストが設置されていない事が多いです。

実際に、パンくずリストの設置方法が分からずに困っている人も多いのでは、と思います。

そこで今回は、bloggerにパンくずリストを設置する方法を紹介していきます。

元ネタは、英語ページの「Breadcrumb for Blogger」と言う記事ですが、ulタグを使っていないし、デザインが微妙なので、コードは若干変えています。

それでは、やっていきましょう。

スポンサーリンク

bloggerにパンくずリストを設置する方法

まずは、管理画面に入り、「テンプレート」→「HTMLの編集」からテンプレートのコード画面に行きましょう。

そして、テンプレートの中から、以下のコードを見つけて下さい。

<b:include data=’top’ name=’status-message’/>

上のコードの見つけ方は、キーボードの「Ctrl」と「F」を同時押しすれば検索窓が出てくるので、そこに「status」と入力して、Enterを押しまくれば見つかります。

blogger-pankuzu1

上記のコードを見つけたら、そのすぐ下に、以下のコードをコピペします。

<b:include data=’posts’ name=’breadcrumb’/>

上手くいけば、下の画像のようになるはずです。

もし、あなたのテンプレートに「<b:include~name=’status-message’」のような記述がなければ、下の画像の様に「ブログの投稿」や「<b:includable id=’main’~>」と言う記述の少し下の所にコピペすると、上手くいきます。

blogger-pankuzu3-min

上記のコードをコピペした後は、以下のコードをテンプレートから探しましょう。

<b:includable id=’main’ var=’top’>

このコードを見つけた後に、少し下にスクロールしていくと、下の画像のように「<b:includable id=’~>」という記述がたくさん書かれている部分があります。

blogger-pankuzu4-min

この部分を見つけたら、「</b:includable>」と「<b:includable id=’~>」の間に以下のコードをコピペします。

上の例だと、4084行目と4085行目の間になります。

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<ul class=’breadcrumb’>
<li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast == &quot;true&quot;’>
<li><a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if>
<li><data:post.title/></li>
</b:loop>
</ul>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<ul class=’breadcrumb’>
<li> <a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><data:blog.pageName/></li>
</ul>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<ul class=’breadcrumb’>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><data:blog.pageName/></li>
</ul>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

上手くいけば、こんな感じになっているはずです。

ちゃんと、</b:includable>の真下にコピペしていますね。

blogger-pankuzu5-min

パンくずリストのCSSを記述する

以上で一応、パンくずリストは機能できますが、デザインがめちゃくちゃなので、デザインをカッコよくするために、CSSに以下のコードを追加します。

ちなみに、bloggerのCSSの編集部分は、テンプレートの中で、青色の文字で記述されている場所になります。

よく分からない人は、下の例のように、]]</b:skin>」の部分の真上にコピペすると良いです

blogger-pankuzu6-min

CSSにコピペするコードは、これです。

/* パンくずリスト */
.breadcrumb {
font-size:13px;
}
.breadcrumb a {
#ccc
}
.breadcrumb li {
display: inline;
list-style-type: none;
}
.breadcrumb li:after {
content: ” > “;
}
.breadcrumb li:last-child:after{
content: none;
}

これで、bloggerのパンくずリストは完成です。

冒頭で書いた様に、元ネタの英語ページは、ulタグを使っていかったり、パンくずの「TOPタイトル > 記事タイトル」の「>」のデザインにクセがあったりしましたが、そこを修正しました。

タイトルとURLをコピーしました