FC2ブログ【basic_white】(9-2)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(パンくずリストを移動させる)|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。前回の記事<■FC2ブログ【basic_white】(9-1)>の続きです。これから「カテゴリページ」や「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示する方法を説明しようと思っていますが、その前に、1つだけやっておかなければならない作業があります。「パンくずリスト」の処理です。私はFC2ブログのテンプレート「basic_white」に「パンくずリスト」を設置しています。「パンくずリスト」の設定方法は、以前の記事<■FC2ブログ【basic_white】(3)パンくずリストを設定する>で説明していますが、この記事に書いた方法で「パンくずリスト」を設定している場合は、必ず下記の通りに「パンくずリスト」のコード記述を移動させてください。何もせずに記事一覧リストを表示させると、ものすごいことになりますw「パンくずリスト」を設定していない方は、この作業をやる必要はありません。このまま次の記事をお読みください。id="main">」の間に「パンくずリスト」のHTMLコードを記述していました。「wrap」と「main」の間に「パンくずリスト」の空間を作っていた、ということです。「main」の上に「パンくずリスト」を表示させていたわけですから、「パンくずリスト」は常に記事部分の上に表示できていました。次の記事で紹介する「記事一覧リスト表示用のHTMLコード」を設定すると、「パンくずリスト」が邪魔をして表示がおかしくなります。FC2ブログの変数タグが「main」ではない部分で重なると、最後に記述した変数タグを有効としてしまうためです。(ここら辺の説明は不確定です。編集しているうちに色々と忘れたので、あまり深く追求しないでくださいw)「main」の上に「パンくずリスト」があるから、記事一覧リストの表示がおかしくなるのです。いうことは、「main」の上ではなく「main」の中に、「パンくずリスト」を入れ込まなければいけません。HTMLでの「パンくずリスト」の記述位置を動かす必要があります。「パンくずリスト」を「main」の中に入れてしまうと、「パンくずリスト」の高さを揃えなければ、記事の文字数ごとに「パンくずリスト」の高さが変わってしまって、全く統一感のないページ表示になります。いうことは、CSSで「パンくずリスト」の高さを指定しなければいけないわけです。(横幅はページ全部の横幅を使うので、指定する必要はありません)「パンくずリスト」の記述そのものは変更する必要はありません。そのままで大丈夫です。コード記述の「位置」を変更したいだけなので、HTMLの編集は簡単にできると思います。「パンくずリスト」の高さも、CSSで簡単に編集できますね。以下、コードの移動について、設定方法を説明します。その後に必ず設定していただきたい箇所を説明するので、ご自分のブログに合ったように編集してください。「パンくずリスト」の表示位置を移動するまずはHTMLの編集です。「パンくずリスト」のコード記述を、「main」の中に移動します。CSSで「パンくずリスト」の高さを指定します。HTMLを編集する管理画面のサイドメニュー「テンプレートの設定」を開き、自分が使用しているテンプレート名の「編集」を選択して「HTML編集」画面を開いてください。id="main">」の下に移動させる。コードの順番は、こんな感じです。none">CSSを編集する「パンくずリスト」を設置した時に、CSSで指示を出すために「パンくずリスト」には「pankuzu」という名前(id)を付けていました。「HTML編集」画面の下に「スタイルシート編集」画面が表示されていると思いますので、「pankuzu」を探してください。(id名を「pankuzu」から変更している方は、変更後のid名を探してください)「パンくずリスト」の高さを指定したいので、「pankuzu」の記述の中に「高さ」の指示つまり「height」を追加します。今回は私のブログに合った数値、つまり「height:43px;」を追加しますが、この数値の部分はご自分のブログに合った数値に変更してください。sidemenu)を調整するHTMLでは「パンくずリスト」のコードを「main」の中に入れ込み、CSSでは「パンくずリスト」の高さを指定したので、これで大丈夫かと思いきや、そうではありません。「main」の中に「パンくずリスト」が入ったので、その分、記事部分が押し下げられることになるからです。ブログのデザインとして、私のように記事部分とサイドメニュー部分の始まりの位置を同じ位置に設定していた場合、「パンくずリスト」を移動させたことで記事部分の始まりが下がってしまうので、サイドメニューの始まりの位置とズレてしまって見た目がおかしくなります。これをご自分で編集してください。私が編集している結果を一応、紹介しておきますが、私は私のブログに合った数値を入れていますので、貴方様のブログでそのまま利用できるわけがありません。私は、元々の「basic_white」テンプレートから変更しまくっていますので、どこをどのようにいじってしまったのか、ほとんど覚えておりません(笑)なので、必ずプレビュー画面を見て確認しながら、ご自分で設定してください。記事部分とサイドメニュー部分の始まりの位置を同じ位置に設定していない場合は、以下の設定はしなくていいと思います。しなくてもいいんじゃないでしょうか。私は私以外のテンプレートのことはわかりませんので、テキトーにやってください(笑)CSSで「main」の記述を編集するまずは「main」を編集します。「パンくずリスト」を「main」の中に入れ込んだので、記事部分の始まりの位置が押し下げられました。これを調整するために、まずは「main」の上余白を「0」にして、不必要な余白を削除します。その上で、次の項目でサイドメニュー部分の始まりの位置を記事部分の始まりの位置と同じにします。「main」の上余白を「0」にします。「パンくずリスト」は既に「main」の中に入っているので、「パンくずリスト」の上=「main」の上、ってことです。「パンくずリスト」にはちゃんと上余白が設定されていますから、更に「main」に上余白を設定する必要はありません。「スタイルシート編集」画面で「#main」を探してください。しつこいですが、紹介するのはこの私のブログでの設定です。私はテンプレート「basic_white」のデフォルト設定からサイドメニューの横幅を変更していますので、デフォルトのテンプレートとは数値が異なっていると思います。細かいところは無視して、赤色で表示している部分の数値をいじってください。35px;」だったはずです。これを「0」にしています。「main」に「パンくずリスト」を入れ込んだからです。記事よりも上に「パンくずリスト」が存在しているわけですから、記事(元main)に対して上余白を入れておく必要はありません。CSSで「パンくずリスト」に対して上余白「10px」が設定されていますからね。1px」を「0px」に変更しておいてください。「main」の大枠の上部に点線が入ってしまって、ちょっと美しくないと思いますので。気にならない方はそのままでもかまいませんけど。#B5B5B6;}CSSで「sidemenu」の記述を編集する次に、サイドメニューのCSSを編集します。「パンくずリスト」を入れ込んだため「main」の記事部分の始まりが押し下げられ、サイドメニューの始まりの位置とズレてしまったと思います。サイドメニューの始まりの位置を、記事部分と同じ位置に揃えておきます。「スタイルシート編集」画面で「#sidemenu」を探してください。35px;」だったはずです。私のブログではこれを「52」にしていますが、この数値は貴方様のブログには合わないでしょう。プレビュー画面で確認しながら、適当な数値を入れてください。これで大丈夫だとは思いますが、貴方様は貴方様のブログ仕様に合うように設定してくださいね。念のため、適用しているテンプレートをコピーしたテンプレートで編集してみた方がいいと思います。適用しているテンプレートをいじっていると、もしも「更新」ボタンを押してしまった場合、へんちくりんなテンプレートをそのままブログとして適用してしまうことになりますからね、気を付けてください。「パンくずリスト」は必ず移動してください実は今回の設定にたどり着くまでに、私はいくつか「カテゴリページ上部に記事一覧リストを表示させる方法」を試してみました。早い段階で「パンくずリスト」が邪魔をしていると判断したので、なんかもう絶対に「パンくずリスト」は「main」の中に移動させなければいけない、と思い込んだのです。「wrap」と「main」の間に入れていたら「パンくずリスト」が邪魔になる。表示がおかしくなるし(潰れる)、「パンくずリスト」のリンク(親カテゴリやTOPページへのリンク)が切れてしまって意味を為さない。「main」の中に移動させて、表示方法(CSS)を調整しなければならない、ってわけです。この考えがあった上で、次の段階「プラグイン3」を利用する方法を試してみました。テンプレート「basic_white」で記事下に設定されている「プラグイン3」を記事上に表示させるように再設定し、「プラグイン3」に「フリーエリア」のプラグインを使って「記事一覧リストのHTMLコード」を記述して、それを特定のページ(カテゴリ・アーカイブ・タグページ)にだけ表示させるようにしてみました。一応、表示することはできたんですけど、結果的にはダメでした。カテゴリやタグのどれかは記事一覧リスト(つまりプラグイン3そのもの)が表示されずにトップページと同じように個別記事リストが表示されてしまう、という事象が起きてしまったからです。「エリア変数」にヤラれてしまいました。́・ω・`)「エリア変数」を書いては消し、書いては消しを繰り返しているうちに私自身も混乱しちゃいました。時間を置いてから改めて考えてみた時に、「なぜプラグイン3を使わなければならないのか?」と疑問に思ったんです。「プラグイン」を使うつもりだから「表示させないページ」を設定しなければならないんです。HTMLにコードを記述して、それが表示可能ならば、「表示させたいページ」を設定してあげればいいじゃん!(ここら辺は「エリア変数」の話になりますね。́▽`*)というワケで、「カテゴリページ上部に記事一覧リストを表示させる方法」として、上記ではHTMLに直接コードを記述するやり方を紹介しています。いうことで、今さらですが「この設定(HTMLに直接コード記述)で上手く行っているならば、パンくずリストを移動させる必要はなかったのでは?」と思うようになりましたwHTMLに直接コード記述する方法でちゃんと意図したことを実現できているのだから、別に「パンくずリスト」をわざわざ「main」の下に移動させる必要なんてなかったんじゃないのコレ?移動させずにそのまま「wrap」と「main」の間に置いておいてもイケるんじゃね?ってことで、実際にやってみました。;゚Д゚)))「パンくずリスト」を移動させなくても上手くいくっぽいんですけどー!!移動させた後に「main」の余白とかいじらなくても上手くいきそうなんですけどー!!と思ったんだけど、やっぱり上手くいきませんでした!どーん!!ああ、良かった....と思うのもどうなのか、って話なんですけど(笑)まぁ「パンくずリストが邪魔するからね!」と散々脅して書いたのに、「本当は移動させなくても大丈夫でした!」とかなると、私の労力は何だったの?って話ですからwちゃんと、と言うとおかしいですが(笑)、やっぱりおかしくなります。理論上は大丈夫かな?と思ったんですが、「パンくずリスト」部分の表示が潰されてしまいますね。次の記事では、「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示するための「HTML」と「CSS」コードを紹介します。■FC2ブログ【basic_white】(9-3)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(HTMLとCSSの編集)「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示する方法を紹介します。この3つのページに関しては同じ方法でできるため、以下、全部まとめて説明します。[必須入力]※画像の中の文字を半角で入力してください。