今回は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ブログにパンくずリストを設置する方法でした。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
度々すいません。私が言いたかったのは、
「””（トップページの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編集の内容に不備がありました。訂正してください。とのエラーも…
このページのコードが書かれている表の最後の行の
に対応するタグが見当たりませんとの事でした。
お忙しいところ大変恐縮ですが、対応策を教えて頂けないでしょうか？
引き続きご対応よろしくお願い致します。
UMA様
コメントありがとうございます。返信おそくなってすみません！
data-vocabulary.org 構造化データは紹介して頂いたサイトで問題ありません。こちらの記事も参考に修正してみました。わざわざありがとうございました！
重複投稿になってしまっていたら申し訳ございません。
投稿出来ているのか不安なので改めてコメント欄にて質問をさせて下さい。
私はSeesaaブログを利用しています。
管理人さんのブログのカスタマイズをいつも参考にさせて頂いています。
そこでなんですが、パンくずリストについて質問があります。
・参考にしたページ
https://makipapa.seesaa.net/article/seesaa_schemaorg_breadcrumb.html
上記のページにあるように、
先日Google Search Consoleから警告メールを受け取りました。
中身は「今のパンくずリストでは2020年4月6日以降に問題があるよ」との事。
要は、管理人さんのブログで紹介されているパンくずリストは、
2020年4月6日以降にはGoogleに認識されないという問題が発生するとの事でした。
具体的に言うと、
data-vocabulary.org 構造化データの利用に問題があり、
今のうちにschema.orgに沿った記述方法に変更しなくてはいけないようです。
そこでなんですが、管理人さんのブログで、
schema.orgに沿った記述方法を紹介して頂けないでしょうか。
schema.orgに沿った記述方法は上記の参考にしたページにしか、
Seesaaブログについては書かれていないので、
管理人さんのブログで紹介して頂ければ非常に助かります。
お忙しいところ大変恐縮ですが、ご対応のほどよろしくお願い致します。
昨日、はじめまして、とご挨拶したのですが、以前にもリンクを貼らせていただいた報告をしておりました・・・大変失礼しました。
基本的にリンクフリーとの事、承知しました！
ブログのカスタマイズはとても楽しいですね＾＾こちらこそ、今後もお世話になりたいと思います。よろしくお願いいたします。
みむ様
わざわざありがとうございます。基本的にリンクフリーですので自由にリンクお願いします。私もありがたいです(^^)今後ともどうぞよろしくお願い致します。
はじめまして。
こちらの記事のリンクをはらせて頂きましたので、ご報告いたします。
私の認識違いや、不愉快な点等ありましたら、削除・訂正させていただきますので、
お手数をおかけしますが、ご連絡いただければと思います。
いつもありがとうございます。
しげぞう様
いつもお世話になっております。
早急なご回答をいただきありがとうございます。
htmlの詳細、把握致しました。
また、的確なアドバイスまでいただきありがとうございます。
現状カテゴリーが1つしかないので、
カテゴリーページの必要性を見直しておりましたが、
サイトの構成も考えて、カテゴリーを増やすか検討したいと思います。
ご丁寧にありがとうございました！
けけ様
コメントありがとうございます。HTMLに追加したコードからカテゴリーを表示する部分を削除すれば可能です。
上記がカテゴリー部分を表示するコードになります。
ただ、パンくずの目的としてカテゴリーへのリンク、記事へのリンク、トップページへのリンク、それから構造化をGoogleへ伝える物でもあるため、カテゴリーはあった方が良いかもとは思います。個人的な意見ですので、けけ様の思うようにやってみても良いと思います。それによって順位が大きく下がるとかそういう事ではないので。
しげぞう様
いつもお世話になっております。
度々申し訳ございません。
こちらでも質問させてください。
パンくずリストの設定をさせていただき、
無事表示もされるようになったのですが、
1点変更が効くかどうかのご相談です。
現状の表示ですと、
トップ＞カテゴリー＞記事
という形になっておりますが、
カテゴリーの部分の削除は可能でしょうか？
カテゴリーを使用していないのですが、
カテゴリー自体を消すことは難しいようで、
パンくずリストの経由からカテゴリーを抜くことができればと思い、
ご相談させていただきました。
度々申し訳ございませんが、
ご教授いただけますと幸いです。
よろしくお願いいたします。
らら～な様
勘違いすみません（笑い）。ブログの背景色の変更とフッターの広告の横並びという2点でいいですか？この2点に関しては記事にしてます。
⇒Seesaaブログの背景色を変更する方法【新システム】
⇒シーサーブログに広告横並び（ダブルレクタングル）の広告を設置する方法
上記の部分でできない部分があればまたコメント下さい。よろしくお願いします。
すみません！言葉足らずでした！全体の背景を画像に変更する方法です。
いろいろ教えて頂いてありがとうございます！
後、もう一つだけ教えて頂きたい事があります。
貼り付けた高校をフッターの部分に横並びで配置したいのですが、その方法が分かれば教えて頂けないでしょうか？？