FC2ブログ【basic_white】(9-3)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(HTMLとCSSの編集)|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。FC2ブログ編集FC2ブログのテンプレート「basic_white」の「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示する方法を紹介します。この3つのページに関しては同じ方法でできるため、以下、全部まとめて説明します。ページ上部の記事一覧リストを設定したページは、例えば「カテゴリ」をクリックすると、ページ上部に該当カテゴリの記事一覧リストが表示され、その下に各記事のリスト(トップページと同じように要約文や画像が入った記事リスト)が表示されるようになります。ブログ上部にこういう設定をしておくと、下にスクロールしなくてもどんな記事があるのかをすぐにわかってもらえるので便利だと思います。記事一覧リスト(リスト表示)に関しては、この記事で3つ目になります。関連記事を紹介しておきますので確認してください。このブログで紹介している「パンくずリスト」を設定している場合は、必ず「パンくずリスト」のコードの位置を移動させておいてください。当記事の関連記事■FC2ブログ【basic_white】(9-1)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(はじめに)■FC2ブログ【basic_white】(9-2)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(パンくずリストを移動させる)■FC2ブログ【basic_white】(9-3)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(HTMLとCSSの編集)以下、「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示させる方法を説明しますが、その前に一応、忠告しておきます。下記で説明するのはあくまでも「私のブログではこうしているよ」と紹介しているだけです。貴方様のブログでも絶対に表示できるとは断言しておりません。私が持つWeb知識は低レベルなものであることを予めご理解ください。「何でこんなやり方してるの?」と思われても、私はコレでやっているのだから、いいのです。(今回、コードを調べている時に、同じようなことを紹介しておられるサイト様に対して「何故こんなやり方をしているのかわからない」「●●を使えばいいのに」等のコメントが書き込まれているのを見て、正直ショックでございます。利用しておきながら失礼ですね!つーか、私も同じように言われているんだろうなぁと思ったら、弱気になりましたw)この記事一覧リストを表示させるためにけっこうな日数を使いましたので、もうこれ以上いじりたくはありません。́▽`*)なので、記載内容を絶対的には信用しないでください。id="main">」を見つけ出してください。(「Ctrlキー」+「Fキー」で検索するとすぐにわかります)このブログで紹介している「パンくずリスト」を設定している方は、前回の記事<■FC2ブログ【basic_white】(9-2)>を読んで、「パンくずリスト」を移動させてください。「パンくずリスト」を設定していた方で、既に移動済みの場合は、下記のようなHTML記述になっていると思います。none"><!--not_titlelist_area-->「パンくずリスト」を設定していない場合は、下記のようなHTML記述のはずです。none">」の下に「<!--not_titlelist_area-->」があると思います。今回はこの2つの間にコードを記述しますので、「準備編」として、ここまでの確認をお願いします。カテゴリ・月別アーカイブ・タグページ上部に記事一覧リストを表示(HTMLを編集する)では、HTMLコードを編集します。none">」と「<!--not_titlelist_area-->」の間に入れてください。文字色は気にしなくて大丈夫です。掲載しているコードでは「カテゴリページ」だけではなく「月別アーカイブページ」と「タグページ」の記事一覧リストも表示させるような記述です。不必要な場合は該当部分を削除してください。>>」一連の部分は、記事一覧リストの件数が多い場合に次のページを案内するためのコード記述です。上記では「カテゴリページ」の該当部分だけ青色で表記していますが、「月別アーカイブページ」も「タグページ」も同じ部分がありますので確認してください。>>」ではなく別の言葉にしたい場合は、この言葉の部分を変更してください。<!--nextpage-->」には、間にスペース(全角の空間)を入れています。>>」のように繋がってしまって、ちょっとわかりにくいと思います。新しい記事一覧へ」の後ろに「■」が必ず入ってしまいますのでお気をつけください。新しい記事一覧へ■」のようにちょっとおかしな表示になると思います。(私がおかしいと思っているだけですので、気にしなければいいだけのお話です)カテゴリ・月別アーカイブ・タグページ上部に記事一覧リストを表示(CSSを編集する)次は、CSS(スタイルシート)を編集します。「スタイルシート編集」画面を開いて、一番下に記述してください。90%;}●「.category_space」は記事一覧リストの表示場所の設定です。余白については「padding」や「margin」の数値をいじってみてください。#BFBFBF;」と書いていますが、これは外枠の線です。太さを変更したり(1pxの数字を変更)線の色を変更したり(「#BFBFBF」を別のカラーコードに変更)できますし、必要ないならば削除してかまいません。ul」は記事タイトル1つ1つの設定です。余白の設定は「padding」や「margin」の数値をいじってください。#9F9F9F;」は、リスト表示されている記事タイトルの下に点線を入れている部分です。点線はやめて実線にするならば「dotted」を「solid」に変更してください。線の太さや線の色は上記のようにやってください。必要ないならば削除してかまいません。●「.cate_nav」は記事一覧リストの件数が多い場合に次のページを案内するための設定です。余白の設定は「margin」の数値をいじってください。「padding」を追加しても大丈夫です。お好きなようにどうぞ。90%;」に設定しています。これも数値をいじれば好きなように変更できます。url("http://□□□.com/マーク(2).gif");」は、画像のURLです。このURL部分は、ご自分の画像のURLに書き換えてください。マーク(画像)を準備していない場合は、このように置き換えます。disc;」に置き換えると、記事リストの頭に「●」が付きます。コレで代用しておいてください。以上のように、HTMLとCSSに上記で紹介しているコードをブッ込めば、「カテゴリページ」「月別アーカイブページ」「タグページ」の上部に該当記事一覧リストが表示されるはずです。[必須入力]※画像の中の文字を半角で入力してください。