Novel テンプレート

以下は改訂前の記事ですので折りたたんであります。

特定のカテゴリの目次ページのカスタマイズ

1）特定のカテゴリの目次に説明などを追加
2）記事タイトルが通し番号のカテゴリの目次を横並びで表示する
3）アルバムのように画像を一覧表示する
4）カタログのように飾り枠付きの画像と説明文を添えて表示する
5）【novel-PF タイプ】特定のカテゴリの目次の背景画像を変更する
6）【novel-R タイプ】特定のカテゴリの目次の背景画像を変更する
7）【novel-PF・novel-R タイプ以外のテンプレート】特定のカテゴリの目次の背景画像を変更する

テンプレート別に、特定のカテゴリの背景を変更するカスタマイズをご紹介します。

【novel-PF タイプ】　の場合

まずはどういう風になるのかサンプルの目次をごらんください。
背景画像を変更した例　サンプル
背景画像と文字色を変更した例　サンプル

まずはどういう風になるのかサンプルの目次をごらんください。
背景画像を変更した例　サンプル
背景画像と文字色を変更した例　サンプル

このカスタマイズは、HTMLの中で背景を指定している要素やブロックに、カテゴリ番号を示す変数<%cno>を含めた第二のクラス名を追加し、スタイルシートでは、その<%cno>を背景を変更するカテゴリの番号に変えた上で、変更内容を指定するものです。
ここでは、どうすればカテゴリ別に目次ページの背景を設定できるかについては解説させていただきますが、表示させる背景画像の位置・並べ方など具体的な表示設定の説明は省略させていただきます。実際に背景画像を変更する場合は、ある程度のHTMLとスタイルシートの知識が必要になりますが、それらについては、ＨＰ作成支援ｻｲﾄさま、ハウツー系サイトさまなどをご参考にご自力でお願いいたします。個人的なデザイン変更のためのサポートは出来かねますので、それらに関するご質問・お問い合わせはご遠慮ください。

ご参考までに　　　ＴＡＧ＜Index＞さまの解説ページ
　　　　　　　　　　　背景画像の表示位置を指定する
　　　　　　　　　　　背景画像の並び方を指定する

カテゴリの番号の確認

テンプレートのカスタマイズに取り掛かる前に、表示を変更したいカテゴリのカテゴリ番号を確認しておきます。カテゴリ番号は［カテゴリの編集］画面のカテゴリ一覧リストの一番左、#　をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。

背景画像だけを変更する

☆　カスタマイズの前にはコピーをとりましょう！コピーのとり方は こちら 　

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

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

最初に、［ＨＴＭＬ編集］部分をカスタマイズします。

以下はカテゴリ番号１の目次ページだけを、他のカテゴリの目次ページとは違う背景にする場合です。
ＨＴＭＬをスクロールしていき、赤字の部分を追加します。

<!-- アクセス解析タグはここから -->

<!-- アクセス解析タグはここまで -->

<!--▼▼▼▼右フレーム（メインボックス）▼▼▼▼-->

<div class="main_frm cat_bg<%cno>">

<div class="main_box">

<a name="pagetop" id="pagetop"></a>

<!--▼個別記事ﾍﾟｰｼﾞ▼-->
<!--permanent_area-->

main_frm と　cat_bg<%cno>　の間には半角スペースを入れるのをお忘れなく！

次に、［スタイルシートの編集］部分をカスタマイズします。

スタイルシートに以下の内容を追加します。どこでもよいのですが、わかりやすいように、スタイルシートの最後部分に一行空けて追加するとよいでしょう。青の大文字の数字は背景を設定するカテゴリ番号をいれ、赤字の部分に背景とする画像のアドレスを入れます。

#category .cat_bg1 { margin:0 0 0 0; padding:0; height:100% ; overflow:auto;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/snowbg1.gif");
background-attachment: fixed;background-repeat : repeat ;
}

上の例は全面に繰り返し表示した場合です。背景画像はその並び方・位置などによって記述の仕方は違いますので、詳しくはＨＰ作成支援サイトさまなどでご確認ください。

背景画像にあわせて文字色も変更する

上は背景画像だけを変更した例ですが、背景色が白のページを黒背景に変更した場合などは、上のカスタマイズに加えて表示されている記事タイトルなどの文字色も変更する必要があります。以下はカテゴリ番号２の「銀河鉄道の夜」を変更した黒背景にあわせて、作品タイトル、目次見出し、記事タイトルの文字色（リンク色）を変更した場合です。（実際のページに表示されている汽車の画像などは以下に含まれません）

［ＨＴＭＬ編集］部分のカスタマイズ。
ＨＴＭＬをスクロールして以下の箇所を探し、赤字の部分を追加します。

ヘッダー（タイトル部分）↓

<!--▼▼▼▼ ヘッダー（タイトル部分）▼▼▼▼-->
<div class="header">

<!--not_category_area--><!--not_tag_area-->
<h1><a href="<%url>"> <%blog_name></a></h1>
<!--/not_tag_area--><!--/not_category_area-->

<!--tag_area--><h1>Novel List <%sub_title></h1><!--/tag_area-->

<!--category_area-->
<!--▽作品タイトル-->
<h1 id="daimei<%cno>"><span class="topic_path"><script languege="JavaScript">

　　
～　中　略　～

</Script></span><center><%sub_title></center></h1>
<!--△作品タイトル-->
<!--/category_area-->

カテゴリエリア↓

<!--▽作品目次（カテゴリ）ページ▽-->
<!--category_area-->

<h2 id="mokuji<%cno>">～　Index　～</h2>

<div class="entry">


<div class="entry4 index_cat<%cno>">

<br />
<!--▼タイプ①　縦ならび目次（一話ごとにサブタイトルをつける場合）▼-->
<p><ul style="list-style-type:square;"><!--topentry--><li>
<a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>"><%topentry_title></a> <script type="text/javascript">
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script></li><!--/topentry--></ul>
<br />
</p>
<!--▲タイプ①　縦ならび目次（一話ごとにサブタイトルをつける場合）▲-->

［スタイルシートの編集］部分のカスタマイズ。
スタイルシートに追加した内容。赤の数字は背景を設定するカテゴリ番号です。

/*カテゴリ番号２「銀河鉄道の夜」背景画像設定*/
#category .cat_bg2 { margin:0 0 0 0; padding:0; height:100% ; overflow:auto;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/sunset0235.jpg");
background-repeat : repeat ;
background-position : left top;
background-attachment: fixed;background-color: #000000;
}

/*作品タイトル*/
h1#daimei2 { margin: 0 0 0 0 ; padding: 0 0 0 0 ;
color : #ffffff; font-size : 130%;
background-image : none;}

/*作品タイトル（リンク）*/
h1#daimei2 a:link, h1#daimei2 a:visited {
color: #ffffff; font-size: smaller; font-weight : bold ; border-bottom : 2px dotted #ffffff ; }
h1#daimei2 a:active, h1#daimei2 a:hover {
color : #000000; background-color : #ffffff; font-weight : bold ; font-size: 100%;text-decoration : none;}

/*もくじ見出し*/
h2#mokuji2 { color : #C2A858;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/hoshi04.gif");
background-repeat : no-repeat ;
background-position : left top;
}

/*記事タイトルの文字色（リンク色）*/
.index_cat2 a:link { color : #ffffff; background-color : transparent; text-decoration:none;}
.index_cat2 a:active { color: #C2A858; text-decoration:none;background-color : #000000;}
.index_cat2 a:visited { color : #ffffff; background-color : transparent; text-decoration:none;}
.index_cat2 a:hover { color: #C2A858; text-decoration:none;background-color : #000000;}

【 更新 】 をクリックする。

　ご注意！
サポートはしない方針ですが一つだけ。背景に設定する画像が、タイル（敷き詰め）や部分固定ではなく、大きな一枚画像を用いる場合は、解析度の違いによる表示のずれにご注意ください。ご自分のパソコンでは問題なく表示されているように見えても、解析度の違う画面では、画像の位置が著しくずれて表示されている場合が多々あります。一枚画像を背景に使われる場合は、解析度の違いによる表示を以下の方法でご確認なさることをおススメします。
窓を全て閉じ、何もない場所にカーソルをおいて右クリック⇒【プロバティ】⇒【設定】⇒サイズ変更⇒【ＯＫ】⇒画面が一瞬真っ暗になります⇒変更した解析度の画面⇒ブログを確認

以下は改訂前の記事ですので折りたたんであります。

カスタマイズ

特定のカテゴリの目次ページのカスタマイズ

1）特定のカテゴリの目次に説明などを追加
2）記事タイトルが通し番号のカテゴリの目次を横並びで表示する
3）アルバムのように画像を一覧表示する
4）カタログのように飾り枠付きの画像と説明文を添えて表示する
5）【novel-PF タイプ】特定のカテゴリの目次の背景画像を変更する
6）【novel-R タイプ】特定のカテゴリの目次の背景画像を変更する
7）【novel-PF・novel-R タイプ以外のテンプレート】特定のカテゴリの目次の背景画像を変更する

テンプレート別に、特定のカテゴリの背景を変更するカスタマイズをご紹介します。

【novel-R タイプ】　の場合

まずはどういう風になるのかサンプルの目次をごらんください。
novel-R-Paradiseをコピーしたテンプレートをnovel-R-Sampleと名前を変えてカスタマイズした例です。
普通の目次ページの背景画像は海ですが　サンプル
カテゴリ番号１の「雪の女王」の目次ページの背景は雪景色　サンプル
カテゴリ番号２の「銀河鉄道の夜」の目次ページの背景は銀河　サンプル

ここでは、どうすればカテゴリ別に目次ページの背景を設定できるかについては解説させていただきますが、表示させる背景画像の位置・並べ方など具体的な表示設定の説明は省略させていただきます。実際に背景画像を変更する場合は、ある程度のスタイルシートの知識が必要になりますが、それらについては、ＨＰ作成支援ｻｲﾄさま、ハウツー系サイトさまなどをご参考にご自力でお願いいたします。個人的なデザイン変更のためのサポートは出来かねますので、それらに関するご質問・お問い合わせはご遠慮ください。

ご参考までに　　　ＴＡＧ＜Index＞さまの解説ページ
　　　　　　　　　　　背景画像の表示位置を指定する
　　　　　　　　　　　背景画像の並び方を指定する

カテゴリの番号の確認

テンプレートのカスタマイズに取り掛かる前に、表示を変更したいカテゴリのカテゴリ番号を確認しておきます。カテゴリ番号は［カテゴリの編集］画面のカテゴリ一覧リストの一番左、#　をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。
☆　カスタマイズの前にはコピーをとりましょう！コピーのとり方は こちら 　

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

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

最初に、［ＨＴＭＬ編集］部分をカスタマイズします。


ＨＴＭＬをスクロールしていき、赤字の部分を追加します。

<body id="<!--index_area-->index<!--/index_area--><!--permanent_area-->permanent<!--/permanent_area--><!--date_area-->date<!--/date_area--><!--category_area-->category<!--/category_area--><!--search_area-->search<!--/search_area-->
<!--tag_area-->tag<!--/tag_area-->
<!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area-->
<!--not_index_area--><!--not_permanent_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area--><!--not_edit_area-->
<!--not_titlelist_area-->page<!--/not_titlelist_area--><!--/not_edit_area--><!--/not_tag_area--><!--/not_search_area-->
<!--/not_category_area--><!--/not_date_area--><!--/not_permanent_area--><!--/not_index_area-->">

<div class="layout_body cat_bg<%cno>">


<!-- アクセス解析タグはここから -->

<!-- アクセス解析タグはここまで -->

layout_body と　cat_bg<%cno>　の間には半角スペースを入れるのをお忘れなく！

次に、［スタイルシートの編集］部分をカスタマイズします。

以下はカテゴリ番号１の「雪の女王」の目次ページとカテゴリ番号２の「銀河鉄道の夜」の目次ページを、それぞれ別のデザインで表示させる例です。

スタイルシートに以下の内容を追加します。どこでもよいのですが、わかりやすいように、スタイルシートの最後部分に一行空けて追加するとよいでしょう。青の大文字の数字は背景を設定するカテゴリ番号をいれ、赤字の部分に背景とする画像のアドレスを入れます。

#category .cat_bg1 {
margin : 0 ; padding : 0 ;
background-color : transparent ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/f-long2-ws.jpg");
background-attachment : fixed ; background-repeat : no-repeat ;
background-position : left bottom ;
}

#category .cat_bg2 {
margin : 0 ; padding : 0 ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/s33-milkyway01.jpg");
background-color:#000000 ;
background-repeat: no-repeat ; background-position : 10% 0% ;
background-attachment: fixed ;
}

背景画像はその並び方・位置などによって記述の仕方は違いますので、詳しくはＨＰ作成支援サイトさまなどでご確認ください。

novel-R タイプのテンプレートは右側のテキスト部分は白背景になっています。このテキスト部分の背景を変更する場合には、カテゴリエリアに含まれる全ての見出しやブロックに第二のクラス名をつけ、それぞれ設定を追加する必要があり、非常に面倒です。初心者の方でそこまで試みる方はそうそういらっしゃらないと思いますので説明は省かせていただきます。もしも、トライなさる場合は、変更箇所は多いですが、クラス名のつけ方やその設定の方法は、前ページ「カテゴリ別に目次をカスタマイズ ⑤」と同じですので、ご自力でお願いいたします。

【 更新 】 をクリックする。

　ご注意！
背景に設定する画像が、タイル（敷き詰め）や部分固定ではなく、大きな一枚画像を用いる場合は、解析度の違いによる表示のずれにご注意ください。ご自分のパソコンでは問題なく表示されているように見えても、解析度の違う画面では、画像の位置が著しくずれて表示されている場合が多々あります。一枚画像を背景に使われる場合は、解析度の違いによる表示を以下の方法でご確認なさることをおススメします。
窓を全て閉じ、何もない場所にカーソルをおいて右クリック⇒【プロバティ】⇒【設定】⇒サイズ変更⇒【ＯＫ】⇒画面が一瞬真っ暗になります⇒変更した解析度の画面⇒ブログを確認

以下は改訂前の記事ですので折りたたんであります。

特定のカテゴリの目次ページのカスタマイズ

1）特定のカテゴリの目次に説明などを追加
2）記事タイトルが通し番号のカテゴリの目次を横並びで表示する
3）アルバムのように画像を一覧表示する
4）カタログのように飾り枠付きの画像と説明文を添えて表示する
5）【novel-PF タイプ】特定のカテゴリの目次の背景画像を変更する
6）【novel-R タイプ】特定のカテゴリの目次の背景画像を変更する
7）【novel-PF・novel-R タイプ以外のテンプレート】特定のカテゴリの目次の背景画像を変更する

novel-PFタイプやnovel-Rタイプの目次ページは背景が全面表示されており、カテゴリ別に背景を変更するカスタマイズが割りと簡単かつ、効果的なので例に挙げてご説明いたしました。

それ以外のテンプレートの場合も、「特定の個別記事ページの背景を変更する」でご紹介した方法で、記事番号<%pno>をカテゴリ番号<%cno>に変更すれば、少なくともカラム外側の背景だけは簡単に変更できます。

但し、novel-PF・novel-Rタイプ以外のテンプレートの場合、カラムの外側の背景を変更しただけではさほど効果的とは申せません。けれども、カラムの内側の背景を変更する場合は、変更箇所、変更内容、またテンプレートによって微妙に異なる複雑なカスタマイズが必要となります。残念ながら、それぞれのテンプレートのそれぞれのケースを、初心者の方がご理解いただけるように一つ一つ解説してゆく余裕は管理人にはございません。よって、ここでは少なくとも、カテゴリ別の設定以外であれば、どこをどのようにカスタマイズすれば目次ページの背景を変更できるか既にご理解なさっている方、ある程度のHTMLとスタイルシートの知識がおありの方向けに、その概要だけを簡単にご説明させていただきますのでご了承ください。
ご存知の通り、ここカスタマイズは「ＦＣ２ブログテンプレート工房」のいたお様に教えていただいたカスタマイズです。「カテゴリ別フリーエリアの表示」
より後の方に記述されたセレクタ （スタイルを適用させる対象）のスタイルの指定が優先されるという特性を使って、第二のクラス名を設定することで特定のカテゴリの表示を変更させています。手順は以下の通りです。

• HTMLの中から全ページ共通部分と<!--category_area-->～<!--/category_area-->で囲まれた部分にあるセレクタ（主にブロック要素）が、スタイルシートでどのように設定されているかチェックし、変更が必要なセレクタ（ブロック）のクラス名を割り出します。（クラス名の前に#categoryの記載がある場合もあります。）


• 次に、HTMLの中で、そのセレクタ（ブロック）のクラス名に半角スペースをあけて、カテゴリ番号<%cno> を含む第二のクラス名を追加します。


• 最後に、その第二のクラス名の <%cno> 部分を表示を変更するカテゴリ番号に変え、スタイルシートに追加します。
  

カラムブロックの<div id="container">のように、HTMLでID指定している箇所の背景を変更する場合は、ID指定をクラス名指定に変更した上で第二のクラス名を設定します。その際、忘れずに、スタイルシートのID指定していた箇所も（第一の）クラス名に変更します。但し、競合しているセレクタがあり、優先させるためにID指定をしている箇所（例　<h2 id="entry">）や、リンクのためのアンカーを兼ねている場合はIDを解除するとデザインその他に不具合が生じますのでご注意ください。
競合する箇所の優先順位を変更する場合は!importantなどで工夫してみてください。
詳しくは＜TAG Index＞スタイルの優先順位

個々のテンプレートのデザイン変更についてのサポートはできかねますので、それに関するご質問等はご遠慮ください。

以下のカスタマイズは折りたたんでありますので、背景を変更する際の諸条件を順守してくださる場合のみご覧ください。

カテゴリの番号の確認

最初に背景画像を変更したいカテゴリの番号を確認します。カテゴリ番号は［カテゴリの編集］画面のカテゴリ一覧リストの一番左、#　をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。

カスタマイズの概要

カテゴリ番号を含むクラス名で指定した、変更後のスタイルを設定し、それをスタイルシートに追加します。

例にある赤い太字の数字がカテゴリ番号になります。
#category .cat_bg2 { color : #ffffff ; }

クラス名の他の部分はそのまま、赤い数字を背景を変更するカテゴリ番号に変更し、例をご参考に、個々のケースに合わせて変更したい内容でスタイルを設定してください。

テンプレートのタイプによって、また変更前と変更後の背景色の差異によって、カスタマイズする内容が違ってきますのでご注意ください。

スタイルシートに追加する際の注意点

スタイルシートに追加する際、クラス名の前のドットやID名とドットの間の半角スペース　を忘れたり、、逆に、記載内容のどこかに全角スペースが入ってしまうとカスタマイズした内容がテンプレートに反映されなくなります。コロン:とセミコロン;も間違えやすいので、ご注意ください！
#category .cat_bg2 { color : #ffffff ; }
#category .cat_bg2 { color : #ffffff ; }
#category .cat_bg2 { color : #ffffff ; }　

同じスペースでも、半角スペースなら問題ないのですが、全角スペースが記載内容のどこかに入ってしまうと　カスタマイズした内容がテンプレートに反映されません。
#category .cat_bg2　{ color : #ffffff ; }
☆　カスタマイズの前にはコピーをとりましょう！コピーのとり方は こちら 　

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

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

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

［スタイルシート編集］部分をカスタマイズします。

ページ全体の設定（novel-PF・PF2・Rタイプ以外）

最初にページ全体を変更した背景で表示させるための設定を追加します。疑似フレームテンプレート（novel-PFタイプ・novel-PF2タイプ）とnovel-Rタイプは既に設定済みですので不要ですが、それ以外のテンプレート（novel-Sタイプ・novel-templateスタンダードタイプ・novel-tempタイプ）の場合は、以下をスタイルシートに追加してください。（特定の個別記事ページの背景変更のためのカスタマイズで既に以下をスタイルシートに追加した方はそれでOKです。）

html { height : 100% ; _overflow: hidden; }
body { height : 100% ; }
body > .main { height : auto; }
.main { height : 100% ; min-height : 100% ; overflow : auto ; }

但し、上の設定を追加すると、縮小画面（ボックスの指定幅以下）で閲覧した場合限定ですが、縦スクロールが二本表示され、普通であれば表示される横スクロールは、内側の縦スクロールを一番下まで下げないと現れなくなります。

少々不便ですが、追加しないと、フッターより下に空白がある場合、その部分は変更した背景が表示されず、他のカテゴリと同じ背景で表示されてしまいます。ツートンになってもいいから、縮小画面で縦スクロールが二本表示されるのを避けたいという場合は追加しなくてOKです。

以下はカテゴリ番号2 の「銀河鉄道の夜」の目次ページの背景を変更する場合の例です。
2を、それぞれ、背景を変更したい特定のカテゴリの番号に変更して、変更する設定を追加してください。

novel-PF・PF2タイプ以外のテンプレート

novel-PF・PF2タイプ以外のテンプレートでは、カラムの外側の背景だけを変更する場合と、ページ全体を同じ背景に変更する場合で追加する内容が違います。

カラムの外側の背景を変更する場合

変更前と変更後の背景色が同じ場合

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;
}

カラムの外側の背景だけを変更する場合、変更後の背景色が変更前と同じ場合は上だけでOKですが、変更後の背景画像が、フッター部分にかぶり、著作権表示が不明瞭になった場合は、以下に述べる、著作権表示の文字とリンク色も変更してください。

変更後の背景色が違う場合

白から黒へなど、違う色に変更する場合は、上の設定に背景色の指定を追加し、なお且つ、画面下部(フッター部分)に表示されるコピーライト部分の文字色・リンク色も変更します。コピーライト部分に表示されるFC2広告が非表示、もしくは不明瞭な場合、「広告の適正な表示を阻害する規約違反行為」と判断され、最悪、ブログの一時利用停止や、アカウント（ID）削除もあり得ますので、ご注意ください。

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;
background-color: #000000; /* 背景色(黒)*/
}

/* 著作権表示広告：文字色*/
#category .cat_bg2 div.copy { color : #ffffff ; }

/* 著作権表示広告：文字色(白)・リンク色(金⇒赤・白背景)*/
#category .cat_bg2 div.copy a:link , #category .cat_bg2 div.copy a:visited {
color : #ffcc66 ; background-color : transparent ; text-decoration : none ; }
#category .cat_bg2 div.copy a:hover , #category .cat_bg2 div.copy a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

カラムの外側の背景だけ変更した例　変更前変更後のサンプル①　②　③


novel-R-Weddingのように、目次リストがテーブル画像で囲まれている場合は、カラム外側の背景と著作権のリンク色の変更だけできれいに表示されますが、Rタイプで目次リストの背景に半透明の透過画像が設定されているテンプレートの場合、背景色をDL時と違う色に変更すると、肝心の目次に並ぶ記事タイトルが見え辛くなる場合があります。　
その場合は、リスト部分の画像を無効にするため、以下を追加します。

#category .cat_bg2 ul { background-image : none ; }

ページ全体の背景を変更する場合

カラムの外も中もページ全体の背景を変更する場合は、著作権表示も含む、カラム内全ての要素の文字色、背景色などの変更をまとめて指定します。

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;
background-color: #000000; /* 背景色(黒)*/
color: #ffffff; /* 文字色(白)*/
}

/* カラム内の要素(見出し・ブロック・段落・リスト・上下余白)の指定をまとめて変更して設定*/
#category .cat_bg2 h1,#category .cat_bg2 h2,#category .cat_bg2 h3,
#category .cat_bg2 div, #category .cat_bg2 ul, #category .cat_bg2 li, #category .cat_bg2 p{
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/
border : none ; /* 枠線の取り消し*/
padding-top : 0 ;padding-bottom : 0 ;/* 上下余白なし(novel-Rタイプは不要)*/
}

/* リンク設定：文字色(金)背景(透明)⇒文字色(赤)背景(白)*/
#category .cat_bg2 a:link , #category .cat_bg2 a:visited {
color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#category .cat_bg2 a:hover , #category .cat_bg2 a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

上下余白をなしにする設定0はnovel-Rタイプでは不要ですが、その他のは変更画面をみながら数値を調整してください。

ページ全体の背景を変更した例　変更前変更後のサンプル①　②　③

疑似フレームテンプレート（novel-PF・PF2タイプ）の場合

疑似フレームテンプレート（novel-PF・PF2タイプ）は、カラムの外だけ背景を変更してもデザイン的に意味をもちませんので、最初から、ページ全体の背景を変更します。

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;
color: #ffffff; /* 文字色(白)*/
background-color: #000000; /* 背景色(黒)*/
}

/* カラム内の要素(見出し・ブロック・段落・リスト)の設定*/
#category .cat_bg2 h1,#category .cat_bg2 h2,#category .cat_bg2 h3,
#category .cat_bg2 div, #category .cat_bg2 ul, #category .cat_bg2 li, #category .cat_bg2 p{
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/
}

/* リンク設定：文字色(金)背景(透明)⇒文字色(赤)背景(白)*/
#category .cat_bg2 a:link , #category .cat_bg2 a:visited {
color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#category .cat_bg2 a:hover , #category .cat_bg2 a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

疑似フレームテンプレートで、ページ全体の背景を変更した例　コチラ

【 更新 】 をクリックする。

カスタマイズを簡単にするために、例ではページ内の要素をまとめて指定していますが、個々の要素別、あるいは特定のクラス名別に設定することも可能です。

#category .cat_bg2 div.copy {color : #ffffff ;}

#category .cat_bg2　の後ろに半角スペースをあけ、ピンク色の部分に要素名、その後は今度はスペースを空けずに、ドットをおいて青色の部分にクラス名を入れて指定します。

細かく設定変更したい場合は、上を参考にご自力で調整してください。

以下のカスタマイズは折りたたんでありますので、画像変更の際の諸条件を順守してくださる場合のみご覧ください。

記事番号の確認

テンプレートのカスタマイズに取り掛かる前に、背景を変更したい個別記事ページの記事番号を確認しておきます。記事番号は［過去の記事の管理］画面のリストの一番左、#　をクリックすると表示される番号がそれですが、記事ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-entry-〇〇.html
〇〇がその個別記事ページの記事番号です。

カスタマイズの概要

記事番号を含むクラス名で変更後のスタイルを指定し、それをスタイルシートに追加します。

例にある赤い太字の数字が記事番号になります。
#permanent .en_bg9 { color : #ffffff ; }

クラス名の他の部分はそのまま、赤い数字を背景を変更する記事番号に変更し、例をご参考に、個々のケースに合わせて変更したい内容でスタイルを設定してください。

テンプレートのタイプによって、また変更前と変更後の背景色の差異によって、カスタマイズする内容が違ってきますのでご注意ください。

スタイルシートに追加する際の注意点

スタイルシートに追加する際、クラス名の前のドットやID名とドットの間の半角スペース　を忘れたり、、逆に、記載内容のどこかに全角スペースが入ってしまうとカスタマイズした内容がテンプレートに反映されなくなります。コロン:とセミコロン;も間違えやすいので、ご注意ください！

#permanent .en_bg9 { color : #ffffff ; }
#permanent .en_bg9 { color : #ffffff ; }
#permanent .en_bg9 { color : #ffffff ; }

同じスペースでも、半角スペースなら問題ないのですが、全角スペースが記載内容のどこかに入ってしまうと　カスタマイズした内容がテンプレートに反映されません。

#permanent .en_bg9　{ color : #ffffff ; }

☆　カスタマイズの前にはコピーをとりましょう！コピーのとり方は こちら 　

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

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

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

［スタイルシート編集］部分をカスタマイズします。

以下は記事番号9 の「雪の女王」の「作品について」の背景を変更する例です。
9を、それぞれ、背景を変更したい特定の記事番号に変更して、変更する設定を追加してください。

疑似フレームテンプレート（novel-PF・PF2タイプ）の場合

疑似フレームテンプレートは、左右それぞれのフレームごとに背景を変更します。

メインフレーム　(右)フレームの背景の変更

/*メインフレーム（右）フレーム */
#permanent .en_bg9 {
background-image : url("画像アドレス");
background-repeat : no-repeat ;
background-position : left top;
background-attachment: fixed;
color : #333333 ;/* 文字色(黒)*/
background-color : #ffffff ;/* 背景色(白)*/
}

/* メインフレーム内の要素(見出し・ブロック・段落・リスト)の設定*/
#permanent .en_bg9 h1,#permanent .en_bg9 h2,#permanent .en_bg9 h3,
#permanent .en_bg9 h4,#permanent .en_bg9 h5,
#permanent .en_bg9 div, #permanent .en_bg9 ul, #permanent .en_bg9 p {
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/
border : none ; /* 枠線の取り消し*/
}


/* リンク設定 : メイン（右）フレーム*/
#permanent .en_bg9 a:link , #permanent .en_bg9 a:visited {
color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#permanent .en_bg9 a:hover , #permanent .en_bg9 a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

border : none ; /* 枠線の取り消し*/　はテンプレートによっては追加しない方がよい場合があります。個々のテンプレートの状態に合わせて調整してください。

疑似フレームテンプレートのメイン(右)フレームの背景を変更した例　コチラ　や　コチラ

サイド(左)フレームの背景の変更

/* サイド(左)フレーム */

#permanent .left_frm_bg9 {
background-image : url("画像アドレス");
background-repeat : no-repeat ;
background-position : left bottom;
background-attachment : fixed;
color: #ffffff; /* 文字色(白)*/
background-color: #000000; /* 背景色(黒)*/
}

#permanent .left_frm_bg9 h2,#permanent .left_frm_bg9 h3,
#permanent .left_frm_bg9 div, #permanent .left_frm_bg9 ul {
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/
border : none ; /* 枠線の取り消し*/ }

/* リンク設定 : サイド(左)フレーム*/
#permanent .left_frm_bg9 a:link , #permanent .left_frm_bg9 a:visited
{ color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#permanent .left_frm_bg9 a:hover , #permanent .left_frm_bg9 a:active
{ color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

疑似フレームテンプレートのメイン(右)フレームとサイド(左)フレーム、両方の背景を変更した例　コチラ　や　コチラ

novel-PF・PF2タイプ以外のテンプレート

novel-PF・PF2タイプ以外のテンプレートでは、カラムの外側の背景だけを変更する場合と、ページ全体を同じ背景に変更する場合で追加する内容が違います。

カラムの外側の背景を変更する場合

変更前と変更後の背景色が同じ場合

/* カラムの外側*/
#permanent .en_bg9 {
background-image : url("画像アドレス");
background-repeat : no-repeat ;
background-position : left top;
background-attachment: fixed; width : auto ;
}

変更後の背景色が違う場合

カラムの外側の背景だけを変更する場合、変更後の背景色が変更前と同じ場合は上だけでOKですが、白から黒へなど、違う色に変更する場合は、画面下部(フッター部分)に表示されるコピーライト部分の文字色・リンク色も変更します。コピーライト部分に表示されるFC2広告が非表示、もしくは不明瞭な場合、「広告の適正な表示を阻害する規約違反行為」と判断され、最悪、ブログの一時利用停止や、アカウント（ID）削除もあり得ますので、ご注意ください。

/* 著作権表示広告：文字色(白)・リンク色(金⇒赤・白背景)*/
/* 著作権表示広告：文字色*/
#permanent .en_bg9 div.copy { color : #ffffff ; }

/* 著作権表示広告：リンク*/
#permanent .en_bg9 div.copy a:link , #permanent .en_bg9 div.copy a:visited {
color : #ffcc66 ; background-color : transparent ; text-decoration : none ; }
#permanent .en_bg9 div.copy a:hover , #permanent .en_bg9 div.copy a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

novel-Sタイプで固定幅中央表示(コンパクト版)の場合に、カラムの外側の背景と著作権リンク色を変更した例　　コチラ

ページ全体の背景を変更する場合

カラムの外も中もページ全体の背景を変更する場合は、著作権表示も含む、カラム内全ての要素の文字色、背景色などの変更をまとめて指定します。

/* カラムの内外全て変更*/
#permanent .en_bg9 {
background-image : url("画像アドレス");
background-repeat : no-repeat ;
background-position : left top;
background-attachment: fixed; width : auto ;
color : #333333 ;/* 文字色(黒)*/
background-color : #ffffff ;/* 背景色(白)*/
}

/* カラム内の要素(見出し・ブロック・段落・リスト)の設定*/
#permanent .en_bg9 h1,#permanent .en_bg9 h2,#permanent .en_bg9 h3,
#permanent .en_bg9 div, #permanent .en_bg9 ul, #permanent .en_bg9 p{
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/
border : none ; /* 枠線の取り消し*/
}


/* リンク設定：文字色(金)背景(透明)⇒文字色(赤)背景(白)*/
#permanent .en_bg9 a:link , #permanent .en_bg9 a:visited
{ color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#permanent .en_bg9 a:hover , #permanent .en_bg9 a:active
{ color: #900000 ; text-decoration : none ; background-color : #ffffff ; }

novel-Rタイプや、それ以外のテンプレートでも、変更前の記事ページのレイアウトが固定幅の中央表示の場合はこれでOKですが、変更前のレイアウトが、可変性全面表示の場合は、カスタマイズ後に、左右の余白に変更前の背景が表示されてしまいます。これを修正するために以下を追加します。
変更後の表示を中央寄せにする場合

#permanent .en_bg9 { width : auto ; text-align : center ; }
#permanent .en_bg9 div.container { width : 80% ; margin : 0 auto ;text-align : left ;}

変更後の表示を右寄せにする場合

#permanent .en_bg9 { width : auto ; text-align : right ; }
#permanent .en_bg9 div.container { margin : 0 0 0 auto ; width : 80% ; text-align : left ; }

変更後の表示を左寄せにする場合

#permanent .en_bg9 { width : auto ; text-align : left ; }
#permanent .en_bg9 div.container { margin : 0 auto 0 0 ; width : 80% ; text-align : left ; }

【 更新 】 をクリックする。

カスタマイズを簡単にするために、例では個々の要素をまとめて指定していますが、個々の要素別に設定することも可能です。細かく設定変更したい場合は、ご自力で調整してください。

カテゴリ(作品)別に背景を変更する場合

この方法で、同じカテゴリの記事ページを同じ背景に変更することもできます。
上の例の「雪の女王」の場合、このカテゴリに含まれるのは、記事番号、1～9までの記事ですが、それを、カラムの外側だけ背景を変更する場合は、以下のように記事番号だけ違うクラス名をずらずらと並べて、まとめて指定します。

/* カラムの外側*/
#permanent .en_bg1, #permanent .en_bg2, #permanent .en_bg3, #permanent .en_bg4, #permanent .en_bg5, #permanent .en_bg6, #permanent .en_bg7, #permanent .en_bg8, #permanent .en_bg9 {
background-image : url("画像アドレス");
background-repeat : no-repeat ;
background-position : left top;
background-attachment: fixed; width : auto ;
background-color: #000000; /* 背景色(黒)*/
}

個々の要素ごとに、記述を繰り返さなくてはならないので、かなり面倒ですが、試される場合は、クラス名とクラス名の間のカンマをお忘れなく！

改訂版ver1103以降のテンプレートであれば、カテゴリ別にまとめて変更の指定ができます。

カテゴリ番号の確認

カスタマイズの前に表示を変更させたいカテゴリの番号を確認しておきます。
カテゴリ番号は［カテゴリの編集］画面のカテゴリ一覧リストの一番左、#　をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。

カスタマイズの概要

カテゴリ番号を含むクラス名で変更後のスタイルを指定し、それをスタイルシートに追加します。

例にある赤い太字の数字がカテゴリ番号になります。
#permanent .en_cat9 { color : #ffffff ; }

後は前述した特定の個別記事の場合と同じです。
但し、クラス名が違うのでご注意ください。

カテゴリ別に変更する場合の特定個別記事ページのメインカラムのクラス名は

.en_bg記事番号　ではなく
.en_catカテゴリ番号　になります。

疑似フレームタイプのサイドフレームは
.left_frm_bg記事番号　ではなく
novel-PF・PF2タイプは　.left_en_catカテゴリ番号
上以外の疑似フレームは　.en_sub_blockカテゴリ番号　になります。
　
ページ内のブロックや見出しなど、個々のセレクタも変更する場合は、
#permanent クラス名　半角スペース　個々のそのセレクタで変更内容を指定します。

ver1107以降のnovel-PF・PF2タイプ以外のテンプレートのスタイルシートには、カテゴリ番号0の未分類だけ別表示にするための設定が記述されていますので、変更箇所、記述内容など、ご参照ください。
個別記事ページを二種類のスタイルで表示する

　注意

くどいようですが、現在、画像の無断変更は禁止です。上で紹介したカスタマイズで、画像を変更してご利用の場合は、必ず背景画像を変更してのご利用をご希望の場合をご確認ください。　

カスタマイズの概要

メインテンプレートとカテゴリ別テンプレート

メインテンプレートの選択

カテゴリ別テンプレート

１.カテゴリ別テンプレートの選択とDL

注意

特定のカテゴリのみ別テンプレートで表示したい場合、特定のカテゴリ以外はメインテンプレートと同じスタイルで表示させたい場合もカテゴり別テンプレートは他とおなじくＤＬします。
全てのカテゴリの数だけカテゴリ別テンプレートをＤＬしなければ、カテゴリ別テンプレートをＤＬしていないカテゴリではスタイルシートが全く反映されない状態で表示されてしまいます。

２.カテゴリ別テンプレートの名前の変更

CSS-Categoryカテゴリ番号

novel-PF・PF2タイプ以外のテンプレートの場合、個別記事ページの表示はカテゴリ番号0の未分類カテゴリとその他のカテゴリでは別レイアウトで表示されます。(古書風・古紙風テンプレートを除く)初期設定とは別レイアウトで表示する場合は、選択したカテゴリ別テンプレートのスタイルシートの(A)と(B)の行を削除するか、カテゴリ番号[0]の表示設定を削除してください。
参考記事コチラ

カテゴリ別テンプレートの名前を変更したら、
【 更新 】 をクリックする。

３.メモ帳へのコピペ

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


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

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

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

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

Material　：<a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a> & <a href="http://p-fan.net" target="_blank" title="p-fan.net">p-fan.net</a>　Template By <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel テンプレート</a>
<br />
<!--削除不可広告開始--><%ad> <%ad2><!--削除不可広告終了--></div>


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

<span class="c cnカテゴリ番号"><a href="サイトアドレス" target="_blank" title="">サイト名</a></span>

<!--not_page_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area--><!--not_edit_area--><!--not_titlelist_area-->
<span class="c cn0"><a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a></span>
<span class="c cn1"><a target="_blank" href="http://homepage3.nifty.com/fiore-k/"title="Fiore">Fiore </a></span>
<span class="c cn2"><a href="http://white-board.jp/" target="_blank" title="White Board">White Board</a></span>
<span class="c cn3"><a href="http://sweety.chips.jp/" target="_blank" target="_blank" title="Sweety">Sweety</a></span>
<span class="c cn4"><a href="http://lunar.littlestar.jp/stardust/index.html" target="_blank" title="STAR DUST">STAR DUST</a></span>
<!--/not_titlelist_area--><!--/not_edit_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_page_area-->

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

スタイルシートを振り分ける

<head>
～中略～

<link href="<%css_link>" type="text/css" rel="stylesheet" />
～中略～
</head>

<!--not_permanent_area--><!--not_category_area--><link href="<%css_link>" type="text/css" rel="stylesheet" /><!--/not_category_area--><!--/not_permanent_area-->

<!--category_area--><link href="<%url>template/CSS-Category<%cno>/style.css" type="text/css" rel="stylesheet" /><!--/category_area-->

<!--permanent_area--><link href="<%url>template/CSS-Category<!--topentry--><%topentry_category_no><!--/topentry-->/style.css" type="text/css" rel="stylesheet" /><!--/permanent_area-->

フッター部分のカスタマイズ

カテゴリ別テンプレートの時と同じように、メインテンプレートをスクロールしてフッター部分を探します。

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

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


<!--▼ HTMLやスタイルシートを交換する場合はここから差し替えてください-->
<!--▼▼▼▼ フッター(1)（ FC2 コピーライト ）▼▼▼▼-->
<!-- ※ FC2の著作権表示・広告等は消せません -->
<!--not_index_area--><div class="footer">
copyright &copy; <%blog_name> all rights reserved. <br />
Material ： <a href="http://kaz.fount-k.com/" target="_blank" title="風のおひるね">風のおひるね</a>　&　<a target="_blank" href="http://homepage3.nifty.com/fiore-k/">Fiore </a>　Template by <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel Template</a>
<br /><%ad>  <%ad2>
</div><!--/not_index_area-->
<!-- ※ 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="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a> & <a href="http://p-fan.net" target="_blank" title="p-fan.net">p-fan.net</a>　Template By <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel テンプレート</a>
<br />
<!--削除不可広告開始--><%ad> <%ad2><!--削除不可広告終了--></div>


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

最初に青字の部分を
<!--not_permanent_area--><!--not_category_area-->～<!--/not_category_area--><!--/not_permanent_area-->で囲みます。

<!--not_permanent_area--><!--not_category_area-->
<a href="サイトアドレス" target="_blank" title="">サイト名</a>
<!--/not_category_area--><!--/not_permanent_area-->

次に先ほどのメモ帳の内容をそのままコピペしてその下に貼り付けます。

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

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


<!--▼ HTMLやスタイルシートを交換する場合はここから差し替えてください-->
<!--▼▼▼▼ フッター(1)（ FC2 コピーライト ）▼▼▼▼-->
<!-- ※ FC2の著作権表示・広告等は消せません -->
<!--not_index_area--><div class="footer">
copyright &copy; <%blog_name> all rights reserved. <br />
Material ： <!--not_permanent_area--><!--not_category_area-->
<a href="http://kaz.fount-k.com/" target="_blank" title="風のおひるね">風のおひるね</a>　&　<a target="_blank" href="http://homepage3.nifty.com/fiore-k/">Fiore </a><!--/not_category_area--><!--/not_permanent_area-->
<!--not_page_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area--><!--not_edit_area--><!--not_titlelist_area-->
<span class="c cn0"><a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a></span>
<span class="c cn1"><a target="_blank" href="http://homepage3.nifty.com/fiore-k/"title="Fiore">Fiore </a></span>
<span class="c cn2"><a href="http://white-board.jp/" target="_blank" title="White Board">White Board</a></span>
<span class="c cn3"><a href="http://sweety.chips.jp/" target="_blank" target="_blank" title="Sweety">Sweety</a></span>
<span class="c cn4"><a href="http://lunar.littlestar.jp/stardust/index.html" target="_blank" title="STAR DUST">STAR DUST</a></span>
<!--/not_titlelist_area--><!--/not_edit_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_page_area-->　Template by <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel Template</a>
<br /><%ad>  <%ad2>
</div><!--/not_index_area-->
<!-- ※ 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　：<!--not_permanent_area--><!--not_category_area-->
<a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a> & <a href="http://p-fan.net" target="_blank" title="p-fan.net">p-fan.net</a><!--/not_category_area--><!--/not_permanent_area-->

<!--not_page_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area--><!--not_edit_area--><!--not_titlelist_area-->
<span class="c cn0"><a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a></span>
<span class="c cn1"><a target="_blank" href="http://homepage3.nifty.com/fiore-k/"title="Fiore">Fiore </a></span>
<span class="c cn2"><a href="http://white-board.jp/" target="_blank" title="White Board">White Board</a></span>
<span class="c cn3"><a href="http://sweety.chips.jp/" target="_blank" target="_blank" title="Sweety">Sweety</a></span>
<span class="c cn4"><a href="http://lunar.littlestar.jp/stardust/index.html" target="_blank" title="STAR DUST">STAR DUST</a></span>
<!--/not_titlelist_area--><!--/not_edit_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_page_area-->　Template By <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel テンプレート</a>
<br />
<!--削除不可広告開始--><%ad> <%ad2><!--削除不可広告終了--></div>


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

これで、小説本文ページと目次のフッター部分の著作権リンクは、そのカテゴリ（作品）別テンプレートの素材提供サイト様のものに差し替えられて表示されます。

【 更新 】 をクリックする。

カスタマイズ後に新しくカテゴリを新設した場合

①～③の作業だけでOK！
①新設したカテゴリ用のカテゴリ別テンプレートをDLする

②DLしたカテゴリ別テンプレートの名前を変更する

CSS-Category新設したカテゴリ番号

③メインテンプレートのフッターにDLしたカテゴリ別テンプレートの素材サイト様のリンクを追加する

<span class="c cn新設したカテゴリ番号"><a href="サイトアドレス" target="_blank" title="">素材サイト名</a></span>

特定の小説本文ページでデザインを変更する場合

カテゴリ別にテンプレートを振り分けた上で、特定の小説本文ページのデザインだけをそのカテゴリの他のページとはデザインを変えることも可能です。
例えば、「このカテゴリのこの小説本文ページだけは背景色を黒にしたい」という場合は、そのカテゴリのカテゴリ別テンプレートのスタイルシートをカスタマイズします。

詳しくは　【改定版　簡単カスタマイズ】特定の個別記事ページの背景を変更する

同様の方法で、表紙だけ、あるいは通常ブログ画面やNovelListだけ別テンプレートで表示させることもできます。しかも、SteyleKeeperを用いた場合はJavaScript有効時だけでしたが、このカスタマイズは、JavaScriptがオフの状態でも別テンプレートでの表示が維持できます。
表紙・通常ブログ画面・NovelListなどを別テンプレで表示させるカスタマイズについては後日ご紹介します。

カスタマイズ

注意

特定の親カテゴリの小説ページのみ別テンプレートで表示させたい場合、それ以外のカテゴリはメインテンプレートと同じスタイルで表示させたい場合も、必ず、親カテゴリの数だけの親カテゴリ別テンプレートとプラス１、共通テンプレート用のテンプレートをＤＬします。
これを怠ると、親カテゴリ別テンプレートをＤＬしていないカテゴリと親カテゴりのないカテゴリの小説ページではスタイルシートが全く反映されない状態、つまり背景のないテキストのみで表示されてしまいます。

CSS-Category親カテゴリ番号

<span class="c cn親カテゴリ番号"><a href="サイトアドレス" target="_blank" title="">サイト名</a></span>

<span class="c cn0 cn1 cn2 cn3 cn4 cn5"><a href="サイトアドレス" target="_blank" title="">サイト名</a></span>

<!--permanent_area-->
<span class="c cn0 cn1 cn2 cn3 cn4 cn5"><a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a></span>
<span class="c cn10"><a target="_blank" href="http://homepage3.nifty.com/fiore-k/"title="Fiore">Fiore </a></span>
<span class="c cn20"><a href="http://white-board.jp/" target="_blank" title="White Board">White Board</a></span>
<span class="c cn30"><a href="http://sweety.chips.jp/" target="_blank" target="_blank" title="Sweety">Sweety</a></span>
<span class="c cn40"><a href="http://lunar.littlestar.jp/stardust/index.html" target="_blank" title="STAR DUST">STAR DUST</a></span>
<!--/permanent_area-->

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

スタイルシートを振り分ける

<head>
～中略～

<link href="<%css_link>" type="text/css" rel="stylesheet" />
～中略～
</head>

<!--not_permanent_area--><link href="<%css_link>" type="text/css" rel="stylesheet" /><!--/not_permanent_area-->
<!--permanent_area--><link href="<%url>template/CSS-Category<!--topentry--><!--parent_category--><%topentry_parent_category_no><!--/parent_category--><!--/topentry-->/style.css" type="text/css" rel="stylesheet" /><!--/permanent_area-->

<head>

～中略～

<style type="text/css"><!--

～中略～

#permanent .cn<!--topentry--><%topentry_category_no><!--/topentry--> { display: block ; }
#permanent .cn<!--topentry--><!--parent_category--><%topentry_parent_category_no><!--/parent_category--><!--/topentry--> { display: block ; }
#permanent .cn { display: none ; }

～中略～

--></style>
～中略～

</head>

フッター部分のカスタマイズ

<!--not_permanent_area-->
<a href="サイトアドレス" target="_blank" title="">サイト名</a>
<!--/not_permanent_area-->

その下に先ほどのメモ帳の内容をそのままコピペして貼り付けます。

<!--not_permanent_area-->
<a href="サイトアドレス" target="_blank" title="">サイト名</a>
<!--/not_permanent_area-->
<!--permanent_area-->
<span class="c cn0 cn1 cn2 cn3 cn4 cn5"><a href="http://makos.websozai.jp/" target="_blank" title="Mako's">薔薇素材 Mako's</a></span>
<span class="c cn10"><a target="_blank" href="http://homepage3.nifty.com/fiore-k/"title="Fiore">Fiore </a></span>
<span class="c cn20"><a href="http://white-board.jp/" target="_blank" title="White Board">White Board</a></span>
<span class="c cn30"><a href="http://sweety.chips.jp/" target="_blank" target="_blank" title="Sweety">Sweety</a></span>
<span class="c cn40"><a href="http://lunar.littlestar.jp/stardust/index.html" target="_blank" title="STAR DUST">STAR DUST</a></span>
<!--/permanent_area-->

【 更新 】 をクリックする。

<head>～</head>内のカスタマイズ

ケースA
全てのページを月別テンプレートで表示する場合

<head>

～中略～

<link href="<%css_link>" type="text/css" rel="stylesheet" />


～中略～


<style type="text/css"><!--
.month<%now_month> {display:inline;}
--></style>
</head>

<link href="<%url>template/CSS-Monthly_<%now_month>/style.css" type="text/css" rel="stylesheet" />

<!--not_permanent_area--><link href="<%url>template/CSS-Monthly_<%now_month>/style.css" type="text/css" rel="stylesheet" />
<!--/not_permanent_area-->

<!--permanent_area--><link href="<%url>template/CSS-Monthly_<!--topentry--><%topentry_month><!--/topentry-->/style.css" type="text/css" rel="stylesheet" /><!--/permanent_area-->

<!--not_permanent_area--><style type="text/css"><!--
.month<%now_month> {display:inline;}
--></style><!--/not_permanent_area-->

<!--permanent_area--><style type="text/css"><!--
.month<!--topentry--><%topentry_month><!--/topentry-->{display:inline;}
--></style><!--/permanent_area-->

ケースB
表紙と通常ブログ画面・アーカイブページを月別テンプレートで、それ以外はメインテンプレートで表示させる場合

<!--not_date_area--><!--not_page_area-->
<link href="<%css_link>" type="text/css" rel="stylesheet" />
<!--/not_page_area--><!--/not_date_area-->

<!--not_permanent_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area--><!--not_edit_area--><!--not_titlelist_area-->
<link href="<%url>template/CSS-Monthly_<%now_month>/style.css" type="text/css" rel="stylesheet" /> <!--/not_titlelist_area--><!--/not_edit_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_permanent_area-->

フッター部分のカスタマイズ

カスタマイズの方法

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

目次表示用のテンプレートを用意する

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

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

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

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

<!--▽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 全記事一覧ページ-->

<!--▽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 全記事一覧ページ-->

<!--▼ページナビゲーション▼-->
<!--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-->
<!--▲ページナビゲーション▲-->

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

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

<div class="entry_all">

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

</div>

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

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

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

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

<div class="entry_all">

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

</div>


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

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

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

今後の作業と確認

カスタマイズの方法

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

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

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

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

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

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

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

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

【 更新 】 をクリック

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

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

<!--▼▼フッター▼▼-->
<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>