Seessa（さくら）ブログにパンくずリストを設置する

Seessa（さくらの）ブログの各ページの先頭記事の上に、以下のようなパンくずリストを設置する方法。この方法は、Seessa ブログにも、さくらのブログにも有効です。

メインページ
表示なし

個別記事ページ
[ブログ名] Top > 該当するカテゴリー > 記事タイトル

カテゴリ別ページ
[ブログ名] Top > 該当するカテゴリー

過去ログページ
[ブログ名] Top > 該当する年月

1. [デザイン] タブから [コンテンツ] を選択します。

2. [記事] をクリックします。

3. 右上の [コンテンツHTML編集] をクリックします。

4. コンテンツの HTML の先頭部分の

<% content.header -%>

のすぐ下に以下の赤で示した記述を挿入します。

<% content.header -%>


（この下に以下の記述を追加）

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

<% if:page_name eq 'archive' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% archive.createstamp | date_format("%Y年%m月") %></div>
<% /if -%>

<% if:page_name eq 'category' -%>
<div class="pankuzu">
<a href="<% blog.page_url %>"><% blog.title %> Top</a> > <% category.name %></div>
<% /if -%>

（挿入ここまで）

<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>
<div class="navi">
・
・
・

5. [保存] ボタンを押して変更を保存し、[コンテンツの HTML] ページを閉じます。

6. [デザイン] タブから [デザイン一覧] を選択します。

7. [適用] されているデザインをクリックして、スタイルシートの編集ページを開きます。

8. スタイルシートのいちばん下までスクロールし、スタイルシートの最後に、パンくず部分（pankuzu クラス）のスタイル記述を追加します。自分のブログのデザインに合わせて設定してください（以下の記述は単なる例です）。よくわからない場合は、navi クラスと同じスタイルに設定し、font-size だけ navi の font-size よりも若干大きめに設定しておくと見栄えがよいでしょう（たとえば、navi の font-size が 10px の場合は 12px）。navi クラスは、ブラウザで「.navi」を検索して探します。

.pankuzu {
color:#D97B65;
font-size:12px;
text-align:left;
padding-left:23px;
padding-right:0px;
padding-top: 5px;
padding-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

.pankuzu a {
font-size:12px;
color:#D97B65;
}

9. 最後に、[スタイルシートを変更する] ボタンを押してカスタマイズは終了です。

* 「Seessa（さくら）ブログ用のシンプルなテンプレート（パンくずリスト付）」で、パンくずリストを設置し、さらに記事の上に表示されるナビを削除したコンテンツ HTML を配布しています。

参照サイト:
パンくずリストを付ける@Seessaカスタマイズ

「さくらのブログ」でパンクズリストを作成するには