カテゴリー別及び月別のアーカイブをリスト化
先日(2019/07/26) の更新で、トップページが全文表示タイプ『serene_resp』『lace_al』 の2カラム及び3カラムに、カテゴリー別及び月別のアーカイブをタイトルリスト化するHTMLを追加しました。
全文表示タイプテンプレートに加筆修正しました。
トップページ要約表示タイプのテンプレートの場合、カテゴリー別や月別のアーカイブを表示した際も同じような形で表示されるので不要かもしれませんが、件数をまとめて表示したい方(管理画面での表示設定は1ページ50件まで)用に『リスト表示化』するカスタマイズを掲載致します。

↑これを↓こんな感じに


↑これを↓こんな感じに

いつも画像がボケててスミマセン。m(__)m
投稿記事が沢山有り、シンプルにタイトルだけ表示したい方、ReadMore にございますので是非ご利用下さい。
全文表示タイプテンプレートに加筆修正しました。
トップページ要約表示タイプのテンプレートの場合、カテゴリー別や月別のアーカイブを表示した際も同じような形で表示されるので不要かもしれませんが、件数をまとめて表示したい方(管理画面での表示設定は1ページ50件まで)用に『リスト表示化』するカスタマイズを掲載致します。

↑これを↓こんな感じに


↑これを↓こんな感じに

いつも画像がボケててスミマセン。m(__)m
投稿記事が沢山有り、シンプルにタイトルだけ表示したい方、ReadMore にございますので是非ご利用下さい。
下記テンプレート名をクリックして下さい。
当方で表示の検証をしてみましたが、見栄えがおかしい場合はお手数ですがメールやコメントでご連絡下さいませ。(どのような不具合かを確認するためにも、カスタマイズを適用した状態のURLをお教え頂けると有難いです。)
カスタマイズの際は、複製を作ってから作業すると安心です。m(__)m
・al_responsive2c3c
1) HTML編集枠1/5程スクロールした以下(オレンジ文字)の所に(青色文字の文全て)を入れる。(al_responsive3cの場合は<div class="con1">を<div class="con2">に変更して下さい。
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)
2)1/4程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)
3)同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)
<!--/titlelist_area-->
<!-- 全記事リスト終了 -->
</div>
この間に下記を入れる<div class="menu3">
<!--プラグイン3-->
<!--not_permanent_area-->
<!-- カテゴリーリスト開始 -->
<!--category_area-->
<div class="con1">
<section>
<div class="menu3_title">カテゴリ「<%sub_title>」の記事一覧</div>
<!--topentry-->
<div class="all_body">
<div class="all_day" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></div>
</div>
<!--/topentry-->
</section>
</div>
<!--/category_area-->
<!-- カテゴリーリスト終了 -->
<!-- 月別アーカイブリスト開始 -->
<!--date_area-->
<div class="con1">
<section>
<div class="menu3_title">月別アーカイブ「<%sub_title>」の記事一覧</div>
<!--topentry-->
<div class="all_body">
<div class="all_day" style="width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></div>
</div>
<!--/topentry-->
</section>
</div>
<!--/date_area-->
<!-- 月別アーカイブリスト終了 -->
2)1/4程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)
<!--not_category_area--><!--not_date_area-->
<!-- 全文表示用HTMLの貼り換え ここから-->
<!-- トップページ ここから-->
<!--topentry-->
のように、<!-- 全文表示用HTMLの貼り換え ここから--> の上に追記する。3)同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)
</article>
<!--/topentry-->
<!-- トップページ ここまで -->
<!--/not_date_area--><!--/not_category_area-->
・ct-responsive2c3c, candy2c3c, green2c3c, ryo-2c3c
1) HTML編集枠1/5程スクロールした以下(オレンジ文字)の所に(青色文字の文全て)を入れる。
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)
2)1/3程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)
3)同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)
<!--/titlelist_area-->
<!-- 全記事リスト終了 -->
</div>
この間に下記を入れる<div class="menu3">
<!--プラグイン3-->
<!--not_permanent_area-->
<div class="archive">
<!-- カテゴリーリスト開始 -->
<!--category_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title">Category</h2>
<div class="title_list" style="padding-bottom:10px;">
<h3 style="margin:10px;">カテゴリ「<%sub_title>」の記事一覧</h3>
<!--topentry-->
<div class="all_body" style="width:auto;margin:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>の記事を表示する"><%topentry_title></a></div>
<!--/topentry-->
</div>
</section>
<!--/category_area-->
<!-- カテゴリーリスト終了 -->
<!-- 月別アーカイブリスト開始 -->
<!--date_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title">Monthly</h2>
<div class="title_list" style="padding-bottom:10px;">
<h3 style="margin:10px;">月別アーカイブ「<%sub_title>」の記事一覧</h3>
<!--topentry-->
<div class="all_body" style="width:auto;margin:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>の記事を表示する"><%topentry_title></a></div>
<!--/topentry-->
</div>
</section>
<!--/date_area-->
<!-- 月別アーカイブリスト終了 -->
</div>
2)1/3程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)
<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!--not_category_area--><!--not_date_area-->
<!-- トップページ ここから-->
<!--topentry-->
のように、<div class="blog"> の下に追記する。3)同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)
</article>
<!--/topentry-->
<!-- トップページ ここまで -->
<!--/not_date_area--><!--/not_category_area-->
・genial_2c3c
1) HTML編集枠1/5程スクロールした以下(オレンジ文字)の所に(青色文字の文全て)を入れる。
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)
2)1/3程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)
3)同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)
(検索は[Ctrl+Fキー]で<!-- 全記事リスト終了 -->)
<!--/titlelist_area-->
<!-- 全記事リスト終了 -->
</div>
この間に下記を入れる<div class="menu3">
<!--プラグイン3-->
<!--not_permanent_area-->
<div class="archive">
<!-- カテゴリーリスト開始 -->
<!--category_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title tape">Category</h2>
<div class="title_list">
<h3 class="menu_title" style="margin:-5px -15px 20px;">カテゴリ「<%sub_title>」の記事一覧</h3>
<!--topentry-->
<div class="all_body" style="width:auto;margin:0;padding:5px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>の記事を表示する"><%topentry_title></a></div>
<!--/topentry-->
</div>
</section>
<!--/category_area-->
<!-- カテゴリーリスト終了 -->
<!-- 月別アーカイブリスト開始 -->
<!--date_area-->
<section class="blog-con blog-con2">
<h2 class="entry_title tape">Monthly</h2>
<div class="title_list">
<h3 class="menu_title" style="margin:-5px -15px 20px;">月別アーカイブ「<%sub_title>」の記事一覧</h3>
<!--topentry-->
<div class="all_body" style="width:auto;margin:0;padding:5px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><%topentry_year>/<%topentry_month>/<%topentry_day>:<a href="<%topentry_link>" title="<%topentry_title>の記事を表示する"><%topentry_title></a></div>
<!--/topentry-->
</div>
</section>
<!--/date_area-->
<!-- 月別アーカイブリスト終了 -->
</div>
2)1/3程スクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- 全文表示用HTMLの貼り換え ここから -->)
<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!--not_category_area--><!--not_date_area-->
<!-- トップページ ここから-->
<!--topentry-->
のように、<div class="blog"> の下に追記する。3)同じく1/2近くまでスクロールした所に(オレンジ文字)を追加する
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->)
</article>
<!--/topentry-->
<!-- トップページ ここまで -->
<!--/not_date_area--><!--/not_category_area-->
当方で表示の検証をしてみましたが、見栄えがおかしい場合はお手数ですがメールやコメントでご連絡下さいませ。(どのような不具合かを確認するためにも、カスタマイズを適用した状態のURLをお教え頂けると有難いです。)
カスタマイズの際は、複製を作ってから作業すると安心です。m(__)m
↻
Re: 徳川たぬこ 様へ
こんばんは。コメント有難うございます。自己解決されたようで良かったです。で、方法ですが 正しいです。(^_-)-☆
私がお返事した場合でも同じ指示をしました。
FC2ブログのテンプレートで使用する変数には色々有りまして、それを駆使しながら『トップでは表示・個別ページでは非表示』等でブログを構成しています。
色んな変数(ブロック変数・単変数)を使う事によって、HTMLの枠一つで 記事以外のページを複数作る事が出来ます。
変数の使い方を理解すれば、ご自身でもテンプレート作れるんじゃないですか?
既にたぬ子さんはHTMLやCSSを分かってますし。その時はお手伝い致しますよ~♪(^-^)
[ 返信 * 編集 ]▼ ▲