テンプレートの衣替え

　カスタマイズの難易度２

今回の改訂（～2010.2.18.）で、novel-PFタイプのテンプレートのHTMLを統一致しました。

今後は、同じnovel-PF-HTMLのテンプレートであれば、スタイルシート部分を丸ごとコピペして貼りかえるだけで、、簡単にブログのデザインを変更することができます。（2010.2.18.以降にＤＬしたテンプレートの場合）

ＨＴＭＬは同じなので、オリジナルに施したカスタイズがそのまま衣替えしたテンプレートにも反映されます。
もちろん、素材提供サイト様の著作権表示リンクの変更は必要ですが、それ以外は、少なくともHTML部分に関しては、テンプレートを変更する度に以前と同じ複雑なカスタイズを繰り返す必要はなくなりました。違うテンプレートに変更したいけれど、またＨＴＭＬを最初からカスタマイズし直さなくてはならないのは億劫という方におススメです。とっても楽になりました。

　カスタマイズの難易度２

季節季節に、服を着替えるようにテンプレートを取り替えて、手軽にサイトの雰囲気を一新させることができるのはブログの楽しみであり利点です。でもご利用のテンプレートが、手をかけ、時間をかけ、自分ナイズにカスタマイズなさったものであれば、話は別。なにしろ、新しいテンプレートに取り替えたら、カスタマイズも、最初からやり直さなくてはならないのですから、早々簡単にお引越しも衣替えもできません。そろそろテンプレートも取り替えたい、でも、カスタマイズし直さなくてはならないのは、ちょっと…。
そんな皆様に超簡単衣替えプランのご紹介です。

HTMLやSCCを共有している同じタイプのテンプレートはスタイルシートを変更するだけでデザイン変更できます。

2010.4.8.現在、novel-PF・novel-PF2タイプ・novel-Sタイプのテンプレートは、タイプ別にHTMLを統一させる改訂作業が完了致しました。他のタイプも、順次統一化？を進めてまいります。

お知らせ

2011.9.1.現在、(ver1109以降の)novel-PFタイプ・PF2タイプ以外のテンプレートであればタイプは違っても、HTMLとスタイルシートに互換性を持たせましたので、衣替え可能です。novel-PFタイプ・PF2タイプは両タイプであれば互換性ありです。

　注意！

衣替えなさる前にお手元のテンプレートを御確認ください。スタイルシートの冒頭にバージョンナンバーの記載がない場合、もしくは(ver1105)以前のバージョンの場合は、ご面倒とは存じますが、再ダウンロードなさり、HTMLとスタイルシートを最新のものに変更なさってから衣替えなさる事をおススメ致します。
新しいバージョンは、新機能を追加しただけでなく、カスタマイズする場合も改訂以前のものより簡単便利になっております。
また、一ヵ月以上更新がない場合の広告も、改訂版は、不要な重複を削除し、記事本文と明確に区分けして表示させているので、改訂以前に比べてすっきりとしており、記事本文が読みやすくなっています。

特に注意！

FC2ブログ仕様変更により、共有テンプレートの文字コードが強制的に EUC-JP から、 UTF-8 に変換されるようになりました。
HTMLとスタイルシートの文字コードが異なっていると、スタイルシート（画像・色・レイアウト）が全く反映されなくなります。
拙作テンプレの文字コードは2012.11月現在UTF-8に統一していますが、仕様変更以前はEUC-JP でした。
衣替え（スタイルシートの変更）やサイト内配布テンプレート御利用の際は、HTMLもスタイルシートも最新バージョンのものをDLしてご利用ください。

衣替えの準備

（1）スタイルシートの確認

まず、最初に、現在適用中のテンプレートの衣替えが可能かどうか確認します。
仮に、この適用中のテンプレートをテンプレートAとよびます。

テンプレートの管理画面を開きます。

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

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

［スタイルシート編集］部分の冒頭を確認します。


衣替えができるテンプレートはスタイルシートの冒頭に以下のような説明があります。

同じタイプのテンプレートであればスタイルシートを交換することで
簡単に衣替えできますが、衣替えをする場合は素材提供サイト様の著作権表示がある
HTMLの最後にあるコピーライト部分も必ず変更してください。

上のような記載があれば問題なく衣替えできます。
（HTMLが統一されていない）改訂前のテンプレートにはその記述がなく、スタイルシートに互換性がないため、同じタイプであっても衣替えはできませんので、ご注意ください。

（2）テンプレートをコピー

テンプレートAの衣替えできることが確認できたらそのコピーをとります。
コピーのとり方は こちら
このコピーを便宜上テンプレートBと呼びます。
コピーをとったので、現在の管理画面は、テンプレートBの編集画面になっているはずです。

（3）衣替え用のテンプレートをDL

テンプレートBの編集画面をそのままにして別窓を開いて、衣替え用のテンプレートをDLします。

画面の上部の【共有テンプレートの追加】⇒右クリック⇒【新しいウィンドウで開く】⇒クリック

衣替え用のテンプレートをDLしたら、そのテンプレートの編集画面を開きます。
この衣替え用にDLしたテンプレートをテンプレートCとします。

衣替えカスタマイズ

テンプレートBとテンプレートC、二つのテンプレートの編集画面が開いていると思います。

（1）著作権表示の変更

最初に著作権表示を変更します。

テンプレートC　の［ＨＴＭＬ編集］部分を一番下までスクロールしてゆき、以下の部分を探します。

<!--▼▼フッター▼▼-->
<div class="layout_footer">
<!--▼コピーライト-->
<div class="copyright">
Copyright © <a href="./"><%blog_name></a>. Powered By <a href="http://blog.fc2.com/" target="_blank">FC2</a> Photograph<a href="http://www.yunphoto.net " target="_blank" title="ゆんフリー写真素材集">ゆんフリー写真素材集</a> Design By <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel Template</a>
<br />
<!--削除不可広告開始--><%ad> <%ad2><!--削除不可広告終了--></div>
<!--▲コピーライト-->
</div>
<!--▲▲フッター▲▲-->

要は太字の部分の素材サイトさまの著作権表示とリンクだけを変更すればよいのですが、
解りづらい場合は、コピーライト・もしくはフッター部分を丸ごとコピーします。

それを、テンプレートB　の［ＨＴＭＬ編集］部分の同じ箇所に貼り付けて差し替えます。


ＨＴＭＬ部分の編集はこれだけで、手作業もこれで終わりです。
あとはカーソルだけの作業で、スタイルシートを差し替えていきます。

　カスタマイズの難易度３

Novelテンプレートは小説専用テンプレートですが、小説以外の用途でご利用の方のために、Novelテンプレートを逆アレンジした一般ブログ用テンプレートも公開しています。

2011.12.26.　追記

小説用のテンプレートであっても、ver1112以降のバージョンであれば、スタイルシートの末尾に以下を追加すると、NovelListへのリンクボタンを含めて、テンプレート内から小説関連の表示が全て非表示になりますので、簡易型の一般用テンプレとしてご利用になれます。
.delete { display : none!important ; }

現在、一般用テンプレートとして公開しているのは各タイプ、それぞれ表紙ありと表紙なしの二種類づつだけですが、スタイルシートを変更することで、公開中の全ての小説用テンプレートを一般ブログ用としてご利用になることができます。

テンプレートのタイプ	表紙付き（HPサイト風）	表紙無し（一般ブログスタイル）
templateタイプ・ tempタイプ共通	normal-temp_1	normal-temp_2
Sタイプ	normal-S-simple1	normal-S-simple2
Rタイプ・Rfタイプ共通	normal-R-Html-1	normal-R-Html-2
PFタイプ・PF2タイプ共通	normal-PF-Sky	normal-PF-Black

テンプレート名をクリックすると、それぞれのテンプレートの解説記事が開き、画像をクリックするとテンプレートがプレビューされます。

まだ一般ブログ用を公開していない上以外のタイプの新作テンプレート(GタイプやJタイプ)も、上の（PFタイプ・PF2タイプ以外の）一般用テンプレートのHTMLを用いれば、デザインは同じまま一般用ブログテンプレートに変更できます。但し、表紙ページはポップアップや折りたたみ機能はなく、変更したテンプレートのタイプと同じレイアウトで表示されます。

novel-PF,PF2タイプ以外限定

個々のブログが掲載している小説（カテゴリ）の数や表示させるプラグイン３は違うので、テンプレートによっては、DL時のオリジナルのままでは、なんとなくページ全体のバランスが悪く見える事もあると思います。

そんな時はHTMLの衣替えがおススメです。

スタイルシートを衣替え(変更)するとデザインや背景色などが一新されますが、HTMLを衣替え(変更)した場合は背景画像や背景色などデザインはほぼ同じまま表紙ページのレイアウトを変更できます。

自ブログの表紙ページの現状にあったレイアウトが見つかるかもしれません。

表紙ページのレイアウト（タイプ別）

スタンダードタイプ・tempタイプスタンダード(novel-template)タイプとtempタイプのHTMLは同じです。
プラグイン３はサイドメニュー、メニューボタン下に縦一列表示されます。

サイドカラムが長くなると全体のバランスが悪いので、掲載小説(カテゴリ)の数が少なく、プラグイン３は、拍手ボタンやアクセスカウンターなどコンパクトで少なめの場合に向いています。

Sタイプ

Sタイプはスタンダードタイプ・tempタイプとほとんどおなじですが、プラグイン３がフッターの上に横に並んで表示されます。
プラグイン３に表示させるコンテンツが多い場合におススメ。

Rタイプ

RタイプはSタイプとほとんど同じですが、ご案内(サイト説明文)がヘッダー内、ブログタイトル下に表示されます。

Cタイプ

プラグイン３は、メイン（右）カラムの「最近の更新」の下に「最近の更新」と同じ幅、同じスタイルで表示されます。メールフォームなど広いスペースに表示したいコンテンツがある場合に最適です。

比較的小さいスペースで事足りるバナーや拍手タグなどは、HTMLのフリースペース(2)の個所に追加すると、サイドメニューのメニューボタン下に表示されます。

またメニューボタンはJavaScript有効時クリックで開閉します。小説タイトルも全てMainというリンクボタンに収納されているので掲載小説が多い場合にもおススメです。

JavaScript無効時は最初から開示されます。カスタマイズ次第で、折りたたみの開閉は振り分けられます。
詳しくは[折りたたみの（初期設定の開閉）設定を変更する]を御参照ください。
　新しいタイプなので衣替えをする場合のスタイルシートは　ver1202　以降推奨

Gタイプ

JavaScript有効時、メインカラムは画像のみが表示。
コンテンツは全てサイドカラムに表示され、メニューボタンをクリックすると開閉します。

DL時は「ご案内」と「最近の更新」のみ開示。それ以外は折りたたまれていますが、カスタマイズ次第で、折りたたみの開閉を振り分けられます。

詳しくは[折りたたみの（初期設定の開閉）設定を変更する]を御参照ください。

Cタイプと同じく、小説タイトルも全てMainというリンクボタンに収納されているのでJavaScript有効時に限れば、掲載小説が多い場合にもおススメ。
無効時は、スタンダードタイプ・tempタイプと同じレイアウトで表示されます。

Jタイプ

JavaScript有効時、メニューボタンをクリックするとコンテンツがメインカラム上にポップアップで表示されます。

無効時はスタンダードタイプ・tempタイプと同じレイアウトで最初からメインカラム上に表示されます。

　新しいタイプなので衣替えをする場合のスタイルシートは　ver1109　以降推奨

　カスタマイズの難易度３
フルスクリーン仕様のテンプレートでは、閲覧画面に合わせて背景画像のサイズも変動します。IE７以上であればワイド画面でも縮小画面でも画像が切れません。（IE6以下は固定サイズ通常表示）

normal-PF-Planet2


フルスクリーン表示されるテンプレートのスタイルシート冒頭には以下のように記されています。

/* =============================================
～　中略　～

但し、このテンプレートの背景画像はIE7以上ではフルスクリーンで表示させているため
基本のHTMLに、フルスクリーン表示のためソースが追加してあります。
他のCSSに変更する場合はHTMLから必ずこのソースを削除し
逆にこのCSSに変更する場合は追加してください。
ソースを削 除もしくは追加せずに衣替えをした場合、
IE6以外では背景画像が表示されません。

詳しくは作者ブログ解説記事を参照⇒http://noveltemplate.blog26.fc2.com
============================================= */

スタイルシートで背景を指定しているわけではなく、HTML中にフルスクリーン表示の為のソースを追加してあるので、衣替えの際には、このソースを追加、もしくは削除する必用があります。

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

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

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

［HTML編集］部分をカスタマイズします。
フルスクリーン表示のための追加ソースはボディタグ<body>の直下にあります。

PFタイプ・PF2タイプ

<!--not_date_area--><!--not_search_area--><body id="<!--index_area-->index<!--/index_area--><!--permanent_area-->permanent<!--/permanent_area--><!--category_area-->category<!--/category_area--><!--tag_area-->tag<!--/tag_area--><!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area--><!--page_area--><!--not_index_area-->page<!--/not_index_area--><!--/page_area-->"><!--/not_search_area--><!--/not_date_area-->
<!--date_area--><body id="date" class="date1"><!--/date_area-->
<!--search_area--><body id="search" class="search1"><!--/search_area-->

<!--フルスクリーン表示のための追加ソースここから-->
<!--index_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/index_area-->
<!--フルスクリーン表示のための追加ソースここまで-->

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

<div class="main_frm<!--category_area--> cat_bg<%cno><!--/category_area--><!--permanent_area--><!--topentry--><!--parent_category--> en_cat<%topentry_parent_category_no><!--/parent_category--><!--/topentry--> en_cat<!--topentry--><%topentry_category_no><!--/topentry--> en_bg<%pno><!--/permanent_area-->">

スタンダードタイプ

<body <!--index_area-->onload="hidethem()"<!--/index_area--> 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--><!--page_area--><!--not_index_area-->page<!--/not_index_area--><!--/page_area-->">

<!--フルスクリーン表示のための追加ソースここから-->
<img class="bg" src="画像ファイルアドレス" alt="" /><!--フルスクリーン表示のための追加ソースここまで-->

<div class="main cat_bg<%cno><!--permanent_area--><!--topentry--><!--parent_category--> en_cat<%topentry_parent_category_no><!--/parent_category--> en_cat<%topentry_category_no><!--/topentry--> en_bg<%pno><!--/permanent_area-->">

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

同じデザインのまま表紙を別タイプのレイアウトにする場合はHTMLを変更しますが、その場合は、
変更したHTMLの同じ場所（ボディタグの直下）にフルスクリーン表示のためのソースを追加します。

レイアウトは同じまま別デザインに変更する場合はスタイルシートを変更しますが、その場合は、
HTMLからフルスクリーン表示のためのソースを削除します。

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

　カスタマイズの難易度２

今回の改訂（～2010.2.18.）で、novel-PFタイプのテンプレートのHTMLを統一致しました。

今後は、同じnovel-PF-HTMLのテンプレートであれば、スタイルシート部分を丸ごとコピペして貼りかえるだけで、、簡単にブログのデザインを変更することができます。（2010.2.18.以降にＤＬしたテンプレートの場合）

ＨＴＭＬは同じなので、オリジナルに施したカスタイズがそのまま衣替えしたテンプレートにも反映されます。
もちろん、素材提供サイト様の著作権表示リンクの変更は必要ですが、それ以外は、少なくともHTML部分に関しては、テンプレートを変更する度に以前と同じ複雑なカスタイズを繰り返す必要はなくなりました。違うテンプレートに変更したいけれど、またＨＴＭＬを最初からカスタマイズし直さなくてはならないのは億劫という方におススメです。とっても楽になりました。

　カスタマイズの難易度２

季節季節に、服を着替えるようにテンプレートを取り替えて、手軽にサイトの雰囲気を一新させることができるのはブログの楽しみであり利点です。でもご利用のテンプレートが、手をかけ、時間をかけ、自分ナイズにカスタマイズなさったものであれば、話は別。なにしろ、新しいテンプレートに取り替えたら、カスタマイズも、最初からやり直さなくてはならないのですから、早々簡単にお引越しも衣替えもできません。そろそろテンプレートも取り替えたい、でも、カスタマイズし直さなくてはならないのは、ちょっと…。
そんな皆様に超簡単衣替えプランのご紹介です。

HTMLやSCCを共有している同じタイプのテンプレートはスタイルシートを変更するだけでデザイン変更できます。

2010.4.8.現在、novel-PF・novel-PF2タイプ・novel-Sタイプのテンプレートは、タイプ別にHTMLを統一させる改訂作業が完了致しました。他のタイプも、順次統一化？を進めてまいります。

お知らせ

2011.9.1.現在、(ver1109以降の)novel-PFタイプ・PF2タイプ以外のテンプレートであればタイプは違っても、HTMLとスタイルシートに互換性を持たせましたので、衣替え可能です。novel-PFタイプ・PF2タイプは両タイプであれば互換性ありです。

　注意！

衣替えなさる前にお手元のテンプレートを御確認ください。スタイルシートの冒頭にバージョンナンバーの記載がない場合、もしくは(ver1105)以前のバージョンの場合は、ご面倒とは存じますが、再ダウンロードなさり、HTMLとスタイルシートを最新のものに変更なさってから衣替えなさる事をおススメ致します。
新しいバージョンは、新機能を追加しただけでなく、カスタマイズする場合も改訂以前のものより簡単便利になっております。
また、一ヵ月以上更新がない場合の広告も、改訂版は、不要な重複を削除し、記事本文と明確に区分けして表示させているので、改訂以前に比べてすっきりとしており、記事本文が読みやすくなっています。

特に注意！

FC2ブログ仕様変更により、共有テンプレートの文字コードが強制的に EUC-JP から、 UTF-8 に変換されるようになりました。
HTMLとスタイルシートの文字コードが異なっていると、スタイルシート（画像・色・レイアウト）が全く反映されなくなります。
拙作テンプレの文字コードは2012.11月現在UTF-8に統一していますが、仕様変更以前はEUC-JP でした。
衣替え（スタイルシートの変更）やサイト内配布テンプレート御利用の際は、HTMLもスタイルシートも最新バージョンのものをDLしてご利用ください。

衣替えの準備

（1）スタイルシートの確認

まず、最初に、現在適用中のテンプレートの衣替えが可能かどうか確認します。
仮に、この適用中のテンプレートをテンプレートAとよびます。

テンプレートの管理画面を開きます。

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

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

［スタイルシート編集］部分の冒頭を確認します。


衣替えができるテンプレートはスタイルシートの冒頭に以下のような説明があります。

同じタイプのテンプレートであればスタイルシートを交換することで
簡単に衣替えできますが、衣替えをする場合は素材提供サイト様の著作権表示がある
HTMLの最後にあるコピーライト部分も必ず変更してください。

上のような記載があれば問題なく衣替えできます。
（HTMLが統一されていない）改訂前のテンプレートにはその記述がなく、スタイルシートに互換性がないため、同じタイプであっても衣替えはできませんので、ご注意ください。

（2）テンプレートをコピー

テンプレートAの衣替えできることが確認できたらそのコピーをとります。
コピーのとり方は こちら
このコピーを便宜上テンプレートBと呼びます。
コピーをとったので、現在の管理画面は、テンプレートBの編集画面になっているはずです。

（3）衣替え用のテンプレートをDL

テンプレートBの編集画面をそのままにして別窓を開いて、衣替え用のテンプレートをDLします。

画面の上部の【共有テンプレートの追加】⇒右クリック⇒【新しいウィンドウで開く】⇒クリック

衣替え用のテンプレートをDLしたら、そのテンプレートの編集画面を開きます。
この衣替え用にDLしたテンプレートをテンプレートCとします。

衣替えカスタマイズ

テンプレートBとテンプレートC、二つのテンプレートの編集画面が開いていると思います。

（1）著作権表示の変更

最初に著作権表示を変更します。

テンプレートC　の［ＨＴＭＬ編集］部分を一番下までスクロールしてゆき、以下の部分を探します。

<!--▼▼フッター▼▼-->
<div class="layout_footer">
<!--▼コピーライト-->
<div class="copyright">
Copyright © <a href="./"><%blog_name></a>. Powered By <a href="http://blog.fc2.com/" target="_blank">FC2</a> Photograph<a href="http://www.yunphoto.net " target="_blank" title="ゆんフリー写真素材集">ゆんフリー写真素材集</a> Design By <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel Template</a>
<br />
<!--削除不可広告開始--><%ad> <%ad2><!--削除不可広告終了--></div>
<!--▲コピーライト-->
</div>
<!--▲▲フッター▲▲-->

要は太字の部分の素材サイトさまの著作権表示とリンクだけを変更すればよいのですが、
解りづらい場合は、コピーライト・もしくはフッター部分を丸ごとコピーします。

それを、テンプレートB　の［ＨＴＭＬ編集］部分の同じ箇所に貼り付けて差し替えます。


ＨＴＭＬ部分の編集はこれだけで、手作業もこれで終わりです。
あとはカーソルだけの作業で、スタイルシートを差し替えていきます。

　カスタマイズの難易度３

Novelテンプレートは小説専用テンプレートですが、小説以外の用途でご利用の方のために、Novelテンプレートを逆アレンジした一般ブログ用テンプレートも公開しています。

2011.12.26.　追記

小説用のテンプレートであっても、ver1112以降のバージョンであれば、スタイルシートの末尾に以下を追加すると、NovelListへのリンクボタンを含めて、テンプレート内から小説関連の表示が全て非表示になりますので、簡易型の一般用テンプレとしてご利用になれます。
.delete { display : none!important ; }

現在、一般用テンプレートとして公開しているのは各タイプ、それぞれ表紙ありと表紙なしの二種類づつだけですが、スタイルシートを変更することで、公開中の全ての小説用テンプレートを一般ブログ用としてご利用になることができます。

テンプレートのタイプ	表紙付き（HPサイト風）	表紙無し（一般ブログスタイル）
templateタイプ・ tempタイプ共通	normal-temp_1	normal-temp_2
Sタイプ	normal-S-simple1	normal-S-simple2
Rタイプ・Rfタイプ共通	normal-R-Html-1	normal-R-Html-2
PFタイプ・PF2タイプ共通	normal-PF-Sky	normal-PF-Black

テンプレート名をクリックすると、それぞれのテンプレートの解説記事が開き、画像をクリックするとテンプレートがプレビューされます。

まだ一般ブログ用を公開していない上以外のタイプの新作テンプレート(GタイプやJタイプ)も、上の（PFタイプ・PF2タイプ以外の）一般用テンプレートのHTMLを用いれば、デザインは同じまま一般用ブログテンプレートに変更できます。但し、表紙ページはポップアップや折りたたみ機能はなく、変更したテンプレートのタイプと同じレイアウトで表示されます。

novel-PF,PF2タイプ以外限定

個々のブログが掲載している小説（カテゴリ）の数や表示させるプラグイン３は違うので、テンプレートによっては、DL時のオリジナルのままでは、なんとなくページ全体のバランスが悪く見える事もあると思います。

そんな時はHTMLの衣替えがおススメです。

スタイルシートを衣替え(変更)するとデザインや背景色などが一新されますが、HTMLを衣替え(変更)した場合は背景画像や背景色などデザインはほぼ同じまま表紙ページのレイアウトを変更できます。

自ブログの表紙ページの現状にあったレイアウトが見つかるかもしれません。

表紙ページのレイアウト（タイプ別）

スタンダードタイプ・tempタイプスタンダード(novel-template)タイプとtempタイプのHTMLは同じです。
プラグイン３はサイドメニュー、メニューボタン下に縦一列表示されます。

サイドカラムが長くなると全体のバランスが悪いので、掲載小説(カテゴリ)の数が少なく、プラグイン３は、拍手ボタンやアクセスカウンターなどコンパクトで少なめの場合に向いています。

Sタイプ

Sタイプはスタンダードタイプ・tempタイプとほとんどおなじですが、プラグイン３がフッターの上に横に並んで表示されます。
プラグイン３に表示させるコンテンツが多い場合におススメ。

Rタイプ

RタイプはSタイプとほとんど同じですが、ご案内(サイト説明文)がヘッダー内、ブログタイトル下に表示されます。

Cタイプ

プラグイン３は、メイン（右）カラムの「最近の更新」の下に「最近の更新」と同じ幅、同じスタイルで表示されます。メールフォームなど広いスペースに表示したいコンテンツがある場合に最適です。

比較的小さいスペースで事足りるバナーや拍手タグなどは、HTMLのフリースペース(2)の個所に追加すると、サイドメニューのメニューボタン下に表示されます。

またメニューボタンはJavaScript有効時クリックで開閉します。小説タイトルも全てMainというリンクボタンに収納されているので掲載小説が多い場合にもおススメです。

JavaScript無効時は最初から開示されます。カスタマイズ次第で、折りたたみの開閉は振り分けられます。
詳しくは[折りたたみの（初期設定の開閉）設定を変更する]を御参照ください。
　新しいタイプなので衣替えをする場合のスタイルシートは　ver1202　以降推奨

Gタイプ

JavaScript有効時、メインカラムは画像のみが表示。
コンテンツは全てサイドカラムに表示され、メニューボタンをクリックすると開閉します。

DL時は「ご案内」と「最近の更新」のみ開示。それ以外は折りたたまれていますが、カスタマイズ次第で、折りたたみの開閉を振り分けられます。

詳しくは[折りたたみの（初期設定の開閉）設定を変更する]を御参照ください。

Cタイプと同じく、小説タイトルも全てMainというリンクボタンに収納されているのでJavaScript有効時に限れば、掲載小説が多い場合にもおススメ。
無効時は、スタンダードタイプ・tempタイプと同じレイアウトで表示されます。

Jタイプ

JavaScript有効時、メニューボタンをクリックするとコンテンツがメインカラム上にポップアップで表示されます。

無効時はスタンダードタイプ・tempタイプと同じレイアウトで最初からメインカラム上に表示されます。

　新しいタイプなので衣替えをする場合のスタイルシートは　ver1109　以降推奨

　カスタマイズの難易度３
フルスクリーン仕様のテンプレートでは、閲覧画面に合わせて背景画像のサイズも変動します。IE７以上であればワイド画面でも縮小画面でも画像が切れません。（IE6以下は固定サイズ通常表示）

normal-PF-Planet2


フルスクリーン表示されるテンプレートのスタイルシート冒頭には以下のように記されています。

/* =============================================
～　中略　～

但し、このテンプレートの背景画像はIE7以上ではフルスクリーンで表示させているため
基本のHTMLに、フルスクリーン表示のためソースが追加してあります。
他のCSSに変更する場合はHTMLから必ずこのソースを削除し
逆にこのCSSに変更する場合は追加してください。
ソースを削 除もしくは追加せずに衣替えをした場合、
IE6以外では背景画像が表示されません。

詳しくは作者ブログ解説記事を参照⇒http://noveltemplate.blog26.fc2.com
============================================= */

スタイルシートで背景を指定しているわけではなく、HTML中にフルスクリーン表示の為のソースを追加してあるので、衣替えの際には、このソースを追加、もしくは削除する必用があります。

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

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

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

［HTML編集］部分をカスタマイズします。
フルスクリーン表示のための追加ソースはボディタグ<body>の直下にあります。

PFタイプ・PF2タイプ

<!--not_date_area--><!--not_search_area--><body id="<!--index_area-->index<!--/index_area--><!--permanent_area-->permanent<!--/permanent_area--><!--category_area-->category<!--/category_area--><!--tag_area-->tag<!--/tag_area--><!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area--><!--page_area--><!--not_index_area-->page<!--/not_index_area--><!--/page_area-->"><!--/not_search_area--><!--/not_date_area-->
<!--date_area--><body id="date" class="date1"><!--/date_area-->
<!--search_area--><body id="search" class="search1"><!--/search_area-->

<!--フルスクリーン表示のための追加ソースここから-->
<!--index_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/index_area-->
<!--フルスクリーン表示のための追加ソースここまで-->

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

<div class="main_frm<!--category_area--> cat_bg<%cno><!--/category_area--><!--permanent_area--><!--topentry--><!--parent_category--> en_cat<%topentry_parent_category_no><!--/parent_category--><!--/topentry--> en_cat<!--topentry--><%topentry_category_no><!--/topentry--> en_bg<%pno><!--/permanent_area-->">

スタンダードタイプ

<body <!--index_area-->onload="hidethem()"<!--/index_area--> 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--><!--page_area--><!--not_index_area-->page<!--/not_index_area--><!--/page_area-->">

<!--フルスクリーン表示のための追加ソースここから-->
<img class="bg" src="画像ファイルアドレス" alt="" /><!--フルスクリーン表示のための追加ソースここまで-->

<div class="main cat_bg<%cno><!--permanent_area--><!--topentry--><!--parent_category--> en_cat<%topentry_parent_category_no><!--/parent_category--> en_cat<%topentry_category_no><!--/topentry--> en_bg<%pno><!--/permanent_area-->">

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

同じデザインのまま表紙を別タイプのレイアウトにする場合はHTMLを変更しますが、その場合は、
変更したHTMLの同じ場所（ボディタグの直下）にフルスクリーン表示のためのソースを追加します。

レイアウトは同じまま別デザインに変更する場合はスタイルシートを変更しますが、その場合は、
HTMLからフルスクリーン表示のためのソースを削除します。

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