Seesaaブログに「パンくずリスト」を設置してみよう!
2015年08月31日

Seesaaブログに「パンくずリスト」を設置してみよう!

記事の上に「パンくずリスト」をつけてみました!
パンくずリストって? 僕も昨日知った言葉です。でも見れば「ああ、これか!」と分かるはず。

トップページからの閲覧では表示されないようになっているので、記事名をクリックしてみてください。

image.png


こんな感じで、TOP>カテゴリー名>記事名と表示されるようになりました!
ユーザーにも分かりやすく、SEOにもいいらしいです。

「パンくず」というのは、ヘンゼルとグレーテルが迷わないようパンくずを道しるべにしたエピソードに由来するそうです。……ちょっと無理矢理な感じもします(笑)

一番やりたかったのは、カテゴリーで記事を集めてくるページ(サイドバーのカテゴリーの欄からカテゴリーをクリックするなど)で、カテゴリー名を表示することです。記事名は見れば分かりますが、カテゴリー名はどこにも表示されず不便かと思いましたので。

また、これに伴い、一つ未来の記事と一つ過去の記事を表示する部分を、記事の下に持ってきました。


参考にしたサイト:

記事上のナビゲーションを記事下に移動するカスタマイズ | アフィリエイトで稼ぐ方法を全部話そうと思う
http://affiliate150.com/remove-navi

シーサーブログにパンくずリストを設置する方法 | アフィリエイトで稼ぐ方法を全部話そうと思う
http://affiliate150.com/set-up-breadcrumb

なお、上記で紹介されている方法をそのまま実行しても、カテゴリーのページにはパンくずリストが出てこなかったので(ブログのテンプレートの問題?)、このブログには以下の記述も追加しています。

<!-- Content -->の下、<% loop:list_article -%>の上に、

<% if:page_name eq 'category' -%>
<div class="crumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>" itemprop="url">
<span itemprop="TOP">TOP > <% category.name %>
</div>
<% /if %>

この調子でブログをカスタマイズして、フリー素材コーナーはこちらに移転してこようと思ってます!
スポンサーリンク
Seesaaブログに「パンくずリスト」を設置してみよう!
先月の人気記事 TOP5