階層型のパンくずリストをファンブログの記事の上に設置してみよう！

ファンブログカスタマイズ：リンク編投稿日：2012年05月30日 20:15

今回は、前記事のパンくずリストとはタイプが違う、階層型と呼ばれているパンくずリストを記事の上に設置する方法を説明します。この階層型のパンくずリストというのはファンブログの管理画面に表示されています、こちらのナビゲーションのことです。

一般的にはこちらが「パンくずリスト」と認識されているもので、トピックパス（topic path）とも呼ばれています。
前回のリニア型のパンくずリストをファンブログ新スキンに設置してみよう！で紹介しましたものは「リニア型のパンくずリスト」といいまして階層を持たない同階層での Next/Prev 形式のナビゲーションになります。

※ パンくずリストの論理構造につきましては、こちらのサイト様を参考にさせていただきました。

► パンくずリストのマークアップ＠我的春秋

階層型のパンくずリストの Html コードは、以下のようなコードになります。

<a href="{$BlogUrl$}">HOME</a><BlogEntryIfCategory> > <a href="{$BlogEntryCategoryLink$}">
{$BlogEntryCategory$}</a> > </BlogEntryIfCategory>{$BlogEntryTitle$}

HOME > カテゴリタイトル > 記事タイトル

この Html コードを「1記事」の HTML に貼ればパンくずリストはこのように表示されますが、ファンブログの管理画面と同じように表示するには Class を指定して CSS で装飾する必要があります。

HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、貼るだけでファンブログの管理画面と同じように表示される装飾の記述を追記した Html コードをご用意しましたのでお試しくださいませ。

▼ 今日のおみやげ ▼

お持ち帰りの際は「コメント」などを残していただけますと励みになります。
元気のミナモト！≫ FC2 Blog Ranking ≪ 応援お願いします。

<!-- topicpath -->
<div style="background:#eee; padding:6px 6px 6px 6px; margin:0px 0px 10px 0px;">
<span style="font-size: 100%; color: #666; font-weight: normal;">
<a href="{$BlogUrl$}">HOME</a><BlogEntryIfCategory> > <a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a> > </BlogEntryIfCategory>{$BlogEntryTitle$}</span></div>
<!-- /topicpath -->

ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピーでお持ち帰りください。

上記 Html コードを「1記事」の HTML に貼り付けます。作業をする前に HTML のバックアップをとっておくことを推奨します。

► CSSやHTMLファイルのバックアップの方法

「1記事」の HTML を開いたら <div id="main" class="clr"> という記述を探してください。上から少しスクロールすればすぐ見つかります。

持ち帰った「Htmlコード」を <div id="main" class="clr"> の直下に貼るのですが、そのまま貼ると記述してある元のソースとコードが繋がってしまう恐れがありますので、コードを貼る前に直下にカーソルを置き、3～4回改行して行間を広げてください。改行して間を広げた真中あたりの行頭にカーソルを置いてコードを貼れば上下に空きができますので、貼ったコードと元から記述されていたソースとの区別がつきますから安全に作業が行えます。

</div><!-- /header -->
<div id="main" class="clr">

<!-- topicpath -->
<div style="background:#eee; padding:6px 6px 6px 6px; margin:0px 0px 10px 0px;">
<span style="font-size: 100%; color: #666; font-weight: normal;">
<a href="{$BlogUrl$}">HOME</a><BlogEntryIfCategory> > <a href="{$BlogEntryCategoryLink$}">
<!-- /topicpath -->

<div id="wrapper" class="clr">  ◄ 3カラムのみの記述

<div id="content">
<div id="entries">

「プレビュー(P)」を押し、記事の上に「パンくずリスト」が表示されていましたら「保存(S)」を押して設置は完了です。
続いて装飾や調整方法を説明しますが、ここでもう一度、HTML のバックアップを取っておくことを推奨します。

飾り枠：<div style="
background:#eee; /* 背景色 */
padding:6px 6px 6px 6px; /* 内側の隙間（上、右、下、左）*/
margin:0px 0px 10px 0px; /* 外側の隙間（上、右、下、左）*/
">

背景色を表示させたくない場合は、設置した場所と同じ背景色のカラーコード（通常は #FFF;）に変更してください。内側の隙間（padding）と外側の隙間（margin）の数字を変更することで背景の大きさや隙間の調整ができます。

文字装飾：<span style="font-size: 100%; color: #666; font-weight: normal;">

文字の装飾ができます。設定方法がわからない方はこちらの記事をご覧ください。

► よくつかう3つの文字の装飾タグをまとめる

いかがでしたでしょうか？今回はオールマイティーに対応できる <div id="main" class="clr"> の直下に貼る方法を説明しました。記事タイトルの上に設置したい場合は、記事タイトルの上の日付を記事タイトルの下に移動した方がしっくり収まります。日付の移動の仕方はこちらの記事で説明していますのでご興味のある方はご覧になってください。(´・ω・`)b

► ファンブログの記事の日付をタイトルバーの右下に表示させる方法

※ 2012年07月09日： font-weight の指定値に誤りがございました。
　 font-weight: none;（誤）を font-weight: normal;（正）に修正し、変更しました。

※ 上記Htmlコードはコピー＆ペーストでそのままご利用になれます。
※ Htmlコードのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜　次の記事を読む　≫