英語でパンくずリストは「Breadcrumb」または「Breadcrumb List」。
そのまま直訳ですね。
パンくずリストはgoogleアドセンスの審査を合格するにもあった方がいいと言われています。
「Vaster2」には元々パンくずリストがあるのですが、ラベルの最後のひとつしか表示されず他のラベルも表示したいとのリクエストがありましたのでお答えしたいと思います。
パンくずリストとは？
端的に言うとウェブサイトの中で今どこのページを見ているかを示すもの。
ウェブサイトをツリー構造でカテゴリ分けして読者が今どこの階層を閲覧しているのか把握しやすくした上で、各階層に貼られたリンクに直接ジャンプできるためサイト巡回しやすくなる利点がある。
サイトのユーザビリティが上がることによりGoogleさんからの評価も高くなるのでSEOの観点からもぜひ導入しておきたい機能というわけです。
「Vaster2」のパンくずリストについて
「Vaster2」のパンくずリストは「ホーム」と「一番最後のラベル」だけが表示されます。
これは製作者様が作りそこなったわけではなく「Blogger」のラベルの仕様がいまひとつ使いにくいと言うところからきており「Bloggerのラベル機能」はそもそもカテゴリ分けができないのと、並び順を変えることができないことに起因しています。
Bloggerで「パンくずリスト」を導入する場合、ラベルを利用していますので、記事の一番上に「パンくずリスト」と「記事のラベル一覧」を表示しても全く同じ内容になってしまうからです。
そういう事情からBloggerにおける「パンくずリスト」は「疑似パンくずリスト」になってしまい、あくまで見た目上の「パンくずリスト」にしかなりえない残念なものになっています。
(;^ω^)
そういう訳でラベルと同じ内容になるなら最後のひとつだけ表示にした方が潔くあると私は思います。
サイトのデザイン的な意味合いでも無いよりはあった方がいいよね程度のものと割り切って導入してください。
カスタマイズ方法
まずは、
<!--記事ページのパンくず-->
まずはこの部分を検索してください。その下に続く、
<!--記事ページのパンくず-->
<ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
<span itemprop='title'>
Home
</span>
</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 == "true"'>
<li>
<a expr:href='data:label.url' itemprop='url' rel='tag'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
</li>
</b:if>
</b:loop>
<b:else/>
</b:if>
</b:loop>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!--カテゴリ アーカイブのパンくず-->
<ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
<span itemprop='title'>
Home
</span>
</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 == "true"'>
<li>
<a expr:href='data:label.url' itemprop='url' rel='tag'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
</li>
</b:if>
</b:loop>
<b:else/>
</b:if>
</b:loop>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!--カテゴリ アーカイブのパンくず-->
上記の赤文字の部分を下記と差し替えます。
<ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
»
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
<b:if cond='data:label.isLast != "true"'> » </b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</ul>
<b:else/>
差し替えるとパンくずリストに全部のラベルが出るようになってると思います。<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
»
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
<b:if cond='data:label.isLast != "true"'> » </b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</ul>
<b:else/>
パンくずリストのデザインを変える
ちょっとシンプルすぎるので少しデザインを変えたいと思います。
CSSの記述の中にある
/* パンくずリスト
まずはこの部分を検索してください。まずは、
/* パンくずリスト
--------------------------------------- */
.breadcrumb-wrapper {
margin: 30px 0 15px;
}
.breadcrumb {
padding:0 !important;
}
.breadcrumb a {
color: #666;
font-size:13px;
text-decoration:none;
}
.breadcrumb li {
display: inline;
list-style-type: none;
}
.breadcrumb li:after {
content: " > ";
}
上記を全削除します。--------------------------------------- */
.breadcrumb-wrapper {
margin: 30px 0 15px;
}
.breadcrumb {
padding:0 !important;
}
.breadcrumb a {
color: #666;
font-size:13px;
text-decoration:none;
}
.breadcrumb li {
display: inline;
list-style-type: none;
}
.breadcrumb li:after {
content: " > ";
}
消すのが不安な場合は「*/」の位置を一番下の行まで移動させてコメント化してもいいです。
CSSに下記を追記してください。
.breadcrumb
{
padding:5px 5px 5px 15px!important;margin:0 0 15px;border:1px solid #E0E0E0;-moz-box-shadow:0 2px 4px #E7E7E7;-webkit-box-shadow:0 2px 4px #E7E7E7;font-size:80%;box-shadow:0 2px 4px #E7E7E7;background-color:white;overflow:hidden
}
{
padding:5px 5px 5px 15px!important;margin:0 0 15px;border:1px solid #E0E0E0;-moz-box-shadow:0 2px 4px #E7E7E7;-webkit-box-shadow:0 2px 4px #E7E7E7;font-size:80%;box-shadow:0 2px 4px #E7E7E7;background-color:white;overflow:hidden
}
Bloggerでパンくずリストを導入する場合の注意点はラベルをあまりつけすぎないこと。
多くても３つくらいまでにしましょう。
そうしないと元々疑似的にパンくずリストっぽくしてるだけなので階層構造として支離滅裂になりかねないからです。
並びは文字順になるのでなるべく階層構造になるようなラベルの名前づけを意識してつけるとそれっぽくなります。
ここまで記事を読んでいただき感謝です♪
それではまた次回！
