Seesaaブログにパンくずリストを設置する方法【新システム】

Seesaaブログにパンくずリストを設置する方法Seesaaブログアフィリエイトとカスタマイズ

今回はseesaaブログの新システム版でパンくずリストを設置する方法を紹介していきます。パンくずリストは多くのブログで設置されていて、これによって内部リンクにもなりますし、SEO対策としても効果が期待できます。

ちなみにパンくずリストというのはどのカテゴリーの中の記事なのか?という道案内的なリンク。

Seesaaブログにパンくずリストを設置する方法-1

意外にクリックされることも多く、SEOやPV(ページビュー)の増加も期待できるかも。それでは早速設置をしていきましょう。

パンくずリストを設置する手順

まずはseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「HTML編集」を選択。

Seesaaブログ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 %>
MEMO

「ホーム」と書かれている部分は自由に「TOP」とかに変更してもOKです。

もし先にグローバルナビを設置している方はグローバルナビのコードの下に追加ね。

追加できたらこれで「保存」しておきます。これでパンくずリスト自体は設置されているはず。さらに位置の調整もしておきます。

パンくずリストの位置調整

さて、パンくずリストの位置調整。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「スタイルシート編集」というタブが選択されている事を確認。

Seesaaブログスタイルシート編集画面

スタイルシートのコードがズラリ並んでいますが、一番下までスクロールして次のコードを追加。

.crumb {
margin: 5px 0px 10px 0px;
font-size: 14px;
line-height: 18px;}

ここの「margin」という部分で位置調整ができます。「上、右、下、左」と時計回りの順番で調整ができます。

「5px」という部分は上への余白。このマイナス値を大きくすればパンくずを上に持って行く事ができますし、マイナスではなく普通に〇〇pxとすれば下にずらす事が可能です

また10pxとしている部分は下への余白なのでこの数値を大きくすれば記事コンテンツとの距離が開きます。

「font-size」で文字の大きさを変更する事ができますし、「line-height」で高さも調整できるのでお好みで数値を変更すればOKです。

以上Seesaaブログにパンくずリストを設置する方法でした。

コメント

  1. しげぞう より:

    UMA様

    コメントありがとうございます。返信おそくなってすみません!
    data-vocabulary.org 構造化データは紹介して頂いたサイトで問題ありません。こちらの記事も参考に修正してみました。わざわざありがとうございました!

  2. UMA より:

    重複投稿になってしまっていたら申し訳ございません。
    投稿出来ているのか不安なので改めてコメント欄にて質問をさせて下さい。

    私は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ブログについては書かれていないので、
    管理人さんのブログで紹介して頂ければ非常に助かります。

    お忙しいところ大変恐縮ですが、ご対応のほどよろしくお願い致します。

  3. みむ より:

    昨日、はじめまして、とご挨拶したのですが、以前にもリンクを貼らせていただいた報告をしておりました・・・大変失礼しました。
    基本的にリンクフリーとの事、承知しました!
    ブログのカスタマイズはとても楽しいですね^^こちらこそ、今後もお世話になりたいと思います。よろしくお願いいたします。

  4. しげぞう より:

    みむ様

    わざわざありがとうございます。基本的にリンクフリーですので自由にリンクお願いします。私もありがたいです(^^)今後ともどうぞよろしくお願い致します。

  5. みむ より:

    はじめまして。
    こちらの記事のリンクをはらせて頂きましたので、ご報告いたします。
    私の認識違いや、不愉快な点等ありましたら、削除・訂正させていただきますので、
    お手数をおかけしますが、ご連絡いただければと思います。
    いつもありがとうございます。

  6. けけ より:

    しげぞう様

    いつもお世話になっております。
    早急なご回答をいただきありがとうございます。
    htmlの詳細、把握致しました。

    また、的確なアドバイスまでいただきありがとうございます。
    現状カテゴリーが1つしかないので、
    カテゴリーページの必要性を見直しておりましたが、
    サイトの構成も考えて、カテゴリーを増やすか検討したいと思います。

    ご丁寧にありがとうございました!

  7. しげぞう より:

    けけ様

    コメントありがとうございます。HTMLに追加したコードからカテゴリーを表示する部分を削除すれば可能です。

    <a href="<% article_category.page_url %>" itemprop="url">
    <span itemprop="title"><% article_category.name %></span></a> >

    上記がカテゴリー部分を表示するコードになります。

    ただ、パンくずの目的としてカテゴリーへのリンク、記事へのリンク、トップページへのリンク、それから構造化をGoogleへ伝える物でもあるため、カテゴリーはあった方が良いかもとは思います。個人的な意見ですので、けけ様の思うようにやってみても良いと思います。それによって順位が大きく下がるとかそういう事ではないので。

  8. けけ より:

    しげぞう様

    いつもお世話になっております。
    度々申し訳ございません。
    こちらでも質問させてください。

    パンくずリストの設定をさせていただき、
    無事表示もされるようになったのですが、
    1点変更が効くかどうかのご相談です。

    現状の表示ですと、
    トップ>カテゴリー>記事
    という形になっておりますが、
    カテゴリーの部分の削除は可能でしょうか?

    カテゴリーを使用していないのですが、
    カテゴリー自体を消すことは難しいようで、
    パンくずリストの経由からカテゴリーを抜くことができればと思い、
    ご相談させていただきました。

    度々申し訳ございませんが、
    ご教授いただけますと幸いです。

    よろしくお願いいたします。

  9. しげぞう より:

    らら~な様

    勘違いすみません(笑い)。ブログの背景色の変更とフッターの広告の横並びという2点でいいですか?この2点に関しては記事にしてます。
    Seesaaブログの背景色を変更する方法【新システム】
    シーサーブログに広告横並び(ダブルレクタングル)の広告を設置する方法

    上記の部分でできない部分があればまたコメント下さい。よろしくお願いします。

  10. らら~な より:

    すみません!言葉足らずでした!全体の背景を画像に変更する方法です。
    いろいろ教えて頂いてありがとうございます!
    後、もう一つだけ教えて頂きたい事があります。
    貼り付けた高校をフッターの部分に横並びで配置したいのですが、その方法が分かれば教えて頂けないでしょうか??

タイトルとURLをコピーしました