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

この記事はSeesaaブログの新システム版です。旧システムを利用している方はこちらの記事を参考に。
シーサーブログにパンくずリストを設置する方法

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

ちなみにパンくずリストというのはこんなやつです。

パンくずリスト-1

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

パンくずを設置する手順

まずはseesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒適応中のデザインタイトルをクリック。

新デザインパンくず-1

切り替えタブで「HTML編集」をクリック。

新デザインパンくず-2

すると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">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<% blog.page_url %>" itemprop="url">
<span itemprop="title"><% blog.title %></span></a> >
<% loop:list_article -%>
<a href="<% article_category.page_url %>" itemprop="url">
<span itemprop="title"><% article_category.name %></span></a> > 
<span itemprop="title"><% extra_title %></span></span>
<% /loop -%>
</div>
<% /if %>

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

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

さて、パンくずリストの位置調整をしていきましょう。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒適応中のデザインタイトルをクリック。

新デザインパンくず-1

次の画面で今度は「スタイルシート編集」というタブが選択されている事を確認。

新デザインパンくず-3

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

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

ここの「margin」という部分で位置調整ができます。「上、右、下、左」と時計回りの順番で調整ができますよ。「-10」という部分は上への余白。このマイナス値を大きくすればパンくずを上に持って行く事ができますし、マイナスではなく普通に〇〇pxとすれば下にずらす事が可能です。また10pxとしている部分は下への余白なのでこの数値を大きくすれば記事コンテンツとの距離が開きます。

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

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

Seesaaブログにパンくずリストを設置する方法【新システム】”に28件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. みむ

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

  2. しげぞう 投稿作成者

    みむ様

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

  3. みむ

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

  4. けけ

    しげぞう様

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

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

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

  5. しげぞう 投稿作成者

    けけ様

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

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

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

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

  6. けけ

    しげぞう様

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

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

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

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

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

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

  7. しげぞう 投稿作成者

    らら~な様

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

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

  8. らら~な

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

  9. しげぞう 投稿作成者

    らら~な様

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

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

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

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

  10. らら~な

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

  11. しげぞう 投稿作成者

    らら~な様

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

  12. らら~な

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

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

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

  13. しげぞう 投稿作成者

    らら~な様

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

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

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

  14. らら~な

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

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

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

  15. しげぞう 投稿作成者

    らら~な様

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

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

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

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

  16. らら~な

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

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

  17. Chisapon

    しげぞう様

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

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

  18. しげぞう 投稿作成者

    Chisapon様

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

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

  19. Chisapon

    しげぞう様

    お礼のお返事が遅くなりましてすみません。

    パンくずリストの位置調整、右サイドの余白ともに、教えて頂いた通りのやり方で無事解決致しました!ありがとうございます。サイドバーの余白は「.side」で変更するのですね。また1つ勉強になりました。このシンプルAのテンプレだとちょっとぎゅっと詰まっているような感じがしましたので、メインコンテンツのサイズとヘッダーのサイズも併せて変更してみました!いつも本当にありがとうございます。

    追加でもう1つありまして、何度も申し訳ないのですが、パンくずリストとSeeSaa内のタグのリンク色が青のままなので、こちらの色の変更もしたいのですが、コードはどのようなかたちにすれば良いでしょうか?もしすでに記事内で既出でしたらすみません。

    どうぞよろしくお願い致します。

  20. しげぞう 投稿作成者

    Chisapon様

    返信ありがとうございます。ブログのソースを見させて頂き原因も分かりましたので、書いてみたいと思います。

    まず、パンくずの位置調整を「margin」を使って4つの数値で書いてますが、4つの数値を半角のスペースを空けて書いて行きます。Chisapon様のスタイルシートにはおそらく「半角」のスペースと「全角」のスペースが混じっているのではないかと思いますので、確認をして全部半角のスペースにしてみてください。

    次に背景画像設置後の余白ですが、記事で紹介したのは全体の左右の余白ではなく、記事本文の部分の左右の余白になります。現在この記事本文の部分の左右の余白は反映されてます。サイドバーの右側の余白については書いてませんでしたね。説明不足すみません。

    右のサイドバーの余白に関しては次のコードをスタイルシートに追加して試して下さい。

    .side {
        margin-right: 15px;
    }

    数値はお好みで変更して下さい。もしこれでも反映されない場合にはお手数ですが再度コメント頂けると助かります(๑•̀ㅂ•́)و✧

  21. Chisapon

    しげぞう様

    ご返信ありがとうございます。
    パンくずの位置調整ができないというブログはこちらです。まだ2記事しかありませんが…。

    背景画像を設置した際、右側の余白も反映されない状態です。
    左側はちゃんとしげぞうさんの記事通りCSSにコードを追加して余白がつくれました。

    スマホの広告に関しては、やはり難しいのですね…
    メインブログの方のコンテンツをもっと増やして、順位が上がってきたらWord Pressに引っ越した方がいいですね(*_*)
    アドバイスをありがとうございます!

  22. しげぞう 投稿作成者

    Chisapon様

    コメントありがとうございます。まず、1番目のパンくずの位置調整と2番目の余白の件ですが、原因の特定が難しいので、できればブログのURLを教えて頂けると助かります。もしかするとスタイルシートの途中にミスがあり、それ以降のコードが反映されないという事も考えられます。

    それと、スマートフォンの広告ですが、これはその広告の部分の要素というか名前を調べてCSSで非表示にする事で広告を消す事ができます。ただし、これはSeesaaブログのサービス側が定期的に要素というか名前を変更して対策しております。つまり、Seesaa側としてはスマートフォンの広告を消すというのはしてほしくないという事です。こちらでコードをいれてもすぐに対応されて、また広告が表示されるような感じになりますので、スマホの広告を消す過去のコードは使えないでしょう。

    無料でブログサービスを利用できるメリットはありますが、広告に関してはデメリットになる、それが無料ブログの特徴になります。

    なので、スマホの広告を消すよりもまずは集客できるブログにつくりあげて順位を上げ、上がった所でリダイレクトしてWordPressへ移行するような形にするのが良いかと思います。

  23. Chisapon

    しげぞう様

    こんにちは。
    いつもお世話になっております!

    今回シーサーの方で副サイトとしてミニブログを立ち上げました。
    新システムにはなかなか慣れませんがこちらの記事を参考に少しずつまたカスタマイズをしております。いつも申し訳ありませんがまた質問をさせてください。

    ①パンくずリストを設置した後、フォントサイズの変更は適応されたのですが、位置調整ができません。左に詰まっている状態なのですが左の数値を大きくしても(右の数値をマイナスにしても)元の位置から動かないのですが、位置だけ適応されないのは何か考えられる原因はありますでしょうか。

    ②背景に画像を設置した後、しげぞうさんの記事にもあるように右左が詰まっている状態だったので余白を設定したのですが、左側の余白だけ適応され右側(右サイドコンテンツ)だけ余白ができません。使っているデザインはシンプルAの右サイドバナーです。

    ③こちらは旧システムの時に始めたメインブログの方の話なのですが、スマートフォンページをいじることはできるのでしょうか?もともと入っている広告がありすぎて、調べて何度も消す作業をしたのですが消えません。。トップページの記事数も1記事のみで、最悪なスマホページなので何とかしたいのですが…。テーマ的にもターゲットはスマホ利用者が確実に多いと思うので対策をしてスマホでの流入数も上げたいと考えています。

    いつもすみません。
    もし何か良い方法をご存知でしたらご教示いただけると嬉しいです。よろしくお願い致します。

  24. しげぞう 投稿作成者

    新井様

    ご指摘ありがとうございます。画像は確認してみますね。アフィリエイト報酬も倍以上に伸びたという事で私も自分の事にように嬉しいです。わざわざ報告ありがとうございました。また何かあればコメント下さいませ。今後もよろしくお願い致します。

  25. 新井

    しげぞうさんへ
    おはようございます。

    このページのパンくずリストの位置調整って適応中のデザインタイトルをクリック
    の画像は旧システム版のですよね。

    デザイン名が
    スタイルシートタイトルに変わっていて、タブがなくなっていました。
    スタイルシートの編集だけに対応しているとわかるんですが
    画像が違うので混乱しました。

    時間があるときに新システム版の画像に張り変えると
    見やすくなると思います。

    話は変わるんですけど、
    しげぞうさんの変更のおかげで
    アフィリエイトの報酬が倍以上に伸びました! 
    いつもありがとうございます。

  26. 23

    しげぞうさん

    早速、コードを削除して再度コード追加を試してみたら表示されるようになりました。
    ありがとうございました!

  27. しげぞう 投稿作成者

    >23様

    コメントありがとうございます。コードがちょっと消えていて分からないのですが、一度追加したコードを削除し、「保存」それで再度コードを追加して「保存」。この処理で上手く反映できる場合があります。一度お試し下さい。

    もしダメな場合はコードの「 < 」とか「 > 」を全角で入力するとコメントでもそのまま表示できると思います。お手数ですがよろしくお願い致します。

  28. 23

    しげぞうさん

    いつも参考にさせて頂いています。
    ありがとうございます。
    トパックパスを設定しようとアドバイス通りにHTMLに下記のように追加しましたが、
    表示されません。なぜでしょうか?アドバイス宜しくお願いします。

    <a href="”>






    <a href="”> >

    <a href="”>