AX
テンプレートマニュアル
全記事一覧ページ(All Titlelist 総目次)
全記事一覧ページ(総目次)を1ページで作成する
⇒目次[5]

hosi5.gifカスタマイズの難易度5
今年五月の仕様変更により、全記事一覧ページ(総目次)の記事タイトルが、1ページあたり、100件しか表示されなくなりました。

全記事一覧タイトルページの表示件数については、以前からFC2リクエストに要望が寄せられていたようなので、管理人も、一縷の望みをかけて、それに1票を投じ、皆さまにもご協力をお願いしてまいりました。
しばらく様子を見ておりましたが、変化はなし。どうやら、1ページ100件表示は確定してしまったようです…(T_T)

普通に更新していけば、100件なんてあっという間ですから、今後は、出来たばかりか放置ブログを除くほとんどのブログで、全記事一覧ページが複数ページで表示されることになると思います。

拙作テンプレの全記事一覧ページは、hatena様のスクリプトをお借りする事で、JavaScript有効時は、自働的に親子カテゴリに対応してカテゴリ別に分類表示されます。30話を超える長編作品の場合の総目次としての役目も担っておりましたが、今回の仕様変更によってそれも危うくなりました。
1ページに100件しか表示されないとなると、例えカテゴリ別に表示させても、同じカテゴリ(作品)であっても、肝心の記事タイトルが複数ページに分割されて表示されてしまう事もあるからです。

しかし、記事タイトルを親子カテゴリ別に一覧できる全記事一覧ページは長編作品にとっては必用不可欠です。
現状では、自動表示は無理ですが、手作業なら可能です。以下はそのカスタマイズのご紹介です。


カスタマイズの方法
テンプレートのHTMLのタイトルリストエリア(全記事一覧ページ)内の現状のソースを一部削除し、直接カテゴリ別の目次のソースを記載していきます。一つ一つ手打ちで記載するのは大変ですし、かえって間違えやすいので、目次表示用のテンプレートを用意し、そこで表示された(目次)画面のソースをコピペしていきます。

注意 但し、ただでさえ、遠大なHTMLを有する拙作テンプレの場合、追加するソース、つまり記事数が多くなると、テンプレートの更新に異常に時間がかかったり、時にフリーズしてしまうことがあります。記事数が多い場合はテンプレートの負荷を減らすため、別テンプレートで全記事一覧ページを表示させる事をおススメします。
詳しくはclick50 全記事一覧ページ(総目次)を別テンプレートで作成する参照
目次表示用のテンプレートを用意する

最初に現在適用中のテンプレートのコピーをして目次表示用にカスタマイズします。


[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く

開いたページのリスト、左側の【適用】欄に赤い旗印akahata.gifがついた列の
 複製 をクリック

適用中のテンプレートがコピーされ、その編集画面が開きます。

次にそのコピー(テンプレート)の名前を変更します。

コピーの名前を  Cat_List に変更します。

Cat_List     【 更新 】
変更する名前【 Cat_List】を記入して
更新 】 をクリック

テンプレートのコピー・名前の変更について詳しくは コチラ

コピー(テンプレート)の名前が  Cat_List に変更されました。

次にこのテンプレートCat_List のHTMLを目次表示用に差し替えます。

適用中のテンプレートが
PFタイプ・PF2タイプの場合は コチラ をクリック
PFタイプ・PF2タイプ以外の場合は コチラ をクリック

表示された画面にカーソルをもっていき

右クリック⇒【全て選択】⇒右クリック⇒【コピー

そのままカーソルをCat_List の 【HTMLの編集画面】にもっていき

右クリック⇒【全て選択】⇒右クリック⇒【貼りつけ

更新 】 をクリック

目次表示用のテンプレートが準備できました。
次に、適用中のテンプレートのHTMLから不要になるソースを削除します。

適用中(メイン)のテンプレートの下準備

Cat_Listの編集画面はそのままにして、別窓で適用中のテンプレートの編集画面を開きます。

【適用】欄に赤い旗印akahata.gifがついた列の 編集 を右クリック
 ⇒ 【新しいウィンドウで開く】 をクリック

[HTMLの編集]画面をカスタマイズします

適用中のテンプレートがPFタイプ・PF2タイプの場合は【1】を、それ以外の場合は【2】と【3】の個所をHTMLの中から探し、不要な部分を削除します。

【1】適用中のテンプレートがPFタイプ・PF2タイプの場合
赤色の個所だけを残しそれ以外は削除。

<!--▽All 全記事一覧ページ-->
<!--titlelist_area-->

<h2>All Titlelist 〜
<noscript>更新順 </noscript>全記事一覧〜</h2>
<div class="entry">

<!--(1)初期設定ではJavaScriptがオンの時はカテゴリ別、オフの時は更新順に表示されます。JavaScriptがオフの時も更新順で表示させる場合はここから(2)までのソースと(3)の行を削.除してください↓-->

<!--▼カテゴリー別タイトルリスト-->

<div style="display:none">

<ul>
<!--titlelist-->
<li Name="tcat<%titlelist_category_no>" id="tcat<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
-<font style="font-size:90%"><%titlelist_year>.<%titlelist_month>.<%titlelist_day>.</font>
<!--▼newマーク▼-->
<script type="text/javascript" charset="<%template_charset>">
nw2(<%titlelist_year>,<%titlelist_month>,<%titlelist_day>,<%titlelist_hour>)
//--></script>
<!--▲newマーク▲-->

</li>
<!--/titlelist-->
</ul>
</div>

<div style="display:none"id="javaoff" class="entry_all">

<!--category-->

〜 中略 〜



<!--↓(3)カテゴリ別ではなく更新順で表示させる場合はこの行を削.除-->
</noscript>
<!--↑(3)カテゴリ別ではなく更新順で表示させる場合はこの行を削.除-->
</div>
<ul class="entry_navi">
<li> <!--prevpage--><a href="<%prevpage_url>">  <i>Back</i>  </a><!--/prevpage--></li><li><!--nextpage--><a href="<%nextpage_url>">  <i>Next</i>  </a><!--/nextpage--> </li>

</ul>
<!--/titlelist_area-->
<!--△All 全記事一覧ページ-->


【2】適用中のテンプレートがPFタイプ・PF2タイプ以外の場合
赤色の個所だけを残しそれ以外は削除。


<!--▽All 全記事一覧ページ-->
<!--titlelist_area-->
<h2 id="all-title">All Titlelist 〜全記事一覧〜</h2>

<!--(1)初期設定ではJavaScriptがオンの時はカテゴリ別、オフの時は更新順に表示されます。JavaScriptがオフの時も更新順で表示させる場合はここから(2)までのソースと(3)の行を削.除してください↓-->

<!--▼カテゴリー別タイトルリスト-->

<div style="display:none">

<ul>
<!--titlelist-->
<li Name="cat<%titlelist_category_no>" ID="cat<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
- <span class="mini"><%titlelist_year>.<%titlelist_month>.<%titlelist_day>.</span>
<!--▼newマーク▼-->
<script type="text/javascript" charset="utf-8">
nw2(<%titlelist_year>,<%titlelist_month>,<%titlelist_day>,<%titlelist_hour>)
//--></script>
<!--▲newマーク▲-->

</li>
<!--/titlelist-->
</ul>
</div>


<div style="display:none"id="javaoff" class="entry_all">

<!--category-->


〜 中略 〜


<!--↓(3)カテゴリ別ではなく更新順で表示させる場合はこの行を削.除-->
</noscript>
<!--↑(3)カテゴリ別ではなく更新順で表示させる場合はこの行を削.除-->

<!--/titlelist_area-->
<!--△All 全記事一覧ページ-->


【3】PFタイプ・PF2タイプ以外の場合ページナビゲーション
PFタイプ・PF2タイプ以外のテンプレートの場合、タイトルリストのページナビゲーションも不要になるので、
上とは別に以下の個所を探し、青色の個所を削除。



<!--▼ページナビゲーション▼-->
<!--tag_area-->
<ul class="entry_navi">
<!--prevpage--><li class="back"><a href="<%prevpage_url>">Back</a></li><!--/prevpage-->
<!--nextpage--><li class="next"><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul>
<!--/tag_area-->

<!--category_area-->
<ul class="entry_navi">
<!--prevpage--><li class="back"><a href="<%prevpage_url>">Back</a></li><!--/prevpage-->
<!--nextpage--><li class="next"><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul><!--/category_area-->

<!--titlelist_area-->
<ul class="entry_navi">
<!--prevpage--><li class="back"><a href="<%prevpage_url>">Back</a></li><!--/prevpage-->
<!--nextpage--><li class="next"><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul>
<!--/titlelist_area-->

<!--▲ページナビゲーション▲-->



【1】と【2】の不要な部分を削除した後、以下の様に<div class="entry_all"></div>を追加します。
(後ほど、この<div class="entry_all"></div>の間に目次用のソースをコピペしていくことになります。)
PFタイプ・PF2タイプの場合

<!--▽All 全記事一覧ページ-->
<!--titlelist_area-->

<h2>All Titlelist 〜全記事一覧〜</h2>
<div class="entry">
<!--titlelist_area-->
<!--/titlelist_area-->

<div class="entry_all">

/////////ここに目次のソースを貼りつける////////////////////

</div>

</div>
<!--/titlelist_area-->
<!--△All 全記事一覧ページ-->



PFタイプ・PF2タイプ以外の場合

<!--▽All 全記事一覧ページ-->
<!--titlelist_area-->

<h2 id="all-title">All Titlelist 〜全記事一覧〜</h2>

<!--titlelist_area-->
<!--/titlelist_area-->

<div class="entry_all">

/////////ここに目次のソースを貼りつける////////////////////

</div>


<!--/titlelist_area-->
<!--△All 全記事一覧ページ-->




更新 】 をクリック

これで、適用中のテンプレートの下準備ができました。

目次用ソースをコピペする

もう一度、Cat_Listの編集画面に戻ります。


プレビュー】をクリック

画面左側にはカテゴリタイトルが並んだカテゴリリストが表示されます。
このリストでは、親カテゴリタイトルは表示されていてもリンクはしていません。
子カテゴリもしくは、子カテゴリを持たない単独カテゴリのみリンクしています。
上から順番にカテゴリタイトルをクリックし、表示された目次画面のソースをコピペしていきます

カテゴリタイトルをクリック

適用中のテンプレートの全記事一覧ページと同じスタイルで、そのカテゴリの目次が表示されます。
次に、この画面のソースを表示させます。

IEの場合 画面上部ツールバー 【表示】をクリック⇒【ソース】をクリック

IE以外の場合 キーボード Ctrl  U

目次画面のソースが表示されますので、<div class="entry_all">〜</div>の部分を探します。
以下は拙宅ブログカテゴリ番号5、カテゴリタイトル テンプレートについてのソースです。

<div class="entry_all">


<!--【A】▼▼親カテゴリタイトル▼▼-->
<div id="all12"> </a></div><br /><h2>テンプレートマニュアル</h2>
<!--▲▲親カテゴリタイトル▲▲-->


<!--【B】▽カテゴリ番号【5】ココから▽▽▽▽-->

<!--▼子カテゴリタイトル▼-->
<div id="all5"> </a><br /><h3> テンプレートについて<a href="http://noveltemplate.blog26.fc2.com/?cat=5&template=Cat_List" target="_blank" >.</a></h3></div>
<!--▲子カテゴリタイトル▲-->

<ul>

<!--【C】▼▼▼記事タイトル▼▼▼-->
<li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-34.html">Novelテンプレートの特色</a>
- <span class="mini">2009.02.28.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-53.html">利用規約</a>
- <span class="mini">2009.02.28.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-35.html">五つの基本設定</a>
- <span class="mini">2009.02.28.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-41.html">Novelテンプレートのつくり</a>
- <span class="mini">2009.03.01.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-56.html">テンプレートのコピー・差し替え・名前の変更</a>
- <span class="mini">2009.03.01.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-394.html">よくあるご質問 (作成途中・随時追加)</a>
- <span class="mini">2010.06.16.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-421.html">背景画像を変更してのご利用をご希望の場合</a>
- <span class="mini">2010.08.23.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-461.html">夢小説用テンプレートの設定</a>
- <span class="mini">2010.11.26.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-481.html">初めてのNovelテンプレートカスタマイズ</a>
- <span class="mini">2011.01.25.</span> </li><li><a href="http://noveltemplate.blog26.fc2.com/blog-entry-492.html">一般用テンプレート固有の仕様とカスタマイズ</a>
- <span class="mini">2011.02.20.</span> </li>
<!--【D】▲▲▲記事タイトル▲▲▲-->

</ul>

<p class="back-top co_num"><a href ="#pagetop" title="↑ページトップへ">PageTop▲</a></p>

<!--【E】△カテゴリ番号【5】ココまで△△△△-->


</div>



上のカテゴリ番号5『テンプレートについて』 は親カテゴリ 『テンプレートマニュアル』の先頭子カテゴリになります。

先頭子カテゴリの場合は 赤色の部分青色の部分両方(【A】から【E】まで)を
それ以外のカテゴリの場合は 青色の部分(【B】から【E】まで)だけをコピーし、先ほど下準備した適用テンプレートの所定の個所 <div class="entry_all"></div>の間に上から順番に貼りつけていきます。

記事件数が30件を超えるカテゴリの目次は複数ページとなります。
次ページ以降は、記事タイトルのソース(【C】から【D】まで)だけをコピぺして追加してください。

全てのカテゴリの目次ソースを適用テンプレートにコピペし終えたら


更新 】 をクリック

今後の作業と確認

当然ながら、手作業で作成したこの全記事一覧ページは、新しく記事をアップしても、自働的に更新されることはありません。
新記事を更新したら、その度、その記事へのリンクソースを、手作業で、HTMLに追加していかなければなりません。

カスタマイズが完了した全記事一覧ページの、メイン表示部分の親カテゴリ以外のカテゴリタイトルの右には、目立たないですが、小さなドットが表示されているはずです。
このドットは、 Cat_List の該当カテゴリ目次ページにリンクしています。
クリックすると表示されるこのカテゴリ目次は、自動的に更新されていきますので、更新記事のリンクソースや記載漏れがないかのご確認に御利用ください。

次ページ は
⇒ 目次 [5] から

申し訳ありません<(_ _)>
一旦[目次]へ戻らないと
ペーシ移動できません

2013/08/20 

[6] コメントを書く
[7] コメントを読む (2)
[8] トラックバック (0)
menu
ログイン
友達に教える