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

前回の記事＜■FC2ブログ【basic_white】（9-1）＞の続きです。
これから「カテゴリページ」や「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示する方法を説明しようと思っていますが、その前に、1つだけやっておかなければならない作業があります。
「パンくずリスト」の処理です。



私はFC2ブログのテンプレート「basic_white」に「パンくずリスト」を設置しています。
「パンくずリスト」の設定方法は、以前の記事＜■FC2ブログ【basic_white】（3）パンくずリストを設定する＞で説明していますが、この記事に書いた方法で「パンくずリスト」を設定している場合は、必ず下記の通りに「パンくずリスト」のコード記述を移動させてください。
何もせずに記事一覧リストを表示させると、ものすごいことになりますｗ



「パンくずリスト」を設定していない方は、この作業をやる必要はありません。
このまま次の記事をお読みください。

「パンくずリスト」を移動する理由

以前の記事で「パンくずリスト」の設定について書いた時、私はテンプレート「basic_white」の「<div id="wrap">」と「<div id="main">」の間に「パンくずリスト」のHTMLコードを記述していました。
「wrap」と「main」の間に「パンくずリスト」の空間を作っていた、ということです。


「main」の上に「パンくずリスト」を表示させていたわけですから、「パンくずリスト」は常に記事部分の上に表示できていました。



でも、次の記事で紹介する「記事一覧リスト表示用のHTMLコード」を設定すると、「パンくずリスト」が邪魔をして表示がおかしくなります。
FC2ブログの変数タグが「main」ではない部分で重なると、最後に記述した変数タグを有効としてしまうためです。（ここら辺の説明は不確定です。編集しているうちに色々と忘れたので、あまり深く追求しないでくださいｗ）



「main」の上に「パンくずリスト」があるから、記事一覧リストの表示がおかしくなるのです。
ということは、「main」の上ではなく「main」の中に、「パンくずリスト」を入れ込まなければいけません。
HTMLでの「パンくずリスト」の記述位置を動かす必要があります。



また、「パンくずリスト」を「main」の中に入れてしまうと、「パンくずリスト」の高さを揃えなければ、記事の文字数ごとに「パンくずリスト」の高さが変わってしまって、全く統一感のないページ表示になります。
ということは、CSSで「パンくずリスト」の高さを指定しなければいけないわけです。
（横幅はページ全部の横幅を使うので、指定する必要はありません）



「パンくずリスト」の記述そのものは変更する必要はありません。そのままで大丈夫です。
コード記述の「位置」を変更したいだけなので、HTMLの編集は簡単にできると思います。
「パンくずリスト」の高さも、CSSで簡単に編集できますね。



以下、コードの移動について、設定方法を説明します。
その後に必ず設定していただきたい箇所を説明するので、ご自分のブログに合ったように編集してください。

「パンくずリスト」の表示位置を移動する

まずはHTMLの編集です。
「パンくずリスト」のコード記述を、「main」の中に移動します。
そして、CSSで「パンくずリスト」の高さを指定します。

HTMLを編集する

管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択して「HTML編集」画面を開いてください。


＜編集方法＞

CSSを編集する

「パンくずリスト」を設置した時に、CSSで指示を出すために「パンくずリスト」には「pankuzu」という名前（id）を付けていました。
「HTML編集」画面の下に「スタイルシート編集」画面が表示されていると思いますので、「pankuzu」を探してください。
（id名を「pankuzu」から変更している方は、変更後のid名を探してください）



「パンくずリスト」の高さを指定したいので、「pankuzu」の記述の中に「高さ」の指示つまり「height」を追加します。
今回は私のブログに合った数値、つまり「height:43px;」を追加しますが、この数値の部分はご自分のブログに合った数値に変更してください。


＜編集後＞

記事部分の表示位置（main と sidemenu）を調整する

HTMLでは「パンくずリスト」のコードを「main」の中に入れ込み、CSSでは「パンくずリスト」の高さを指定したので、これで大丈夫かと思いきや、そうではありません。
「main」の中に「パンくずリスト」が入ったので、その分、記事部分が押し下げられることになるからです。


ブログのデザインとして、私のように記事部分とサイドメニュー部分の始まりの位置を同じ位置に設定していた場合、「パンくずリスト」を移動させたことで記事部分の始まりが下がってしまうので、サイドメニューの始まりの位置とズレてしまって見た目がおかしくなります。


これをご自分で編集してください。



私が編集している結果を一応、紹介しておきますが、私は私のブログに合った数値を入れていますので、貴方様のブログでそのまま利用できるわけがありません。
しかも私は、元々の「basic_white」テンプレートから変更しまくっていますので、どこをどのようにいじってしまったのか、ほとんど覚えておりません（笑）
なので、必ずプレビュー画面を見て確認しながら、ご自分で設定してください。



記事部分とサイドメニュー部分の始まりの位置を同じ位置に設定していない場合は、以下の設定はしなくていいと思います。
たぶん、しなくてもいいんじゃないでしょうか。
まあ、私は私以外のテンプレートのことはわかりませんので、テキトーにやってください（笑）

CSSで「main」の記述を編集する

まずは「main」を編集します。
「パンくずリスト」を「main」の中に入れ込んだので、記事部分の始まりの位置が押し下げられました。
これを調整するために、まずは「main」の上余白を「0」にして、不必要な余白を削除します。
その上で、次の項目でサイドメニュー部分の始まりの位置を記事部分の始まりの位置と同じにします。



では、「main」の上余白を「0」にします。
「パンくずリスト」は既に「main」の中に入っているので、「パンくずリスト」の上＝「main」の上、ってことです。「パンくずリスト」にはちゃんと上余白が設定されていますから、更に「main」に上余白を設定する必要はありません。「0」でいいのです。



「スタイルシート編集」画面で「#main」を探してください。


しつこいですが、紹介するのはこの私のブログでの設定です。
私はテンプレート「basic_white」のデフォルト設定からサイドメニューの横幅を変更していますので、デフォルトのテンプレートとは数値が異なっていると思います。細かいところは無視して、赤色で表示している部分の数値をいじってください。


＜編集後＞


●デフォルトでは「margin-top: 35px;」だったはずです。これを「0」にしています。
「main」に「パンくずリスト」を入れ込んだからです。
記事よりも上に「パンくずリスト」が存在しているわけですから、記事（元main）に対して上余白を入れておく必要はありません。既にCSSで「パンくずリスト」に対して上余白「10px」が設定されていますからね。なので「0」です。


●私はデフォルトのテンプレートから点線を消し去っていますが、もしも点線を残しているのであれば、下記コードの「border-top: 1px」を「0px」に変更しておいてください。「main」の大枠の上部に点線が入ってしまって、ちょっと美しくないと思いますので。気にならない方はそのままでもかまいませんけど。

CSSで「sidemenu」の記述を編集する

次に、サイドメニューのCSSを編集します。
「パンくずリスト」を入れ込んだため「main」の記事部分の始まりが押し下げられ、サイドメニューの始まりの位置とズレてしまったと思います。
サイドメニューの始まりの位置を、記事部分と同じ位置に揃えておきます。


「スタイルシート編集」画面で「#sidemenu」を探してください。


＜編集後＞


●デフォルトでは「padding-top: 35px;」だったはずです。
私のブログではこれを「52」にしていますが、この数値は貴方様のブログには合わないでしょう。プレビュー画面で確認しながら、適当な数値を入れてください。




これで大丈夫だとは思いますが、貴方様は貴方様のブログ仕様に合うように設定してくださいね。
念のため、適用しているテンプレートをコピーしたテンプレートで編集してみた方がいいと思います。適用しているテンプレートをいじっていると、もしも「更新」ボタンを押してしまった場合、へんちくりんなテンプレートをそのままブログとして適用してしまうことになりますからね、気を付けてください。

「パンくずリスト」は必ず移動してください

実は今回の設定にたどり着くまでに、私はいくつか「カテゴリページ上部に記事一覧リストを表示させる方法」を試してみました。
で、けっこう早い段階で「パンくずリスト」が邪魔をしていると判断したので、なんかもう絶対に「パンくずリスト」は「main」の中に移動させなければいけない、と思い込んだのです。



「wrap」と「main」の間に入れていたら「パンくずリスト」が邪魔になる。
表示がおかしくなるし（潰れる）、「パンくずリスト」のリンク（親カテゴリやTOPページへのリンク）が切れてしまって意味を為さない。
だから「main」の中に移動させて、表示方法（CSS）を調整しなければならない、ってわけです。



この考えがあった上で、次の段階「プラグイン3」を利用する方法を試してみました。
テンプレート「basic_white」で記事下に設定されている「プラグイン3」を記事上に表示させるように再設定し、「プラグイン3」に「フリーエリア」のプラグインを使って「記事一覧リストのHTMLコード」を記述して、それを特定のページ（カテゴリ・アーカイブ・タグページ）にだけ表示させるようにしてみました。



一応、表示することはできたんですけど、結果的にはダメでした。
カテゴリやタグのどれかは記事一覧リスト（つまりプラグイン3そのもの）が表示されずにトップページと同じように個別記事リストが表示されてしまう、という事象が起きてしまったからです。
「エリア変数」にヤラれてしまいました。難しいですねぇ（´・ω・｀）




「エリア変数」を書いては消し、書いては消しを繰り返しているうちに私自身も混乱しちゃいました。
で、しばらく時間を置いてから改めて考えてみた時に、「なぜプラグイン3を使わなければならないのか？」と疑問に思ったんです。
「プラグイン」を使うつもりだから「表示させないページ」を設定しなければならないんです。もしも直接HTMLにコードを記述して、それが表示可能ならば、「表示させたいページ」を設定してあげればいいじゃん！（ここら辺は「エリア変数」の話になりますね。難しいですね。）



私は「パンくずリスト」のせいで直接HTMLにコードを記述できないと思い込んでいたんだけど、本当にそうなのか？
直接HTMLにコードを記述できないから「プラグイン3」を使わなければいけないと思ってしまったけど、本当に「記事一覧リストのHTMLコード」を直接HTMLに記述することはできないのか？


と試してみたら、できちゃった！ｗｗｗ
マジかよ！！なんて簡単なんだ！！！（*´▽｀*）


というワケで、「カテゴリページ上部に記事一覧リストを表示させる方法」として、上記ではHTMLに直接コードを記述するやり方を紹介しています。




ということで、今さらですが「この設定（HTMLに直接コード記述）で上手く行っているならば、パンくずリストを移動させる必要はなかったのでは？」と思うようになりましたｗ
HTMLに直接コード記述する方法でちゃんと意図したことを実現できているのだから、別に「パンくずリスト」をわざわざ「main」の下に移動させる必要なんてなかったんじゃないのコレ？
移動させずにそのまま「wrap」と「main」の間に置いておいてもイケるんじゃね？
ってことで、実際にやってみました。


‥‥なんか、上手くいくんですけどー！！((( ；ﾟДﾟ)))
「パンくずリスト」を移動させなくても上手くいくっぽいんですけどー！！
移動させた後に「main」の余白とかいじらなくても上手くいきそうなんですけどー！！


と思ったんだけど、やっぱり上手くいきませんでした！どーん！！



ああ、良かった‥‥
と思うのもどうなのか、って話なんですけど（笑）
まぁ「パンくずリストが邪魔するからね！」と散々脅して書いたのに、「本当は移動させなくても大丈夫でした！」とかなると、私の労力は何だったの？って話ですからｗ



ちゃんと、と言うとおかしいですが（笑）、やっぱりおかしくなります。
理論上は大丈夫かな？と思ったんですが、「パンくずリスト」部分の表示が潰されてしまいますね。
親カテゴリやTOPページへのリンクは切れませんでしたが、ブログ上の表示がおかしくなるので、「私が紹介していたパンくずリスト」を使用している方は上記の通りに設定を変更してください！




次の記事の紹介

次の記事では、「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示するための「HTML」と「CSS」コードを紹介します。