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. しげぞう より:

    らら~な様

    返信ありがとうございます。無事に反映されてよかったです!背景画像というのはこのパンくずリストの背景でいいですか?もしこの部分の背景に画像を設定する場合は先に使いたい画像をアップロードして画像のURLを調べておく必要がありますので、こちらの記事を参考に画像のURLを準備して下さい。
    シーサーブログの画像URLを調べる方法

    画像のURLをメモ帳などに一度貼り付けて用意しておきます。それで、管理画面から「デザイン」⇒「デザイン設定」⇒適応中のデザインと進み、スタイルシート(CSS)の編集というタブになっていると思いますので、スタイルシートの一番下に次のコードを追加して下さい。

    .crumb {
      background-color:#eee;  /* 背景色を変更する場合に追加 */
      background-image: url("ここに画像のURL"); /* 画像を使う場合に記述*/
      background-repeat: no-repeat;  /* 画像の繰り返し無し */
    }

    一応背景色を変更するコードも入れてますが、背景に画像を設置する場合には必要はありません。画像のURLを入れる部分に画像のURLを入れてスタイルシートの保存をして確認してみて下さい。

  2. らら~な より:

    ありがとうございます!確認できました。トップページしか見ていなかったので、そもそも確認する場所が間違っていた様です。
    後、もしよろしかったら、背景画像の添付の方法も教えて頂けないでしょうか?

  3. しげぞう より:

    らら~な様

    コメントありがとうございます。私も今確認してみましたが、反映されていますね。パンくずリスト自体はトップページでは表示されませんので、個別記事を開いて確認してみて下さい。個別記事でパンくずが表示されているのが確認できると思います。

  4. らら~な より:

    いつもありがとうございます。
    何回かためした見たんですが、反映されなかったので、コードを外した状態にしていました。

    今、コード入れ直してみましたが、やはり反映されていません。。。
    適応中のデザインを選んで編集しているので、間違いはないと思います!

    お手数ですが、ご教授頂けたらと思います。

  5. しげぞう より:

    らら~な様

    返信ありがとうございます。今確認したのですが、設置するハズのコードが見当たりません。もしかして適応中のデザインを間違っていないでしょうか?Seesaaブログの管理画面からデザイン⇒デザイン設定と進み、テンプレート名(デザイン名)が並んでいると思います。

    その横に「設定」という部分で「●」が付いているのが現在適応中のデザインです。HTMLなどを変更したデザインが適応中かを確認してみて下さい。

    それと今からちょっと用事ででかけますので、返信はまた明日になってしまうと思います、すまません!とりあえず確認だけしてみて下さい。

  6. らら~な より:

    返信ありがとうございます。

    1、2共にやってみましたが、上手く反映されません。
    もしかしたら、僕の操作が違うのかもしれませんが。。。何分初心者なもので。

    後、背景を画像に変えようとチャレンジしてみましたが、こちらも上手くいきません。。。
    どうか、アドバイス頂けたら幸いです。
    ちなみに、デザインはシンプルCレッド両カラムを使用しています。

  7. しげぞう より:

    らら~な様

    コメントありがとうございます。まずは2つの方法がありますので試して見て下さい。

    1.パンくずを設置したブログを表示させて「Ctrl」と「F5」を一緒に押してリロード。以前のデータが残っている場合がありますので、これでリロードして確認をして下さい。

    2.一度設置したコードを外して保存。それで再度貼り付けて保存。これで反映される場合があります。

    以上2点を試しても表示されない場合にはお手数ですが、URLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  8. らら~な より:

    いつも参考にさせて頂いています。
    新システムでパンくずリストを設定しましたが、反映されませんでした。

    手順の様にHTMLコード編集が面の17行付近のコードの下に、コードを挿入したのですが…
    始めたばかりなのですが、考えられる反映されない理由について、何かありますでしょうか??

  9. Chisapon より:

    しげぞう様

    お返事ありがとうございます。
    下記記事で全体リンク設定で色を青に変えてからその後部分的な色変更しかしていなかったためパンくずリストやタグのリンク色が青のままだったようです(^^;)
    その後全体リンク色のカラーコードを変えたら無事に修正できました!

    いつもありがとうございます。また質問をさせていただくこともあるかと思いますが、今後ともよろしくお願い致します!

  10. しげぞう より:

    Chisapon様

    返信ありがとうございます。リンクの色は「全体のリンクの色の変更」と「部分的なリンクの色」両方設定できます。全体のリンクの色を変更すれば記事のコンテンツやサイドバーなどブログ全体のリンクの色を一括で変更する事ができますし、部分的なリンクの色の変更であればサイドバーだけとか、記事内だけのリンクの色を変更をする事ができます。

    まずは先に全体のリンクの色を変更してみる事をおすすめします。ブログは旧システムか新デザインシステムかでコードが違ってきますので、一度試して見てください。
    Seesaaブログのフォントや文字のカスタマイズ【新システム】

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