INTEREST

---

---

1.パンくずリストを付けるメリット

多くのサイトやブログでこのパンくずリストが表示されており、私自身色んなページを閲覧してる際によくクリックして他のページを見たりしてます♪

▼画面上部に表示されてるこんな感じのやつです♪

ホーム > ブログカスタマイズ > 「basic_white」 > 表示ページに合わせたパンくずリストを付ける

きっと皆さんもよく利用してるのではないでしょうか？

パンくずリストを表示する事で、ブログの階層構造が分かりやすくなり、閲覧者の方がブログ内を巡回しやすくなるので他のページも見てくれる可能性が上がり、ユーザービリティの向上とPV数の増加が期待出来ます♪（何より単純に付いて無いより、付いてる方が便利ですっ!!ｗ）

また内部リンクが増える事でSEO対策になるとも言われてます♪
下位ページからそれぞれリンクされる事になりますからね♪d(*￣∇￣)

そして「パンくずリスト」という名前は、童話「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来してるそうです♪（Wikipediaより）

ちなみに英語では単に「breadcrumb」または「breadcrumb list」や「breadcrumb navigation」と言うそうなので、試しに “Google 翻訳” を使って調べてみたら「breadcrumb」で「パンくずリスト」って翻訳されましたｗ(￣ε￣〃)ゞ


FC2ブログでは変数を組み合わせる事で、一度設置してしまえばその後は自動でこの「パンくずリスト」を任意の場所に表示する事が出来ますので、以下ではそのHTMLのソースや設置方法の例をご紹介します♪

---

2.パンくずリストのHTML

パンくずリストを表示する部分のHTMLですが、これは以下のページを参考にさせて頂きました♪

「 全てのページに表示するパンくずリストをつくりたい！ 」
（ 初心者でもできる簡単FC2ブログの作り方 様 ）

「 FC2ブログ用パンくずリスト 親子カテゴリ完全対応版 」
（ hatena chips 様 ）

▼上記のページを参考にソースを合体させて、ちょこっと表示を変更したパンくずリストのHTML
カテゴリページで表示される部分にFC2ブログの変数とJavascriptを組み合わせたソースが入ってます。
その他、検索結果やカテゴリページなどでそれぞれの記事件数も表示するようにしてます。

<!-- ▼ パンくずリスト ▼ -->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="ホームへ">ホーム</a> > 
<!--parent_category--><a href="<%topentry_parent_category_link>">
<%topentry_parent_category></a> ><!--/parent_category--> 
<a href="<%topentry_category_link>"><%topentry_category></a> > <%sub_title>
<!--/topentry-->
<!--/permanent_area-->

<!--category_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > 
<script type="text/javascript">
al = new Array(<!--topentry--><!--parent_category-->
'<%topentry_parent_category_link>',<!--/parent_category--><!--/topentry-->-1);
ap = new Array(<!--topentry--><!--parent_category-->
'<%topentry_parent_category>',<!--/parent_category--><!--/topentry-->-1);
if ('<%sub_title>' != "" + ap[0]) 
document.write('<a href=\"', al[0],'\">' , ap[0], '</a>&nbsp;&gt;');
</Script>
<%sub_title>（ <%total_num> 件 ）
<!--/category_area-->

<!--search_area-->
<a href="<%url>" title="ホームへ">ホーム</a> >
「 <%sub_title> 」を含む <%total_num> 件の検索結果
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> 
<input type="submit" value="Search" class="search" /></form>
<!--/search_area-->

<!--date_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > 
<%now_year>年<%now_month>月の記事一覧（ <%total_num> 件 ）
<!--/date_area-->

<!--edit_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > <%edit_entry_title>へのコメント編集
<!--/edit_area-->

<!--tag_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > <%tag_word>（ <%total_num> 件 ）
<!--/tag_area-->

<!--index_area-->
<a href="<%url>" title="ホームへ">ホーム</a>
<!--/index_area-->

<!--titlelist_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > 記事一覧（ 
<script type="text/javascript">
TotalArticle=<!--archive-->+<%archive_count><!--/archive-->;
document.write(+TotalArticle);</script> 件 ）
<!--/titlelist_area-->

<!--not_titlelist_area-->
<!--not_tag_area-->
<!--not_index_area-->
<!--not_category_area-->
<!--not_search_area-->
<!--not_permanent_area-->
<!--not_date_area-->
<!--not_edit_area-->
|<a href="<%url>" title="ホームへ"> ホーム </a>|&nbsp;&nbsp;&nbsp;
<!--prevpage--><a href="<%prevpage_url>">前のページ</a> ≪
<!--/prevpage-->現在のページ<!--nextpage--> ≫ 
<a href="<%nextpage_url>">次のページ</a><!--/nextpage-->
<!--/not_edit_area-->
<!--/not_date_area-->
<!--/not_permanent_area-->
<!--/not_search_area-->
<!--/not_category_area-->
<!--/not_index_area-->
<!--/not_tag_area-->
<!--/not_titlelist_area-->
</div>
<!-- ▲ パンくずリスト ▲ -->

※色んなパターンに対応させる為にHTMLのソースはこんなに長いですが実際に表示されるのは1行です。
（検索結果ページを除く ※フォームの部分が必要ない場合28行目～30行目を削除すればOK）

※パンくずリストを表示したい箇所に上記のHTMLソースをコピペすればOKです。
実際に貼り付ける際はテンプレートの複製を作りバックアップを行ってから作業する方が良いです♪

※実際の表示は「FC2ブログのテンプレート「basic_white」をカスタマイズ 　」でご確認頂けます♪
変更した点が分かりやすいようサンプルとしてパンくずリストを上下２パターン表示してます。
下段のパンくずリストが上記のソースをコピペした物です。（貼り付け位置は下記参照）

---

3.パンくずリストのCSS

上記のパンくずリストに対してスタイルシートにもちょっとだけ記述を追加しました。
（サンプルでは以下の設定のみ指定しています）

▼FC2ブログの管理画面から「テンプレートの設定」でスタイルシートの編集内に以下のソースを追加♪

.pankuzu {
text-align:left;
margin:10px;
}

※上記は左寄せにして、余白を少し取ってるだけの設定なので文字サイズや色を変更したい場合はお好みで記述を追加して下さい♪（ font-size:○○px; や color:#○○○;など ）

---

4.テンプレート basic_white に設置

実際にパンくずリストを表示させたい場合、HTMLのどこを編集すれば良いのかが一番の問題になるかと思いますが、それは使ってるテンプレートによっても異なるので今回はテンプレートの「basic_white」を例に、こんな感じでやってみたってのをご紹介します♪

▼まず、設置場所については以下の画像の通りヘッダーメニューとメインコンテンツの間にします。

---

▼上記の位置にパンくずリストを表示する為に「basic_white」のHTMLでは「<div id="wrap">」と「<div id="main">」の間にパンくずリストのHTMLソースを貼り付ける事にします。

---

▼上記の位置にパンくずリストのHTMLソースを貼り付けて表示を確認するとこんな感じ♪
パンくずリストは問題なく表示されてますが... 余白と点線が気になってしょうがない...ｗ

---

▼点線については前々から消そうと思ってたので、この際ついでに消しちゃいます♪
スタイルシート編集画面でキーボードの「Ctrl」＋「F」を押して「dotted #B5B5B6;」を検索すると15件ヒットすると思うので、その該当箇所を全て削除しちゃいます♪

削除するのは以下のように「border-○○○: 1px dotted #B5B5B6;」となってる部分です。
【削除する設定】
border-top: 1px dotted #B5B5B6;
border-bottom: 1px dotted #B5B5B6;
border-left: 1px dotted #B5B5B6;
border-right: 1px dotted #B5B5B6;　これらが全部で15箇所あると思います。

※以下の画像は「Google Chrome」で検索した場合の画面です。

---

▼次は上部の余白を消すために同じくスタイルシート編集画面で今度は「#sidemenu {」を検索します
すると「padding-top: 35px;」と記述されてる部分があるので「padding-top: 0px;」に変更♪

そしてもう一箇所「#main_contents {」を検索して、同じく「padding-top: 35px;」と記述されてる部分があるので「padding-top: 0px;」に変更します。
※それぞれ「padding-top: 35px;」の記述その物を消してもOKです。

これで余白も点線も無くなってスッキリした♪(￣ε￣〃)ｂ
って事で見比べれるようパンくずリストを以下の画像のように2段表示にしてみましたｗ

実際の表示は「FC2ブログのテンプレート「basic_white」をカスタマイズ 」で確認してみて下さい♪

表示されてるテキストの部分など細かい部分はお好みで編集して下さいませ♪


って事で今回はパンくずリストの設置についてでした♪(￣^￣)ゞ