Bloggerで運営しているこのブログに、パンくずリストを設置しました。
パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのことを指します。通常はコンテンツの最上部に記載されます。
“通常はコンテンツの最上部に記載され”るとありますが、デザインの都合上、記事下に配置することにしました。
SEOにも効果があるそうなので、やっておいて損はないと思います。
方法については「Blogger パンくずリスト」と検索するとたくさん参考になるサイトが出てきますので、それを参考にするだけです。
今回参考にさせていただいたのはこちら二つのサイト。
これで一発です。
配置とデザインだけ少し変えたので、それだけ記載しておきます。コードについては上記のリンク先を参考にしてください。
記事下に表示する場合
まずは<data:post.body/>を探します。
その直下に、<div class="bread"><b:include data='posts' name='breadcrumb'/></div>を貼り付けます。
表示デザインをCSSでカスタマイズ
参考にさせていただいた記事に記載されているCSSを少しだけ変えました。
/* パンくずリスト
---------------------------------------------- */
.post-body .bread ul {
padding: 0;
line-height: 1.7;
}
.breadcrumb {
font-size: 90%;
}
.breadcrumb a {
color: #0088cc;
}
.breadcrumb li {
display: inline;
list-style-type: none;
}
.breadcrumb li:after {
content: " > ";
}
.breadcrumb li:last-child:after {
content: none;
}
上記のコードをHTML編集で追加します。
以上で、きちんと表示されました。あとは検索に反映されているかチェックしなきゃです。
ここから追記
自分のブログに適用しているコードを変更しました。
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> ≫ <span><data:blog.pageName/></span></div> <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'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> ≫ <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:if> </b:loop> ≫ <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> ≫ <span>Unlabelled</span> ≫ <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> ≫ <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> ≫ <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> ≫ <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>
