シーサーブログにパンくずリストを設置する方法

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

今回はシーサーブログにパンくずリストを付ける方法を紹介します。ブログはトップページやカテゴリー、過去記事、タグページ等沢山のページが存在しますよね。

パンくずリストは今自分がどの階層の記事を読んでいるのか道案内的な役割をしてくれますし、SEO対策としても有効です。

ちなみにシーサーブログでパンくずリストを設置するとこのように表示されます。

パンくずリスト-1

ブログタイトルの下にブログ名とカテゴリー名が表示されていますね。

パンくずリスト設置の方法

設置は非常に簡単ですが、使っているテンプレートによっては表示のされ方が違う場合もあるかもしれないので注意。

追記:カテゴリーが表示されなかったので訂正しました。(2015/05/30)。

まずはパンくずを設置する時に邪魔になるブログの上にあるナビゲーションを削除、移動しておく必要があるので次のカスタマイズを先にやっておきましょう。
記事上のナビゲーションを記事下に移動するカスタマイズ

記事上のナビゲーションの削除、移動ができたら再度「デザイン」⇒「コンテンツ」と進み「記事」をクリック。それで「記事」の「コンテンツHTML編集をクリック。

見出しタグ-8

コンテンツHTMLの中身を見ていくとこのすぐに<!– Content –>という部分があるので、この下に次のコードを入れます。

<% 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"><% article.subject %></span></span>
<% /loop -%>
</div>
<% /if %>

最後に「保存」をしてコンテンツHTMLの画面を閉じ、コンテンツ一覧画面に戻るので再度「保存」。これで個別ページを表示した時にトップページ、カテゴリー、記事タイトルというパンくずが表示されます。

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

パンくずを設置したので細かい位置調整の方法も紹介しておきます。シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリック。

見出しタグ-9

ここにデザインのCSSコードがズラリと並んでいるので次のコードを一番下に貼り付け。

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

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

「font-size」で文字の大きさを変更する事ができますし、「line-height」で高さも調整できるのでお好みで数値を変更して下さい。
Seesaaブログカスタマイズまとめページに戻る

シーサーブログにパンくずリストを設置する方法”に9件のコメントがあります。

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

  1. のんびり

    初めまして。
    コメント失礼致します。
    Seesaaブログ始めたばかりで、パンくず設置が出来ているか自分ではわからないので確認お願い出来ますでしょうか・・・。
    よろしくお願い致します。

  2. しげぞう 投稿作成者

    >新井様

    報告ありがとうございます!私も1つ勉強になりました。今Seesaaブログの新システムのカスタマイズ記事を書いているので参考にして記事を作成できます。本当にありがとうございました。今後もどうぞよろしくお願い致します。

  3. しげぞう 投稿作成者

    >新井様

    ホントだ!できました。カテゴリー表示できますね。ありがとうございます。この場合だと、「記事」⇒「HTML編集」で先に元々あるナビゲーションを削除、移動しておいて、最初の<!– Content –>という部分の下に次のコードを入れてみると上手くできました。バックアップは取っておいて試して見てください。

    <% if:page_name eq 'article' -%>
    <div class="crumb">
    <a href="<% blog.page_url %>">Top</a>>
    <% loop:list_article -%>
    <a href="<% article_category.page_url %>"><% article_category.name %>
    </a>><% article.subject %>
    <% /loop -%></div>
    <% /if %>

    これで確認してもらえますか?私のブログではこれで上手くカテゴリーも表示できました。

  4. 新井

     いえ、カテゴリー名を含ませることはできました。

    http://seo-blog1.seesaa.net/article/135258035.html
     
     に書いてあったんですが、しげぞうさんとは記入方法が違っていて
    「デザイン」-「コンテンツ」で「記事」をクリックしてHTMLをいじるやり方でした。
    これで問題なのはしげぞうさんの記事のナビゲーション移動や削除の仕方をやると
    パンくずリストが下に行ってしまうんです><
     書いている人が違うのでおかしくなるのは当たり前なんですけどね……。

     デザインから直接やってもHTMLのパンくずリストは機能しないらしいです。
    コンテンツから記事のHTMLをいじらないとっていうのが3つくらいありました。
    しげぞうさんならそこを何とかやったのかなーと思ったの
    で自分が何か間違っているのかと思ってました。

  5. しげぞう 投稿作成者

    >新井様

    コメントありがとうございます。確かにホームページタイトル>記事タイトルになりますね。気が付きませんでした。早速カテゴリー名を入れたパンくずにしようと思ってやってみたのですが、条件分岐をするとカテゴリー名がエラーになります。一応独自タグも調べてやってみたのですが、条件分岐するとやはりエラー。

    もうしばらくやってみますがもしかすると現時点ではカテゴリー名を含ませる事はできないか、もしくは私の知識不足です。すみません。言われてみればこれだとあまり意味ないですね。ただ、トップページへのリンクにはなるのでリンク構造としてはいいのですが。。。。

  6. 新井

     パンくずリストをつけて個別記事を開くと
    ホームページタイトル>記事タイトルになりました。これって、パンくずリストができてないですよね。
    何かを間違えて設定しているんでしょうか。

    ホームページタイトル>カテゴリー名>記事タイトルにしたいです。

  7. しげぞう 投稿作成者

    >コタニ様

    コメントありがとうございます。原因は断定できませんが、考えられるのはレイアウトを決める箱「div」と「/div」が間違って1つ削除されている可能性があります。レイアウト自体が崩れる場合には「div」と「/div」の関係を見ていく必要がありそうです。URLを教えていただけたら確認してみますので、もしよければURLとどのような風にしたいのかを教えて頂けたら助かります。それとURLはコメント公開時には削除しますのでよろしくお願い致します。

  8. コタニ

    いつも拝読させていただいております。
    ブログを始めてまだ1ヵ月も経過していないド素人です。
    こちらのサイトを参考にしてカスタマイズしているのですが、seesaaブログで
    「記事下のposted byや時間、カテゴリ名を削除する方法」をやると、右サイドバー記事下に入りこんでしまい変な構成になってしまいます。
    既にテンプレートを3回も変更している状態なので何とか改善したいのですが、知恵を貸して頂けないでしょうか。宜しくお願いします。