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

hosi5.gifカスタマイズの難易度5

記事数が100件を超える場合、全記事一覧ページ(総目次)を1ページで表示するには、適用中のテンプレートのHTMLをカスタマイズし、記事を更新する度に記事タイトルとリンクを一覧ページに追加する作業が必要になります。詳しくはclick50 全記事一覧ページ(総目次)を1ページで作成する参照

しかし、ただでさえ、遠大なHTMLを有する拙作テンプレの場合、全記事一覧ページの手書きソースが追加すると、テンプレートの更新に異常に時間がかかったり、時にフリーズしてしまうことがあります。

以下は、こうした事態を避け、テンプレートの負荷を減らすため、別テンプレートで全記事一覧ページを表示させるためのカスタマイズです。

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

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

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

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

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

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

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

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


All_List     【 更新 】
変更する名前【 All_List】を記入して
更新 】 をクリック
テンプレートのコピー・名前の変更について詳しくは click50 コチラ

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

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

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

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

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

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

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

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

プレビュー 】 をクリック

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

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



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

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

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

tiyuumoku-ani02.gif既に全記事一覧ページ(総目次)を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に追加していかなければなりません。
それらの作業と確認についてはclick50 コチラをご参照ください。

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

メインテンプレートのHTMLの中から <%url>?all&template=All_List#all が以下の様なソースで囲まれている個所を探します。例1例2とも、複数箇所あります。
変数 <%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>


(例 2)

<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>






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

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

2014/09/09 

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