Top Page > FC2ブログ > FC2ブログ【basic_white】(9-3)カテゴリ・アーカイブ・タグページに記…

FC2ブログ【basic_white】(9-3)カテゴリ・アーカイブ・タグページに記事一覧リストを表示(HTMLとCSSの編集)

FC2ブログ「basic_white」カテゴリページの記事一覧リスト


FC2ブログのテンプレート「basic_white」の「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示する方法を紹介します。
この3つのページに関しては同じ方法でできるため、以下、全部まとめて説明します。



ページ上部の記事一覧リストを設定したページは、例えば「カテゴリ」をクリックすると、ページ上部に該当カテゴリの記事一覧リストが表示され、その下に各記事のリスト(トップページと同じように要約文や画像が入った記事リスト)が表示されるようになります。
ブログ上部にこういう設定をしておくと、下にスクロールしなくてもどんな記事があるのかをすぐにわかってもらえるので便利だと思います。




記事一覧リスト(リスト表示)に関しては、この記事で3つ目になります。
関連記事を紹介しておきますので確認してください。特に、このブログで紹介している「パンくずリスト」を設定している場合は、必ず「パンくずリスト」のコードの位置を移動させておいてください。






以下、「カテゴリページ」と「アーカイブページ」、「タグページ」の上部に記事一覧リストを表示させる方法を説明しますが、その前に一応、忠告しておきます。
下記で説明するのはあくまでも「私のブログではこうしているよ」と紹介しているだけです。
貴方様のブログでも絶対に表示できるとは断言しておりません。私が持つWeb知識は低レベルなものであることを予めご理解ください。



「何でこんなやり方してるの?」と思われても、私はコレでやっているのだから、いいのです。
(今回、コードを調べている時に、同じようなことを紹介しておられるサイト様に対して「何故こんなやり方をしているのかわからない」「●●を使えばいいのに」等のコメントが書き込まれているのを見て、正直ショックでございます。利用しておきながら失礼ですね!つーか、私も同じように言われているんだろうなぁと思ったら、弱気になりましたw)



この記事一覧リストを表示させるためにけっこうな日数を使いましたので、もうこれ以上いじりたくはありません。私はコレでいいいのだから、もういいのです!(*´▽`*)
なので、記載内容を絶対的には信用しないでください。よろしくお願いしますw





カテゴリ・月別アーカイブ・タグページ上部に記事一覧リストを表示(準備編)


HTML編集画面で「<div id="main">」を見つけ出してください。
(「Ctrlキー」+「Fキー」で検索するとすぐにわかります)



このブログで紹介している「パンくずリスト」を設定している方は、前回の記事<■FC2ブログ【basic_white】(9-2)>を読んで、「パンくずリスト」を移動させてください。
「パンくずリスト」を設定していた方で、既に移動済みの場合は、下記のようなHTML記述になっていると思います。


<パンくずリスト移動後の編集前のコード>
<div id="wrap">
<div id="main">
パンくずリストのHTMLコード
<div id="main_contents" style="display: none">
<!--not_titlelist_area-->




「パンくずリスト」を設定していない場合は、下記のようなHTML記述のはずです。


<デフォルトの編集前のコード>
<div id="wrap">
<div id="main">
<div id="main_contents" style="display: none">
<!--not_titlelist_area-->



「パンくずリスト」を設定している方も設定していない方も、「<div id="main_contents" style="display: none">」の下に「<!--not_titlelist_area-->」があると思います。
今回はこの2つの間にコードを記述しますので、「準備編」として、ここまでの確認をお願いします。



カテゴリ・月別アーカイブ・タグページ上部に記事一覧リストを表示(HTMLを編集する)


では、HTMLコードを編集します。
下記のコードを「<div id="main_contents" style="display: none">」と「<!--not_titlelist_area-->」の間に入れてください。文字色は気にしなくて大丈夫です。


掲載しているコードでは「カテゴリページ」だけではなく「月別アーカイブページ」と「タグページ」の記事一覧リストも表示させるような記述です。不必要な場合は該当部分を削除してください。


<追加するコード>
<!-- カテゴリページ記事一覧表示 -->
<!--category_area-->
<div class="content">
<h2 class="sub_header">カテゴリ「<%sub_title>」の記事一覧</h2>
<div class="category_space">
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a>  <%topentry_year>/<%topentry_month>/<%topentry_day></li>
<!--/topentry-->
</ul>
<p class="cate_nav">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ"> << 新しい記事一覧へ</a><!--/prevpage--> <!--nextpage--><a href="<%nextpage_url>" title="次のページへ">古い記事一覧へ >> </a><!--/nextpage-->
</p>
</div>
</div>
<!--/category_area-->
<!-- カテゴリ別ページ記事一覧表示 ここまで -->

<!-- 月別アーカイブページ記事一覧表示 -->
<!--date_area-->
<div class="content">
<h2 class="sub_header">月別アーカイブ「<%sub_title>」の記事一覧</h2>
<div class="category_space">
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a>  <%topentry_year>/<%topentry_month>/<%topentry_day></li>
<!--/topentry-->
</ul>
<p class="cate_nav">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ"> << 新しい記事一覧へ</a><!--/prevpage--> <!--nextpage--><a href="<%nextpage_url>" title="次のページへ">古い記事一覧へ >> </a><!--/nextpage-->
</p>
</div>
</div>
<!--/date_area-->
<!-- 月別アーカイブページ記事一覧表示 ここまで -->

<!-- タグページ記事一覧表示 -->
<!--tag_area-->
<div class="content">
<h2 class="sub_header">タグ「<%sub_title>」の記事一覧</h2>
<div class="category_space">
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a>  <%topentry_year>/<%topentry_month>/<%topentry_day></li>
<!--/topentry-->
</ul>
<p class="cate_nav">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ"> << 新しい記事一覧へ</a><!--/prevpage--> <!--nextpage--><a href="<%nextpage_url>" title="次のページへ">古い記事一覧へ >> </a><!--/nextpage-->
</p>
</div>
</div>
<!--/tag_area-->
<!-- タグ別ページ記事一覧表示 ここまで -->


●上記コードの青色文字「<< 新しい記事一覧へ」「古い記事一覧へ >>」一連の部分は、記事一覧リストの件数が多い場合に次のページを案内するためのコード記述です。
上記では「カテゴリページ」の該当部分だけ青色で表記していますが、「月別アーカイブページ」も「タグページ」も同じ部分がありますので確認してください。
「<< 新しい記事一覧へ」「古い記事一覧へ >>」ではなく別の言葉にしたい場合は、この言葉の部分を変更してください。


●赤色部分の「<!--/prevpage--> <!--nextpage-->」には、間にスペース(全角の空間)を入れています。
スペースを入れておかないと、記事件数が多くて次のページに移動した時に
<< 新しい記事一覧へ古い記事一覧へ >>
のように繋がってしまって、ちょっとわかりにくいと思います。

スペースがイヤな場合は例えば「■」などを入れてみると良いと思いますが、「<< 新しい記事一覧へ」の後ろに「■」が必ず入ってしまいますのでお気をつけください。
次のページに移動して、そのページ(2ページ目)で記事一覧リストが終わるような場合に
<< 新しい記事一覧へ■
のようにちょっとおかしな表示になると思います。(私がおかしいと思っているだけですので、気にしなければいいだけのお話です)



カテゴリ・月別アーカイブ・タグページ上部に記事一覧リストを表示(CSSを編集する)


次は、CSS(スタイルシート)を編集します。
「スタイルシート編集」画面を開いて、一番下に記述してください。(文字色は気にせずにすべてのコードをコピペしてください)


<追加するコード>
/* --- 記事一覧表示(カテゴリ・アーカイブ・タグ) --------------------- */

.category_space {
border: 1px solid #BFBFBF;
margin: 30px 20px 20px 20px;
padding: 20px 15px 0px 20px;
}

.category_space li {
margin-bottom: 5px;
list-style-image: url("http://□□□.com/マーク(2).gif");
list-style-position: outside;
margin-left: 15px;
border-bottom: 1px dotted #9F9F9F;
padding: 3px 3px 6px;
font-size: 90%;
}

.category_space ul {
padding: 3px 0 0 0px;
margin: 3px 0 0;
}

.cate_nav {
margin: 20px 0px 10px 0px;
text-align: center;
font-size: 90%;
}


●「.category_space」は記事一覧リストの表示場所の設定です。
余白については「padding」や「margin」の数値をいじってみてください。
「.category_space」の中に「border: 1px solid #BFBFBF;」と書いていますが、これは外枠の線です。太さを変更したり(1pxの数字を変更)線の色を変更したり(「#BFBFBF」を別のカラーコードに変更)できますし、必要ないならば削除してかまいません。


●「.category_space li」「.category_space ul」は記事タイトル1つ1つの設定です。
余白の設定は「padding」や「margin」の数値をいじってください。
「.category_space li」の中の「border-bottom: 1px dotted #9F9F9F;」は、リスト表示されている記事タイトルの下に点線を入れている部分です。点線はやめて実線にするならば「dotted」を「solid」に変更してください。線の太さや線の色は上記のようにやってください。もちろん、必要ないならば削除してかまいません。


●「.cate_nav」は記事一覧リストの件数が多い場合に次のページを案内するための設定です。
余白の設定は「margin」の数値をいじってください。「padding」を追加しても大丈夫です。お好きなようにどうぞ。


●通常の記事と同じ文字の大きさにすると見にくいかな?と思ったので、私は記事一覧リストの各タイトルの文字と、次ページ案内の文字の大きさを「font-size: 90%;」に設定しています。これも数値をいじれば好きなように変更できます。


●マーク画像について
.category_space li」の中の「list-style-image: url("http://□□□.com/マーク(2).gif");」は、画像のURLです。
これは以前の記事<■FC2ブログ【basic_white】編集(5)>で作ったマーク(画像)のアップロード先のURLで、記事タイトルの頭に付けている画像「三角矢印マーク」を指します。
このURL部分は、ご自分の画像のURLに書き換えてください


もしもマーク(画像)を準備していない場合は、このように置き換えます。

.category_space li {
margin-bottom: 5px;
list-style-type: disc;
list-style-position: outside;
(以下略)
}

「list-style-type: disc;」に置き換えると、記事リストの頭に「●」が付きます。
とりあえずコレで代用しておいてください。



以上のように、HTMLとCSSに上記で紹介しているコードをブッ込めば、「カテゴリページ」「月別アーカイブページ」「タグページ」の上部に該当記事一覧リストが表示されるはずです。
でもしつこいですが、私は私のブログ以外ではどんな表示になっているのか確認しようがありませんので、貴方様のブログには責任を持ちません!!




posted by mameemon | Comment ( 0 ) | Category ( FC2ブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。