2015年7月1日

ぱんくずリスト機能の追加方法



 Bloggerに「ぱんくずリスト(Breadcrumbs)」を追加する方法ですが、英語の記事をそのまま利用できました。

ぱんくずリストを追加する方法



 先人がすでに実装済みでしたので、手順はこの記事に書いてあるままで実装できました。

コードをそのままコピペ(コピー&ペースト)すると、文字種(半角文字でなくなった)が変わってしまいますので貼り付け時には訂正が必要でした。

ステップ1

 <b:include..>をコメントアウトして指定のコードを追加

      <!-- <b:include data='top' name='status-message'/> -->
      <!-- ぱんくずリスト -->
      <b:include data='posts' name='breadcrumb'/>

ステップ2

コードの追加(追加する場所がわかりにくいかも):

手順:「<b:includable id='main' var='top'>」を検索(Ctrl-F:コントローキーを押したままFキーを押します)検索ウィンドウがでますのでウィンドウにキーワードを入力すると見つかります。

<b:includable...>が見つかったらその上に下記のコードを貼り付けます。

              <b:includable id='breadcrumb' var='posts'>
              <b:if cond='data:blog.homepageUrl == data:blog.url'>
                <!-- No Breadcrumb on homepage -->
              <b:else/>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <!-- breadcrumb for the post page -->
                  <p class='breadcrumbs'>
                  <span class='post-labels'>
                  <a expr:href='data:blog.homepageUrl' rel='tag'>ホーム</a>
                  <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;'> &#187;
                          <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                        </b:if>
                      </b:loop>
                    <b:else/>
&#187;Unlabelled
                    </b:if>
&#187; <span><data:post.title/></span>
                  </b:loop>
                  </span>
                  </p>
                <b:else/>
                <!-- ??? -->
                  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                    <!-- breadcrumb for the label archive page and search pages.. -->
                    <p class='breadcrumbs'>
                    <span class='post-labels'>
                    <a expr:href='data:blog.homepageUrl'>ホーム</a> &#187; アーカイブ&#65306;<data:blog.pageName/>
                    </span>
                    </p>
                  <b:else/>
                    <b:if cond='data:blog.pageType == &quot;index&quot;'>
                      <p class='breadcrumbs'>
                      <span class='post-labels'>
                      <b:if cond='data:blog.pageName == &quot;&quot;'>
                        <a expr:href='data:blog.homepageUrl'>ホーム</a> &#187; 全ての記事
                      <b:else/>
                        <a expr:href='data:blog.homepageUrl'>ホーム</a> &#187; ラベル&#65306;<data:blog.pageName/>
                      </b:if>
                      </span>
                      </p>
                    </b:if>                
                  </b:if>
                </b:if>
              </b:if>
              </b:includable>

ステップ3 

 CSSを追加します。

手順:</b:skin>を検索してその上(]]>の前です)にCSSコードを追加します。

/*  ぱんくずリスト
---------------------------------------- */
.breadcrumbs {
  padding:5px 5px 5px 0px;
  margin: 0px 0px 15px 0px;
  font-size:12px;
  line-height: 1.4em;
  border-bottom:1px solid #e6e4e3;
}

テンプレートを保存してエラーがなければ、ブログ上で表示を確認します。

ぱんくずリストの確認


記事の上部に、”ホーム>>「ラベル名」>>「記事タイトル」 ”として表示されるようになります。



ちょっとした機能を追加。