パン屑リストのすすめ

上のパンの画像は、ぜんぜん違うよ
「 パン屑リスト 」 ってどんなもの？ みなさん見たことあるでしょ、こういうものが ↓ 色々なサイトやブログについてるの


はいはい！ これ付けたかったんです ・・・ っておっしゃるかたは結構いるんじゃないかと思います。今回は、色々な方が提供していますチップスを参考にさせていただき、このブログに使用した方法をご紹介いたします。参考にさせていただいたサイト様は以下のとおりです。
ありがとうございました m(_ _)m


このパン屑リストが通常必要な主要ページは、個別記事のページだと思うんですが、やはりブログ全体の統一感をもたらすという意味で、「 個別記事 」 ・ 「 月別 」 ・ 「 カテゴリー 」 の 3つ の HTML をカスタマイズします。そしておまけに、それぞれのブログによってはトップページも必要であるというなら、ちょっと小細工をする事にしてみましょう。

この Pet Lovers Only♪ では、デザイン上の都合でトップページも小細工する必要がありました。あと CSS も、あらたな記述を追加する必要がありますので最後まで読んで下さいね。^^;

それぞれの HTML テンプレートを開いて下さい。
その中の <div id="content"> のすぐ後のところに以下のソースを追記します。

■ 個別記事 HTML

■ 月別 HTML

※ リニューアル後のライブドアテンプレートをご使用の方は、

青字の部分 を削除したほうが良いと思います。パン屑リストと重なり、見苦しくなります。

■ カテゴリー別 HTML

※ リニューアル後のライブドアテンプレートをご使用の方は、

青字の部分 を削除したほうが良いと思います。パン屑リストと重なり、見苦しくなります。

■ トップページ HTML （ 必要ならば ・・・ ）
ページを見て回っている時に、ページごとに 「 あるべきところに文字がなく、無かったところに文字がでてくる 」、「 ページを見るごとに全体の段落位置が微妙にずれる 」 これって、閲覧者にとってはすごくストレスがたまります。そんなこだわりから、本来のパン屑という意味ではありませんが、他のページと同じ位置に文字を入れておこうということです。それぞれの運営されているブログのデザインによっては、必要でない場合が多いので、参考にだけしておいて下さい。


赤字 の部分は 「 > 」 を強調するために文字色を変更する指示をしています。全体の文字色と同色でよいのならば、削除しておいて下さい 。緑字 の <b> </b> も、文字の強調 （ 太字 ） の為に使われています。同じく必要でないなら削除して下さい。ピンク字 の部分は、ご自身のブログの雰囲気にあわせて、適当なニュアンスに変更して下さい。

意味の無い文字にしたらダメですよ。なんのための 「 パン屑リスト 」 かわからなくなりますから 『 &nbsp; 』 は、半角の空白をあらわしています。ご自身で必要かどうか、判断して下さい。

上記 HTML テンプレートへの追記が終了しましたら、ちゃんと保存して、一度 Blog の再構築をして正しく動作しているか確認をして下さい。

最後に CSS （ スタイルシート ） の追加記述なんですが、以下のソースを参考にして下さい。


これで微妙な位置の指定やフォントサイズの調整、そしてリンクテキストのカラーを指定します。ピンク字 の部分をご自身のお好みに変更して、調整して下さい。フォントカラーは通常リンクされている部分は、ＣＳＳ の中の a タグが優先されます。リンクされている部分とそうでない部分で、文字色を変更したい時にご使用ください。必要でなければ削除してもかまいません。

font-size は、このブログでは px で指定しています。理由は、ブラウザーの違いにより文字の大きさが変わり、ブログデザインが崩れるのを防ぐためです。 （ まったく同じではありませんが、他の指定記述よりだいぶんマシだと思います。） 通常の文字の指定と同じく、相対的に文字の大きさが変わっても良いという方は、%、em、xx-small、x-small、small などの記述に置き換えて下さい。

margin は、左から順番に、上、右、下、左の外側の余白幅を表します。（ padding は内側の余白幅 ）設置なさる場所の周りのバランスを見て数字を入れ替えてみて下さい。text-align は、設置される時に左寄せにするか右寄せにするかを指定します。left は左寄せ。right は右寄せ。center は中央揃いの意味を表します。

これを追記した後、デザインの設定より CSS のある場所にいき、保存。その後、blog の再構築をおこなって下さい。正しくできましたでしょうか

※ 追記 （ 2006年02月01日 ） ：
リニューアルされたライブドアテンプレートに合わせて、記事を再構成しました。以前見た方は、タグの表記が変わっているのに気づいたでしょうか？ もう一度ご確認下さい。