リニア型のパンくずリストをファンブログ新スキンに設置してみよう！

ファンブログカスタマイズ：リンク編投稿日：2009年07月26日 16:00

ファンブログ　カスタマイズ　シンプル系スキン限定

今回は、シンプル系スキン以前のスキンに搭載されている、「パンくずリスト」をヘッダーの下に設置する方法を説明します。

「パンくずリスト」とは旧スキンのヘッダーの下部に設置されているもので、１記事を選択した際には、「メイン（HOME）」に表示される記事の順番で、記事タイトルの前後が表示される便利なナビゲーションリンクです。また、カテゴリなどの「アーカイブ」が選択された場合には記事タイトルでなく、アーカイブタイトルが表示される仕組みになっています。記事内ではうまくリンクしませんが、下に見本を載せておきますね。

« 前の記事のタイトル | HOME | 次の記事のタイトル »

何故かシンプル系スキンから、排除されたこの「パンくずリスト」をシンプル系スキンの方でもカンタンに設置できるよう、タグをご用意しましたのでお試しくださいませ。

▼ 今日のおみやげ ▼

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

<!-- breadcrumbs -->
<div style="text-align: center; margin: 0px 0px 10px 0px;"><span style="font-size: 100%; color: #333; font-weight: normal;">
<BlogArchivePrevious>&laquo;&nbsp;<a href="{$BlogArchiveLink$}">{$BlogArchiveTitle$}</a>&nbsp;|&nbsp;</BlogArchivePrevious><a href="{$BlogUrl$}">HOME</a><BlogArchiveNext>&nbsp;|&nbsp;<a href="{$BlogArchiveLink$}">{$BlogArchiveTitle$}</a>&nbsp;&raquo;</BlogArchiveNext>
</span></div><!-- /breadcrumbs -->

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

お持ち帰りいただいた「タグ」を、「１記事」と「アーカイブ」の 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">

<div style="text-align: center; margin: 0px 0px 10px 0px;"><span style="font-size: 100%;...
<BlogArchivePrevious>&amp;laquo;&amp;nbsp;<a href="{$BlogArchiveLink$}">{$BlogArchiveTit...
</span></div><!-- /breadcrumbs -->

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

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

※ 既にバナーや広告等がヘッダーの下に貼られている方は、タグをその下に記述して「パンくずリスト」を記事の真上に表示させる方法をおすすめします。
※ <div id="content"> の下に貼れば記事の幅で表示されますが、記事幅が狭い方や記事タイトルが長い方は改行されていまいますので、あまりおすすめできません。

追記ができましたら、「プレビュー(P)」で確認してください。プレビューは最新の記事を見ますので、前記事とHOMEがヘッターの下に表示され、次記事は表示されませんが問題ありません。確認できましたら「保存(S)」を押して、「自分のブログを確認する」を押し実際に機能するか確認してください。

こんな感じで表示されますが問題ありません。　« 前の記事のタイトル | HOME

必要ならば、「アーカイブ」にもタグを追記しますが、その前に隙間の調整や文字装飾をしてから調整したものを貼り付けますので、調整方法の説明をします。

▼ 隙間の調整と装飾の方法の説明です ▼

本来ならば、隙間の調整や文字装飾などはCSSで指定しますが、貼るだけでカンタンに調整できるよう HTML タグを追記してあります。CSS で指定できる方は、以下の HTML を削除して指定してください。

追記してあります HTML の記述と調整方法を説明します。

中央揃えで、隙間を下に 10ｐｘ、上と左右は 0ｐｘにしてねっ！という命令です。配置を変更する場合は、center を、left か right に変更してください。隙間の調整は、margin: の後の px の数字で調整します。
左から、上・右・下・左の順番になります。

おなじみの、フォントサイズ、文字色、太字のタグも追記してあります。サイズと太字は全て反映されますが、文字色が反映するのは、記号の « | » だけです。表示されるアンカーテキストは全て標準のリンク色になります。設定方法がわからない方は、過去記事をご覧くださいね。

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

「プレビュー(P)」で確認しながら、納得のいく表示になりましたら「保存(S)」を押して確定し、変更したタグをコピーして、「アーカイブ」の HTML の同じ場所に貼り付けてください。同様に確認して問題なければ「保存(S)」を押して終了です。

いかがでしたでしょうか？私はカテゴリごとに順番に記事を書いていますので使用していませんが、日記形式で綴られている方には非常に便利なナビゲーションリンクになりますので、ぜひお試しくださいね。

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

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

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

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

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