全記事一覧ページ(総目次)を別テンプレートで作成する

カスタマイズの方法

全記事一覧ページ(総目次）用の別テンプレート（以下サブテンプレートとする）を用意する。
現在適用中のテンプレート(以下メインテンプレートとする)のHTML内の全記事一覧ページ(総目次）へのリンク先を(サブテンプレートのアドレスに)変更する。

サブテンプレートのカスタマイズ

最初に現在適用中のテンプレートをコピーします。

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

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

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

このコピー（テンプレート）の名前を変更します。

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

このテンプレートの名前は任意のものではなく、必ずAll_Listにします。

All_List

【 更新 】

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

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

コピー（テンプレート）の名前が 　All_List　に変更されました。

このテンプレートAll_List　のHTMLを全記事一覧ページ(総目次）表示用に差し替えます。

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

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

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

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

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

これでサブテンプレートの枠組みとなる部分が準備できました。
プレビューをクリックして確認します。

【 プレビュー 】 をクリック

メイン表示はまだなく、代わりに、以下のように表示されていればOKです。

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

HTML内に記述された上の部分を探し、そこに総目次のソースを貼りつけていきます。

総目次のソースについては、「全記事一覧ページ(総目次)を1ページで作成する」で解説しておりますのでご覧ください。

この記事で解説している『目次表示用のテンプレートを用意する』と『目次用ソースをコピペする』を参照してください。
『適用中(メイン)のテンプレートの下準備』については必用ありません。
目次表示用のテンプレートを用意し、その中の必用な個所をそのままコピーしてサブテンプレートの指定された個所に貼りつければOKです。

既に全記事一覧ページ(総目次)を1ページで作成済みの場合は、メインテンプレート内の全記事一覧ページのソース<div class="entry_all">～</div> を切り取り、それをそのまま、サブテンプレートの同じ個所に貼りつけてください。全記事一覧のソースを削除することで、メインテンプレートの負荷も軽くなります。

尚、アクセス解析、アクセスカウンター等を設置する場合は、メインテンプレートに設置したタグを、そのままコピペしてサブテンプレート内の指定してある位置に貼りつけてください。

メインテンプレートのカスタマイズ

サブテンプレートは用意できましたので、次にメインテンプレートのカスタマイズをします。
HTML内の全記事一覧ページ(総目次）へのリンク先を　<%url>archives.html　からサブテンプレートのアドレス　<%url>?all&template=All_List　に変更します。

テンプレートのカスタマイズの前に、パソコンのメモ帳を開いておきます。

メモ帳の開き方がわからないかた

パソコン画面の【スタート】ボタンをクリックしてください。
スタートメニューが表示されたら、その左列にメモ帳も並んでいると思いますので、それをクリック。
そこにない方は、【すべてのプログラム】をクリックして探します。

管理画面は、サブテンプレート　All_List　の編集画面になっていますので、メインテンプレートの編集画面を別窓で開きます。
テンプレートのリストの中、適用中のテンプレートには左側に赤い旗が付いています。
その赤い旗のついている欄の【編集】を右クリック⇒【新しいウィンドウで開く】もしくは【新しいタブで開く】をクリック⇒メインテンプレートの編集画面を開きます。

PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集　　　　　　　　　こんなふうに上から順番に並んでいます。

［HTML編集］部分をカスタマイズします

メインテンプレートのHTMLをメモ帳へコピペします。


カーソルをHTML編集のテキストエリアにもってゆき、

右クリック　⇒　【すべて選択】をクリック　
反転したらもう一度
　右クリック　⇒　【コピー】をクリック

そのままカーソルをさっき開いたメモ帳の上に持ってゆき、

右クリック　⇒　【貼り付け】をクリック

メモ帳に、テンプレートのHTMLが丸ごとコピペされたと思います。ここからはメモ帳の上での作業になります。

メモ帳の置き換え機能をつかって文字列を変換します。

メモ帳のツールバーの、

【編集】⇒【置き換え】をクリック

細長く小さな別窓が開かれます。

　その窓の【検索する文字列】の欄に
<%url>archives.html　　
【置き換えする文字列】の欄に
<%url>?all&template=All_List　と入れて
【すべて置き換え】をクリック

置き換えが終わったら、

　右クリック　⇒　【すべて選択】をクリック　
反転したら
もう一度　右クリック　⇒　【コピー】をクリック

ブログ画面にもどって、さきほどのHTMLの編集テキスト部分に、カーソルを持ってゆき、

右クリック　⇒【すべて選択】をクリック　
反転したら
もう一度右クリック　⇒　【貼り付け】をクリック

これでメインテンプレートの全記事一覧ページのリンク先アドレスは、サブテンプレートになったはずです。念の為に、

【 プレビュー 】 をクリックして確認します

（実際のページではなく、プレビュー画面です。この時点ではまだ、実際のブログは変更が反映されていません。）
プレビューされたメインテンプレートの表紙ページのメニューにある全記事一覧ページへのリンクボタンALLをクリックします。
全記事一覧ページがサブテンプレートで表示されていたら

【 更新 】 をクリック

フッター部分（素材サイト様のリンク変更）

最後にサブテンプレートのフッター部分、素材サイト様のリンクを変更します。
テンプレートと素材サイト様の著作権表示の変更削除は禁止です。必ず、適用中のテンプレートの素材サイト様のリンクを正しく変更表示してください。
メインテンプレートのフッター部分のHTMLをスクロールしてフッター部分を探します。

novel-PF・PFタイプの場合の例　フッター(2)と間違えないように注意！

</div><!--/entry_body-->


<!--▼ HTMLやスタイルシートを交換する場合はここから差し替えてください-->
<!--▼▼▼▼ フッター(1)（ FC2 コピーライト ）▼▼▼▼-->
<!-- ※ FC2の著作権表示・広告等は消せません -->
<div class="footer">
copyright &copy; <%blog_name> all rights reserved. <br />
Material ： <a href="素材サイトアドレス" target="_blank" title="">素材サイト名</a>
　Template by <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel Template</a>
<br /><%ad>  <%ad2>
</div>
<!-- ※ FC2の著作権表示・広告等は消せません -->
<!--▲▲▲▲ フッター(1)（ FC2 コピーライト ）▲▲▲▲-->
<!--▲ HTMLやスタイルシートを交換する場合はここまで差し替えてください-->

</div><!--/main_box-->

novel-PF・PFタイプ以外の場合の例

<!--▼▼フッター▼▼-->
<div class="layout_footer">

<!--▼コピーライト HTMLやスタイルシートを交換する場合はここから差し替えてください-->
<div class="copyright">
Copyright &#169; <a href="<%url>"><%blog_name></a> All Rights Reserved.<br />

Material　：<a href="素材サイトアドレス" target="_blank" title="">素材サイト名</a>
　Template By <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel テンプレート</a>
<br />
<!--削除不可広告開始--><%ad> <%ad2><!--削除不可広告終了--></div>


<!--▲コピーライト スタイルシートを交換する場合はここから差し替えてください-->
</div>
<!--▲▲フッター▲▲-->

青字の部分は素材サイト様の著作権リンクです。

青色の部分、もしくはフッター部分を丸ごとコピペし、サブテンプレートの同じ個所と差し替えます。

【 更新 】 をクリック

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

　余力がある方へオススメ

これで、カスタマイズは一応完了です。
元々拙作テンプレは、JavaScript有効時にはカテゴリ別のタイトルリスト(親子カテゴリ対応)が表示され、JavaScript無効時には更新順に表示されます。
そのため、ご紹介したカスタマイズもスクリプト無効時には、（All以外）作品の総目次としてのリンクは、メインテンプレートの親カテゴリ目次ページが表示されてしまいます。
しかし、本来サブテンプレートで全記事一覧ページを表示させた場合は、スクリプト有効、無効に左右されません。
上のカスタマイズは簡略化のため、メインテンプレート内の全ての全記事一覧ページのリンク先を一斉に文字列を入れ替えて変更させましたが、All以外の作品の総目次リンクは、そのスクリプトを削除しソースを変更すれば、スクリプト無効時にも、サブテンプレートで表示させることができます。
多少面倒ですが、余力のある方はお試しください。

メインテンプレートのHTMLの中から　<%url>?all&template=All_List#all　が以下の様なソースで囲まれている個所を探します。例１例２とも、複数箇所あります。
変数 <%category_no>　や　<%topentry_no>　の前後のアルファベットは　それぞれのテンプレートによって、また使われている個所によって変動しますが、　変数とアルファベットで構成された個々のID　つまり、　id="XXX"　 と　getElementByIdID("XXX")　のXXXにあたる部分は必ず同じ文字列で対になっています。
（例　1）

<a id="ABC<%category_no>D" href="<%category_link>" title="【 <%category_name> 】総目次へ"><%category_name></a><script type="text/javascript" charset="utf-8">
var a = document.getElementById("ABC<%category_no>D");
a.href = "<%url>?all&template=All_List#all<%category_no>";
</script>

↓赤色の個所を削除し、青色の個所を以下に変更

<%url>?all&template=All_List#all<%category_no>

（例　２）

<a id="EFG<%topentry_no>H" href="<%topentry_parent_category_link>" title="【 <%topentry_parent_category> 】 全体目次" ><%topentry_parent_category></a>
<script type="text/javascript" charset="utf-8">
var a = document.getElementById("EFG<%topentry_no>H");
a.href = "<%url>?all&template=All_List#all<%topentry_parent_category_no>";
</script>

↓赤色の個所を削除し、青色の個所を以下に変更

<%url>?all&template=All_List#all<%topentry_parent_category_no>