残念ながら私の能力では「ついでにサムネイル画像を付ける」ことはできませんでしたが、とりあえず「特定のカテゴリを全ページに」という部分だけは、コメント主さまの希望に沿った回答を提示できたのではないかと思っております。（外れていたらすみませんｗ）
前回はプラグイン編集画面の各項目について文章で説明しましたが、デフォルト設定そのままではなくて、例えば「日付の表示形式を変更したい」とか、「タイトルを先に表示させたい」など、色々と変更したい部分が出てくるかもしれません。
この記事では、まずはプラグイン「カテゴリ別記事一覧」を追加した時のデフォルトの表示状態を画像で説明してから、実際にどの部分を編集すれば表示形式を変更できるのか、実際の編集方法などについて説明したいと思います。
当記事の関連記事■FC2ブログのサイドバーにプラグイン「カテゴリ別記事一覧」を設定して、特定のカテゴリの記事リストを掲載する
■FC2ブログのプラグイン「カテゴリ別記事一覧」を編集して、日付や時間の表示形式を変更したり、表示順番を変更する
■FC2ブログのプラグイン「カテゴリ別記事一覧」を編集して、日付や時間の表示形式を変更したり、表示順番を変更する
プラグイン「カテゴリ別記事一覧」のデフォルトの表示形式
さて、公式プラグイン「カテゴリ別記事一覧」をブログに追加して「カテゴリ別記事一覧の編集」メニューの各項目を見ると、下から5つ目の項目が「表示形式」となっています。
この「表示形式」項目はドロップダウンリストになっていて、「タイトルのみ」「日時、タイトル」「タイトル、本文の一部」「日時、タイトル、本文の一部」「テンプレート」の5つの選択肢があります。
「表示形式」の共通項目は「日付」「タイトル」「本文の一部」の3つであり、ここではこれらの項目のどれを表示させて表示させないのかを選択する、ということになります。
実際にどういう表示になるのか、私のブログで表示させてみました。
ちなみに私のブログでは、背景色が黒色で、サイドバーのリスト表示には先頭に三角マークを付け、記事ごとに区切り線を入れるように設定しています。デフォルトのテンプレートの表示とは異なりますのでご了承ください。
こんな感じです。
画像にも書いていますが、表示形式が「日時、タイトル、本文の一部」の場合と「テンプレート」の場合の実際の表示は、全く同じ内容となります。
これは、表示形式の「テンプレート」は自分でHTMLを編集する場合の選択肢なので、HTMLをまだ編集していない現時点では「日時、タイトル、本文の一部」の場合と全く同じ表示になってしまうからです。
公式プラグイン「カテゴリ別記事一覧」の日付や時間の表示形式を変更する
では、FC2ブログの公式プラグイン「カテゴリ別記事一覧」を編集して、日付や時間の表示形式を変更したいと思います。
公式プラグインを追加して表示させただけでは、日付の表示形式は「2019年11月11日」です。
時間は「00時00分」という表示形式になっています。
これを「2019/11/11」とか「00:00」などの表示に変更してみます。
表示形式変更のために編集する場所
まずは管理画面のサイドメニュー「設定」から「プラグインの設定」を選びます。
自分のブログに設定しているプラグインのリストが表示されるので、その中から編集したいプラグインを選択します。プラグインのタイトル部分を変更していなければ、名前は「カテゴリ別記事一覧」となっているはずです。
右端にある「詳細」リンクをクリックすると、編集画面が開きます。
今回はHTMLを編集するわけですが、まずは「表示形式」項目で「テンプレート」を選択しておいてください。
そして、「プラグインの改造」項目にある「【HTMLの編集】」リンクをクリックします。
HTMLコードが表示されると思います。この記述が、デフォルトの記述です。
表示されたHTMLコード記述部分の画面右端にあるスクロールバーを一番下まで持ってきて、記述内容の下半分を表示させてください。
ちょっと実際にコードを書き出してみますね。
＜デフォルトのコード＞
<!--plugin_category_list-->
<li>
<p>
<!--plugin_category_list_year-->年<!--plugin_category_list_month-->月<!--plugin_category_list_day-->日
<!--plugin_category_list_hour-->時<!--plugin_category_list_minute-->分
</p>
<a href="<!--plugin_category_list_link-->"><!--plugin_category_list_title--></a>
<p>›<!--plugin_category_list_description--></p>
</li>
<!--/plugin_category_list-->
<li>
<p>
<!--plugin_category_list_year-->年<!--plugin_category_list_month-->月<!--plugin_category_list_day-->日
<!--plugin_category_list_hour-->時<!--plugin_category_list_minute-->分
</p>
<a href="<!--plugin_category_list_link-->"><!--plugin_category_list_title--></a>
<p>›<!--plugin_category_list_description--></p>
</li>
<!--/plugin_category_list-->
この部分を編集することで、日付や時間の表示形式を変更することができます。
ということで以下、実際に編集してみましょう。
ちなみにしつこいですが、私のブログでは背景色が黒色で、サイドバーのリスト表示には先頭に三角マークを付け、記事ごとに区切り線を入れるように設定しています。なので、下記で紹介する「実際のブログはこんな感じだよ」画像は、デフォルトのテンプレートの表示とは異なると思います。お気をつけくださいませ。
日付の表示形式を変更する
まずは日付の表示形式ですが、上記で書き出したHTMLコードのうち、編集するのはこの部分です。
このコードには独自タグが入っていて、さりげなく「年」「月」「日」の漢字が記述されていますが、この文字を好きなように変更すると、表示形式を変えることができます。
例えば日付を「2019/11/11」と表示させたい場合は、「年」「月」の部分をそれぞれ「/」に変更し、「日」の文字を削除します。
＜編集後のコード＞
<!--plugin_category_list_year-->/<!--plugin_category_list_month-->/<!--plugin_category_list_day-->
該当部分を変更したら、画面下にある「設定」ボタンをクリックして確定させます。
実際にブログを表示させてみると、このようになります。
コード編集後の「日付表示」部分
時間の表示形式を変更する
時間の表示形式を変更するのは、HTMLコードのこの部分です。
日付の時と同じように、漢字表記「時」「分」を好きなように変更します。
例えば「00:00」と表示させたい場合は、「時」の部分を「:」に変更し、「分」の文字を削除します。
＜編集後のコード＞
<!--plugin_category_list_hour-->:<!--plugin_category_list_minute-->
「設定」ボタンをクリックして、実際にブログを表示させてみると、このようになります。
コード編集後の「時間表示」部分
ちょっとこのままでは「日付」との違いがわかりにくいですね。
とりあえず「カッコ（）」で囲んでみましょうか。
HTMLコードの記述の先頭と最後に、カッコ「（」「）」を追加します。
＜編集後のコード＞
（<!--plugin_category_list_hour-->:<!--plugin_category_list_minute-->）
「時間表示」部分にカッコを付けてみる
どうでもいいんですけど、記事の投稿時間が「2時6分」とかだと「（2:6）」という表記になって、なんかカッコ悪いですね。
「（02:06）」のように「2時」を「02時」表示できないかな？と思ったんですが、何しろプラグインの中の時間表記の話になるので、どのように設定していいのかよくわかりません。
変な感じが我慢できない場合は、時間表示をやめてしまえばいいのではないでしょうか？（暴論だなオイｗ）
まあ、記事の日付だけ表示させていても何も困ることは無いと思いますし、お好きにどうぞ。
時間を削除したい場合は、上記で触った部分のHTMLコード記述1行全部を、さくっと削除してくださいね。（コメントアウトは効きませんので、必要ない場合は削除するしかなさそうですよ）
本文の一部の先頭マークを削除する
なんか、現時点での実際の表示を見ていたら、「本文の一部」つまり記事の冒頭部分の頭にマーク「>」が表示されていますね。
コレ、必要かな？(´･ω･)
まあ、表示させてもさせなくても、どちらでもいいんですけど、私のブログには独自に三角マークを付けるように設定しているので、邪魔なんですよね。
なので削除しましょう。
編集するのはこの部分です。
「<p>タグ」のすぐ後ろにある「›」を削除すると、「>」は表示されません。
＜編集後のコード＞
<p><!--plugin_category_list_description--></p>
該当部分を変更したら、画面下にある「設定」ボタンをクリックして確定させます。
実際にブログを表示させてみると、このようになります。
「>」を削除するかしないかはお好きなようにどうぞ。
コード編集後の「本文の一部」部分
公式プラグイン「カテゴリ別記事一覧」のタイトルや日付などの順番を入れ替える
さて、ここまで見てきたところで何となくご理解いただけたと思いますが、今まで編集してきたHTMLコード部分は、上から「日付」「時間」「記事のタイトル」「本文の一部」という順番で記述されており、これをひとまとめにした上で、指定された記事の数だけ繰り返して表示されている状態です。
現時点では「日付と時間」が先に表示されますが、例えば「記事のタイトル」を一番上に表示させたい場合は、それぞれの該当コード記述部分を入れ替えれば良い、ということになります。
記事のタイトルを一番上に表示させる
では、プラグイン「カテゴリ別記事一覧」の表示順番を変更して、「記事のタイトル」を先に表示させたいと思います。
コード記述部分を入れ替えればいいので簡単です。
「記事のタイトル」部分のHTMLコードは「<a href="<!--plugin_category_list_link-->"><!--plugin_category_list_title--></a>」ですので、これをそのまま、「<li>タグ」と「<p>タグ」の間に移動させます。
該当部分をコピー（というか切り取り？）して、「<li>タグ」と「<p>タグ」の間に貼り付けると簡単にできると思います。
そのまま貼り付けるとコード記述の見た目がズレてしまうと思いますので、貼り付けた後は、コードの左端に半角スペースを入れるなどして調整してみてください。
コードを移動させた後は、「設定」ボタンをクリックして編集内容を確定させます。
コード編集後の実際の表示
こんな感じで、「記事のタイトル」が一番上にくるとスッキリしますね！
これでもういいかな？って思ったんですけど、このままだと「日付と時間」と「本文の一部」が同じ文字色なのでわかりにくいような気がしてきました。
日付と時間の文字色を変更する
これは私のブログでのプラグインを表示させた時の雰囲気の話なんで、私だけのこだわりなのかもしれませんが、「日付と時間」と「本文の一部」が同じ文字色だとごちゃごちゃしている気がするんですよね。
なので、とりあえず「日付と時間」の文字色を変更してみたいと思います。
Class名を付けてCSSで変更しようかな？と思ったんですけど、ちょっと面倒くさい（笑）
というか、変更したいのはこのプラグイン「カテゴリ別記事一覧」の「日付と時間」だけなので、直接HTMLに書き込んで指示を出したいと思います。
「日付と時間」は「<p>タグ」の中に記述されています。なのでこの「<p>タグ」にスタイルを付けてあげれば簡単です。
今回は文字色を変更したいので、とりあえず黄色っぽい緑色にしたいと思います。
カラーコードは「#808000」です。
もちろんご自分のブログに合うように、お好きな色に変更してくださいね。
「日付と時間」部分の上にある「<p>タグ」を「<p style="color:#808000;">」に変更します。これだけでいいです。
カラーコード部分にはお好きな色を入れてくださいね！
コード編集後の日付と時間の文字色
ということで、FC2ブログの公式プラグイン「カテゴリ別記事一覧」を触ってみました。
意外と楽しかったですね。
でも久しぶりすぎて、記事をまとめるのにものすごい時間がかかってしまいました。
もはやコメントをくださった方がこの記事を読む可能性はほとんど無いような気がしますね‥‥。なんか、記事を書くのが遅くなってしまってホントにすみませんでした。
あと、サムネイル画像付きに出来なくてごめんなさい。
まあ、この記事の内容が、いつか誰かのお役に立てたら嬉しいです。
（いつなのか知らんけど！！）
FC2ブログさんにはぜひとも、サムネイル画像付きのカテゴリ別記事一覧プラグインを作ってもらいたいと思います。（「最新記事 (サムネイル付)」プラグインと一緒に設定したら、見た目の整合性が取れないからね！！）
きっと今頃、考えてくださっているに違いない！！（笑）
期待しております！！(*´ω｀*)
