ブログカスタマイズの雑談BLOG

FC2ブログのテンプレート「basic_white」に、「パンくずリスト」を付けたいと思います。



「パンくずリスト」とは、閲覧者が現在、サイト内のどの位置にあるページを見ているのかをわかりやすくするために、上位の階層から順番にリンクを設定したリストのことです。
とか文章で書くと、よく意味がわからないですね（笑）
だいたい、ブログの記事タイトルの上の方に設置されているリンク案内のことです。





この画像では、記事タイトルの上に「Top Page ＞ ブログ設定 ＞ basic_white ＞ basic_white編集3　パンくずリストを付ける」と表示されています。これが「パンくずリスト」です。
ココにリンク表示されている言葉をクリックすると、該当ページに飛ぶことができるわけです。



この「パンくずリスト」って色んなサイトを見るとけっこう掲載されているものですから、そうなると自分も付け足したくなってきませんか？
もちろん閲覧ユーザーからするとこういうモノがあった方がアクセスしやすいわけですから、商用利用したい人なんかは閲覧者を逃さないことにつながる、かもしれないですね。
私のようにただダラダラと文章を書いていければいいという人にとっては無意味ですけどもｗ


じゃ、「パンくずリスト」を付けてみましょう！！（´∀｀＊）

HTMLにパンくずリストのコードを追加する

まずは「パンくずリスト」を入れる位置を考えてください。
私の場合は、上記画像のように、記事タイトルの上部分に設定しました。



「basic_white」はヘッダー部分にタブが表示されています。
そのタブの下には横長の線がありますので、その線の下に「パンくずリスト」を入れます。
他の場所に「パンくずリスト」を付けたい場合は、ご自分でお考えください。（私は私のブログ以外に興味はありませんので知りませんｗ）



タブの下、つまり記事タイトルの上というのがテンプレート「basic_white」のHTML中のどこになるのかと言うと、「<div id="wrap">」の下になります。「<div id="main">」の上、つまり「wrap」と「main」の間ということです。
「wrap」で既に設定がされていますので、その下にパンくずリストを入れる空間を作った、という感じです。（wrapの設定をそのまま使えるので、コードを派手にいじらなくてすみます）

HTMLを編集する

ということで、HTMLを編集します。
管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。「○○のHTML編集」画面になるので、「<div id="wrap">」というタグを探します。
この「<div id="wrap">」の下に、下記の「追加するコード」を全部、コピペします。


＜追加するコード＞


●このHTMLコードではパンくずリスト自体に「pankuzu」という名前を付けています。
コード2行目の「<div id="pankuzu">」ですね。
これはこの後CSSをいじるために必要ですので「pankuzu」がイヤなら好きな名前をお付け下さい。

CSSにパンくずリストのclassを追加する

さて、とりあえず「パンくずリスト」のカタチは作りました。そしてHTML上にコードを書き込んだわけです。
じゃあ次はこのカタチをきちんと整えてあげなければ動きませんよね？
そのためにCSS（スタイルシート）をいじることになります。



先ほど注意点として「pankuzu」と名前を付けていることを挙げましたが、この名前を利用しなければ的確な命令を出せません。なのでCSSの方では以下のように「pankuzu」という名前（id）に対して命令を出しています。
以下はあくまでも私の場合ですので、ご自分のテンプレに合わせていじってください。


「HTML編集」画面の下に「スタイルシート編集」画面が表示されているはずですから、スタイルシートの一番下にでも、以下のコードを追加（コピペ）すればいいです。


＜追加するコード＞


●このコードの意味

HTML上での「pankuzu」という枠（div）で囲った部分に命令ですよ。
文字の大きさは14ピクセル。
テキスト（文章）は左寄りで書く。
margin（枠の外側の余白）は上が10pxであとは0px。
padding（枠の内側の余白）は左に10px空けるように。

「<div id="main">」を編集する

この「パンくずリスト」はテンプレート「basic_white」の中の「<div id="wrap">」と「<div id="main">」の間に「パンくずリスト」を入れるスペースを作って入れ込んだものです。


ということは、「パンくずリスト」を入れる前と後とではいきなり空間が増えたことになりますよね？
元々作られていた空間に、いきなり別の空間を入れ込んだわけですから、入れ込んだ下の場所「<div id="main">」も少し編集しないといけません。
具体的には「margin-top: ●●px;」の部分です。



「margin-top」は、上のコンテンツとの余白を指します。
なので、そこに無理やりパンくず空間を入れたのですから、ちょっと見た目があれ？ってなることもある、かもしれません。私は私のブログの状況しかわかりませんので、ご自分のブログに合った数値に調整してください。
色々と試してみたらいいのではないでしょうか。


スタイルシートの記述内の「<div id="main">」の中の「margin-top: ●●px;」の数値を指定して、ほどよい加減を見つけてください。

「パンくずリスト」の問題点

テンプレート「basic_white」のHTMLとCSSを編集したことで、「パンくずリスト」を表示させることが可能となりました。
これでもう大丈夫！ってことで終わりにできたらいいんですけど、ちょっとだけね、問題点があるんですよ。
それは、「子カテゴリページ」を開いたらパンくずリストの親カテゴリ部分が表示されないということです。



通常、個別記事を開くと「パンくずリスト」はこのような表示になります。





記事タイトルの上に「Top Page ＞ ブログ設定 ＞ basic_white ＞ basic_white編集3　パンくずリストを付ける」と表示されています。
「ブログ設定」が親カテゴリ、「basic_white」が子カテゴリ、「basic_white編集3　パンくずリストを付ける」が記事タイトル、という意味です。



で、実際に「子カテゴリ」である「basic_white」をクリックしてみた時の表示がコレです。





「Top Page」からまっすぐ「basic_white」という子カテゴリを案内しています。つまり、現在開いている子カテゴリページを案内しているだけの表示、ということです。



実は、私がネットで調べて参考にしたコード記述はカテゴリの親子設定を想定していないモノだったんです。
なので、私が勝手に親部分を足したコード記述に変更しました。
でも正直、カテゴリのページを開いた時の親カテゴリを入れ込む方法がわからなかったんですよね。


ちょっと不完全な「パンくずリスト」になっているんですけど、よく考えたら「子カテゴリページ」では結局カテゴリを開いているだけなので（記事本文を読んでいるわけじゃない）、別に問題は無いと判断しました。
なので、このままでいいと思います！！
（気になる方は、どうぞご自分で調べてコード記述を変更してください）




次の記事の紹介

次の記事では、FC2ブログのテンプレート「basic_white」のトップページを開いたら表示されるリスト記事に、「カテゴリ」と「タグ」を表示する方法を説明しています。