FC2ブログ【basic_white】(3)パンくずリストを設定する|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。FC2ブログ編集FC2ブログのテンプレート「basic_white」に、「パンくずリスト」を付けたいと思います。「パンくずリスト」とは、閲覧者が現在、サイト内のどの位置にあるページを見ているのかをわかりやすくするために、上位の階層から順番にリンクを設定したリストのことです。文章で書くと、よく意味がわからないですね(笑)だいたい、ブログの記事タイトルの上の方に設置されているリンク案内のことです。パンくずリストを付ける」と表示されています。これが「パンくずリスト」です。ココにリンク表示されている言葉をクリックすると、該当ページに飛ぶことができるわけです。この「パンくずリスト」って色んなサイトを見るとけっこう掲載されているものですから、そうなると自分も付け足したくなってきませんか?もちろん閲覧ユーザーからするとこういうモノがあった方がアクセスしやすいわけですから、商用利用したい人なんかは閲覧者を逃さないことにつながる、かもしれないですね。́∀`*)HTMLにパンくずリストのコードを追加するまずは「パンくずリスト」を入れる位置を考えてください。私の場合は、上記画像のように、記事タイトルの上部分に設定しました。「basic_white」はヘッダー部分にタブが表示されています。そのタブの下には横長の線がありますので、その線の下に「パンくずリスト」を入れます。他の場所に「パンくずリスト」を付けたい場合は、ご自分でお考えください。id="wrap">」の下になります。id="main">」の上、つまり「wrap」と「main」の間ということです。「wrap」で既に設定がされていますので、その下にパンくずリストを入れる空間を作った、という感じです。(wrapの設定をそのまま使えるので、コードを派手にいじらなくてすみます)HTMLを編集するということで、HTMLを編集します。管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択してください。id="wrap">」というタグを探します。id="wrap">」の下に、下記の「追加するコード」を全部、コピペします。ここまで-->●このHTMLコードではパンくずリスト自体に「pankuzu」という名前を付けています。id="pankuzu">」ですね。これはこの後CSSをいじるために必要ですので「pankuzu」がイヤなら好きな名前をお付け下さい。CSSにパンくずリストのclassを追加するさて、とりあえず「パンくずリスト」のカタチは作りました。HTML上にコードを書き込んだわけです。次はこのカタチをきちんと整えてあげなければ動きませんよね?そのためにCSS(スタイルシート)をいじることになります。先ほど注意点として「pankuzu」と名前を付けていることを挙げましたが、この名前を利用しなければ的確な命令を出せません。CSSの方では以下のように「pankuzu」という名前(id)に対して命令を出しています。以下はあくまでも私の場合ですので、ご自分のテンプレに合わせていじってください。「HTML編集」画面の下に「スタイルシート編集」画面が表示されているはずですから、スタイルシートの一番下にでも、以下のコードを追加(コピペ)すればいいです。10px;}●このコードの意味HTML上での「pankuzu」という枠(div)で囲った部分に命令ですよ。文字の大きさは14ピクセル。テキスト(文章)は左寄りで書く。margin(枠の外側の余白)は上が10pxであとは0px。padding(枠の内側の余白)は左に10px空けるように。id="main">」の間に「パンくずリスト」を入れるスペースを作って入れ込んだものです。id="main">」も少し編集しないといけません。●●px;」の部分です。「margin-top」は、上のコンテンツとの余白を指します。そこに無理やりパンくず空間を入れたのですから、ちょっと見た目があれ?ってなることもある、かもしれません。私は私のブログの状況しかわかりませんので、ご自分のブログに合った数値に調整してください。試してみたらいいのではないでしょうか。●●px;」の数値を指定して、ほどよい加減を見つけてください。「パンくずリスト」の問題点テンプレート「basic_white」のHTMLとCSSを編集したことで、「パンくずリスト」を表示させることが可能となりました。これでもう大丈夫!ってことで終わりにできたらいいんですけど、ちょっとだけね、問題点があるんですよ。それは、「子カテゴリページ」を開いたらパンくずリストの親カテゴリ部分が表示されないということです。通常、個別記事を開くと「パンくずリスト」はこのような表示になります。パンくずリストを付ける」と表示されています。パンくずリストを付ける」が記事タイトル、という意味です。実際に「子カテゴリ」である「basic_white」をクリックしてみた時の表示がコレです。Page」からまっすぐ「basic_white」という子カテゴリを案内しています。現在開いている子カテゴリページを案内しているだけの表示、ということです。実は、私がネットで調べて参考にしたコード記述はカテゴリの親子設定を想定していないモノだったんです。私が勝手に親部分を足したコード記述に変更しました。カテゴリのページを開いた時の親カテゴリを入れ込む方法がわからなかったんですよね。不完全な「パンくずリスト」になっているんですけど、よく考えたら「子カテゴリページ」では結局カテゴリを開いているだけなので(記事本文を読んでいるわけじゃない)、別に問題は無いと判断しました。次の記事では、FC2ブログのテンプレート「basic_white」のトップページを開いたら表示されるリスト記事に、「カテゴリ」と「タグ」を表示する方法を説明しています。■FC2ブログ【basic_white】(4)トップページのリスト記事に「カテゴリ」と「タグ」を表示するFC2ブログのテンプレート「basic_white」をそのまま使うと、トップページでは「カテゴリ」や「タグ」はどこにも表示されません。[必須入力]※画像の中の文字を半角で入力してください。