Bloggerのパンくずリストを作成する。[Widgetバージョン2][schema.orgを利用]

最新widget(バージョン2)へのパンくずリストのつけ方

GoogleBloggerの最新widget(バージョン2)でパンくずリストの作り方を紹介します。

Bloggerのパンくずリストについて

bloggerのパンくずリストを作りたくて調べると先人たちの解説が出てきます。Bloggerのウィジェットバージョン1を使っている人は、先人たちのパンくずリストをコピペするだけで簡単にパンくずを導入できます。

パンくずリストの問題点

問題は、ウィジェットバージョン2の時です。
ウィジェットバージョン２は、widget内部が変わっているため、これまでのパンくずを使うことができません。また、Google推奨のhttp://schema.org/を使ってパンクズを作っている人もまだ少ないのが現状です。そこで、試行錯誤をしてパンくずをつけましたので、ここに記録します。

 schema.orgを利用してBlogger(widgetバージョン2)にパンくずリストつける

ウィジェットの中にコードを加えます。
まず検索機能で  <div class='post'>を探します。
その下を改行して、下に示すコードをコピペ入力します。

パンくずリストのHTMLの基本構成

ラベルのリストを一列表示にして、『>>』を間に挟む

1. <div class='post'>
2. 
   
3. <!--パンクズリスト 以下をコピペ-->
4. <b:if cond='data:view.isSingleItem'>
5. <div class='breadcrumbs'>
6. <b:if cond='data:post.labels'>
7. <ol class='breadcrumb' itemid='id-breadcrumbs' itemprop='Breadcrumb' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
8. <li itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
9. <a expr:href='data:blog.homepageUrl' itemprop='item' itemtype='http://schema.org/Thing'><span itemprop='name'>ホーム</span></a>
10. <meta content='1' itemprop='position'/>
11. </li>
12. <b:loop index='i' values='data:post.labels' var='label'>
13. <li itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
14. 
    
15. <p> >> <!--ここを編集することで >> を変えられる-->
16. 
    
17. <a expr:href='data:label.url' itemprop='item' itemtype='http://schema.org/Thing'><span itemprop='name'><data:label.name/></span></a> </p>
18. <b:if cond='data:i == 0'>
19. <meta content='2' itemprop='position'/>
20. </b:if>
21. <b:if cond='data:i == 1'>
22. <meta content='3' itemprop='position'/>
23. </b:if>
24. <b:if cond='data:i == 2'>
25. <meta content='4' itemprop='position'/>
26. </b:if>
27. <b:if cond='data:i == 3'>
28. <meta content='5' itemprop='position'/>
29. </b:if>
30. <b:if cond='data:i == 4'>
31. <meta content='6' itemprop='position'/>
32. </b:if>
33. <b:if cond='data:i == 5'>
34. <meta content='7' itemprop='position'/>
35. </b:if>
36. <b:if cond='data:label.isLast != &quot;true&quot;'/>
37. </li>
38. </b:loop>
39. </ol>
40. </b:if>
41. </div>
42. </b:if>
43. <!--パンクズリストここまで-->

パンくずリストのCSS

以下の内容をCSSに貼り付ける。

1. 
   
2. /*****パンクズリスト********/
3. .breadcrumb:last-child {
4. color: inherit;
5. }
6. .breadcrumbs p {
7. margin-block-start: 0px;
8. margin-block-end: 0px;
9. margin-inline-start: 0px;
10. margin-inline-end: 0px;
11. }
12. .breadcrumbs ol{
13. list-style:none; /* olが数字を付けることをキャンセル */
14. display: inline-block;
15. 
    
16. 
    
17. margin-block-start: inherit;
18. margin-block-end: inherit;
19. margin-inline-start: inherit;
20. margin-inline-end: inherit;
21. padding-inline-start: inherit;
22. 
    
23. 
    
24. margin-block-start: 0px;
25. margin-block-end: 0px;
26. margin-inline-start: 0px;
27. margin-inline-end: 0px;
28. padding-inline-start: 15px;
29. }
30. .breadcrumbs li{
31. display: inline-block;
32. }
33. /*****パンクズリストCSSここまで********/

入れた後のウィジェット内部はこんな風になります。

ー記事をシェアするー

B!