今回はseesaaブログの新システム版でパンくずリストを設置する方法を紹介していきます。パンくずリストは多くのブログで設置されていて、これによって内部リンクにもなりますし、SEO対策としても効果が期待できます。
ちなみにパンくずリストというのはどのカテゴリーの中の記事なのか？という道案内的なリンク。
意外にクリックされることも多く、SEOやPV（ページビュー）の増加も期待できるかも。それでは早速設置をしていきましょう。
パンくずリストを設置する手順
まずはseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「HTML編集」を選択。
するとHTMLコードがズラリ並んでいるのでその中から次のコードを探します。このテンプレートだと17行目から22行目付近。
<header role="banner" class="l-header"> <div class="header"> <h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1> <p class="description"><% blog.description | nl2br | mark_raw -%></p> </div> </header>
このコードの下に次のコードを追加して下さい。
<% if:page_name eq 'article' -%> <div class="crumb"> <div itemscope itemtype="https://schema.org/BreadcrumbList"> <!-- 1.blog.title --> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="<% blog.page_url %>"> <span itemprop="name">ホーム</span> </a> <meta itemprop="position" content="1" /> </span> ＞ <!-- 2.category.name --> <% loop:list_article -%> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="<% article_category.page_url %>"> <span itemprop="name"><% article_category.name %></span> </a> <meta itemprop="position" content="2" /> </span> ＞ <!-- 3.article.title --> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <span itemprop="name"><% extra_title %></span> </a> <meta itemprop="position" content="3" /> </span><% /loop -%> </div> </div> <% /if %>
「ホーム」と書かれている部分は自由に「TOP」とかに変更してもOKです。
もし先にグローバルナビを設置している方はグローバルナビのコードの下に追加ね。
追加できたらこれで「保存」しておきます。これでパンくずリスト自体は設置されているはず。さらに位置の調整もしておきます。
パンくずリストの位置調整
さて、パンくずリストの位置調整。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「スタイルシート編集」というタブが選択されている事を確認。
スタイルシートのコードがズラリ並んでいますが、一番下までスクロールして次のコードを追加。
.crumb {
margin: 5px 0px 10px 0px;
font-size: 14px;
line-height: 18px;}ここの「margin」という部分で位置調整ができます。「上、右、下、左」と時計回りの順番で調整ができます。
「5px」という部分は上への余白。このマイナス値を大きくすればパンくずを上に持って行く事ができますし、マイナスではなく普通に〇〇pxとすれば下にずらす事が可能です。
また10pxとしている部分は下への余白なのでこの数値を大きくすれば記事コンテンツとの距離が開きます。
「font-size」で文字の大きさを変更する事ができますし、「line-height」で高さも調整できるのでお好みで数値を変更すればOKです。
以上Seesaaブログにパンくずリストを設置する方法でした。
コメント
度々すいません。私が言いたかったのは、
「””（トップページのURL）」と、
「””（カテゴリーページのURL）」を、
囲んでいる二重引用符を外せば上手くいくという事でしたが、
何度もコードが消えてしまい申し訳ございませんでした。
この情報が記事において参考になれば幸いです。それではまた。
UMA様
わざわざありがとうございます！記事内容でうまくいかない方がコメント見て解決することも多いので助かります。
何度も申し訳ございません。
「””」と「””」を、
囲んでいた二重引用符を外した所エラーが出なくなりましたの誤りでした。
今回は度々すいませんでした。今後もよろしくお願い致します。
これまた申し訳ございません…
コードを普通にコメント欄に入力してしまったので消えてしまっていますね…
(“”)と(“”)を囲んでいた、
二重引用符を外した所、構造化データテストツールでのエラーがなくなりました。
何だか「力技」で解決してしまった感があり、釈然としない部分もありますが、
ここまで辿り着いたのも管理人さんのおかげであるのは間違いありません。
今後もし何かあった際には質問させて頂くと思います。
その時はまたよろしくお願いします。
度々すいませんでした。
試しに、とを囲んでいた、
二重引用符を外してみた所今までのエラーが出なくなりました。
今回は貴重な時間を割いていただきありがとうございました。
もし今度何かあった際にはよろしくお願い致します。それではまた。
UMA様
返信ありがとうございます。えっと、itemフィールドの値のエラーがでるということはURLが出力されてないということだと思います。
パンくずコードの中に「<% blog.page_url %>（トップページのURL）」と「<% article_category.page_url %>（カテゴリーページのURL）」という２つの独自タグが入っていて、URLを出力してます。この２つの独自タグどちらかの記述が間違っている可能性があるかな？と思ってます。
エラーを見るとどちらかがエラーを出しているのか分かると思います。多分カテゴリーのURL部分でエラーがでてるんでないかな？と推測してます。なので一応調べてみたのですが、もしかしたら「<% article_category.page_url %>」ではなくて、「<% category.page_url %>」に変更したらうまくいくかもしれません？17行目の部分です。
後はコピーしたコードの中に半角のスペースが入っていたり、全角になってしまう部分がないか？など確認してみて下さい。時々何故か余計な変換がされていたりすることがあります。
ご対応ありがとうございます。
新たな記述で試してみたのですが、
なぜか最初の2つの、<span itemprop="itemListElement" itemscopeの部分だけ、
「item」フィールドの値は必須です。のエラーが出てしまいます。
このエラーが出ている人は多いようで、
検索候補のワードにも多く出てくるのですが、
いかんせん肝心な解決結果が書かれているページが見当たりません…
私のような初心者にとってはもうお手上げの状態です。
お忙しいところ大変恐縮ですが、引き続きご対応のほどよろしくお願い致します。
UMA様
返信ありがとうございます！すみません！1行目に条件分岐タグ（if:page_name eq ‘article’）を入れるの忘れてました。
修正したので再度確認してみて下さい。
念の為私のSeesaaのブログでチェックしましたが、構造化データテストツールでも問題ありませんでしたので大丈夫かと思います。
ご対応ありがとうございます。
早速参考にさせて頂こうと思ったのですが…
記述なさったコードを構造化データテストツールで検査をしてみると、
このページのコードが書かれている表の5から6行目の、
と、
15から16行目の同じ記述がなされている箇所で、
「item」フィールドの値は必須ですというエラーが出てしまいます。
また、記述なさったコードをSeesaaブログのHTML編集に貼り付けようとすると、
HTML編集の内容に不備がありました。訂正してください。とのエラーも…
このページのコードが書かれている表の最後の行の
に対応するタグが見当たりませんとの事でした。
お忙しいところ大変恐縮ですが、対応策を教えて頂けないでしょうか？
引き続きご対応よろしくお願い致します。