Novel テンプレート

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

カスタマイズの方法

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

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

［ＨＴＭＬ編集］部分をカスタマイズします。
スクロール、もしくは検索で以下のソースを探します。

注意：実際にご覧になるテンプレートのＨＴＭＬのソースの中には＆ｎｂｓｐ；という半角文字がそこここに入っていると思いますが気にしないでください。これは半角スペースを表すもので、ブログの記事内では文字としては表示されませんので下のソースには表示されないだけです。

サイトナビゲーションにパン屑リスト機能を追加した改訂版のNovelテンプレートでは、以下のHOMEとNovelListの間に、エリア別の表示のためのタグが置かれています。改訂版の場合は、エリア別のナビゲーション部分はそのままにして、NovelList以後の部分で追加・削除などのカスタマイズをしてください。

サイトナビゲーション①のソース

<!--▼▼サイトナビゲーション①▼▼-->
<!--not_permanent_area-->
<div class="navi">
<a href="./" title="HOME（トップページ）へ"> ◆Home </a>
<a href="<%url>?tag=%2A" title="Novel List（小説一覧ページ）へ"> ◆Novel List </a>
<a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a>
<a href="<%url>?page=0" title="通常ブログ画面へ"> ◆通常ブログ画面 </a></div>
<!--▲▲サイトナビゲーション①▲▲-->

サイトナビゲーション②のソース

<!--▼▼サイトナビゲーション②▼▼-->
<a href="<%topentry_category_link>" title="【<%topentry_category>】もくじへ">◆ Index </a><a href="./" title="HOME（トップページ）へ"> ◆Home </a><a href="<%url>?tag=%2A" title="Novel List（小説一覧ページ）へ"> ◆Novel List </a><a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a>
<a href="<%url>?page=0" title="通常ブログ画面へ"> ◆通常ブログ画面 </a>
<!--▲▲サイトナビゲーション②▲▲-->

サイトナビゲーション③のソース

<!--▼▼サイトナビゲーション③▼▼-->
<div class="navi">
<a href="<%topentry_category_link>" title="【<%topentry_category>】もくじへ">◆ Index </a><a href="./" title="HOME（トップページ）へ"> ◆Home </a><a href="<%url>?tag=%2A" title="Novel List（小説一覧ページ）へ"> ◆Novel List </a><a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a>
<a href="<%url>?page=0" title="通常ブログ画面へ"> ◆通常ブログ画面 </a><a href="#pagetop" title="↑ページトップへ"> <i><small>▲PageTop</small></i> </a>
</div>
<!--▲▲サイトナビゲーション③▲▲-->

サイトナビゲーション④のソース

<!--▼▼サイトナビゲーション④▼▼-->
<!--not_permanent_area-->
<h4 class="navi">
<a href="./" title="HOME（トップページ）へ"> ◆Home </a><a href="<%url>?tag=%2A" title="Novel List（小説一覧ページ）へ"> ◆Novel List </a><a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a><a href="<%url>?page=0" title="通常ブログ画面へ"> ◆通常ブログ画面 </a><a href="#pagetop" title="↑ページトップへ"> <i><small>▲PageTop</small></i></a>
</h4>
<!--/not_permanent_area-->
<!--▲▲サイトナビゲーション④▲▲-->

サイトナビゲーション⑤のソース

<!--▼▼サイトナビゲーション⑤▼▼-->
<div><a href="./" title="HOME（トップページ）へ"> ◆Home </a><a href="<%url>?tag=%2A" title="Novel List（小説一覧ページ）へ"> ◆Novel List </a><a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a><a href="<%url>?page=0" title="通常ブログ画面へ"> ◆通常ブログ画面 </a></div>
<!--▲▲サイトナビゲーション⑤▲▲-->

最新のテンプレートは上とはソースの内容やサイトナビゲーションの数に若干の違いがあります。

例　　<a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a>

赤字の部分はリンク先のページアドレス［URL］
緑色の部分はカーソルをあてた時に表示されるリンク先の説明
青字の部分はリンク先のタイトルです。

<a href="<%url>archives.html" title="全記事一覧ページ"> ◆All </a>
不要であれば、まるごと削除します。
タイトルを変えるだけであれば、青字の部分 All を変更します。

新しいコンテンツへのリンクを追加する場合には、

<a href="追加する新しいコンテンツのアドレス" title="追加する新しいコンテンツの名称"> ◆追加する新しいコンテンツのタイトル </a>

上のソースを、区切りの部分、<a href="～> の前か、</a> の後ろに挿入します。
半角スペースが必用な箇所には、半角文字で＆ｎｂｓｐ；（注：これは全角です）をいれてください。

カスタマイズが終わったら、
【 更新 】 をクリック

表紙ページと個別記事ページのサイトナビゲーションが変更しているか確認します。
変更していない場合は、ブラウザの更新ボタンか、ヘッダーのサイトタイトルをクリックします。

アクセス解析を設置している場合には、新着マークが投稿された時間に関係なく表示されてしまうことがあるようです。その場合には新着マークのスクリプトの内容を変更してください。詳しくは こちら

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

新着マークの変更

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

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

［ＨＴＭＬ編集］部分をカスタマイズします。
スクロールしていくと下の方に、下記のような場所があると思います。

<script type="text/javascript"><!--
var today=new Date();
function nw(u1,u2,u3,u4) {
var nt=72; var c=new Date(u1,u2-1,u3,u4);
if (today-c<3600000*nt) {
document.write('<span class="new">New</span>')}
}
--></script>

新着マークが必用ない場合は、ＨＴＭＬから上の部分を削除してください。
新着マークが表示される時間を初期設定の更新後72時間から、たとえば24時間に変更したい時には赤字の数字を24に変更します。（注意：数字は必ず半角にしてください）また新着マークは画像で表示することもできます。青字の部分を使いたい画像のイメージタグ<img src="画像URL">と差し替えれば、更新後の所定の時間、記事タイトルのタイトル横には赤字のNewの代わりに、その画像が表示されます。

2009.6.16.追記

アクセス解析を設置している場合には、新着マークが時間に関係なく表示されてしまうなど、乱れがでることがあるようです。その場合には、上のスクリプトの中のtoday　を　Timenow　に変更してお験しください。

Newの字色や字体を変更したい場合には［ＨＴＭＬ編集］の下にある［スタイルシートの編集］部分をカスタマイズします。スクロールしていくと下の方に、下記のような場所があると思います。

.new {
color : red;
font-family : "Times New Roman", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka",sans-serif;
font-style: italic;
font-weight : normal;}

色を変更したい場合には　赤字の部分のred を変更したい色の名前か#をつけた3桁もしくは６桁のカラーコードに変更します。現在は斜体文字ですのでこれを普通の状態にする場合には青字の部分font-style: italic;を削除します。太字にする場合には緑色の部分normalを boldと変更します。

削除、あるいは変更したい内容に書き換えたら
【 更新 】 をクリックする。

このカスタマイズは「初心者でもできる簡単ＦＣ２ブログの作り方」の【新着マークをつけたい！】
【最近の記事・コメント・トラックバックにNEWをつけたい！】【記事のタイトルにNEWをつけたい！】
で教えていただきました。るんばば様ありがとうございました！
新着マークだけではなく、初心者にの立場に立った、すばらしくわかりやすく丁寧なご説明は公式マニュアル以上です！右も左もわからないビギナーにとっては、感涙ものの、本当にわかりやすくありがた～い内容が盛りだくさんですのでＦＣ２ビギナーであれば必見のサイトさま♪

ブログ全体の文字を変更する場合

スタイルシートから下のような　body　の設定箇所を探します。

body {
font-family : "Times New Roman", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka",sans-serif;
text-align : center;
font-size : 85%;
line-height : 150%;
color : #333;
background-image : url("http://blog-imgs-32.fc2.com/n/o/v/noveltemplate/ko041-31.jpg");
background-repeat : no-repeat ;
background-position : right bottom;
}

テンプレートによってそれぞれ設定が違いますが、文字に関係する設定は、color : 　（文字色）　font-size 　（フォントのサイズ）と　line-height　（行間）の数値です。赤字の部分で文字の大きさを変更し、それによってバランスが悪くなった場合には青字の部分の行間の数値も変更します。文字色を変更する時は茶色の部分の数値（カラーコード）を変更します。カラーコードは記事の編集部分のパレットのツールバーで主要な色のコード番号は確認できますが、もっと多くの色や背景とのバランスなどをチェックしたい時には、TAG＜index＞さまのカラーチャートのページがおススメです。

　テンプレートによっては、文字のサイズを基準としてボックスの幅、余白を指定してある個所があります。文字サイズを変更することによってテンプレート全体のレイアウトが崩れることがありますのでご注意ください。

個別記事ページの小説本文の文字を変更する

それぞれのテンプレートのスタイルシートの中から、個別記事の設定部分を探します。

PF・PF2タイプ以外の場合

/*エントリー2：個別記事ページ（小説ページ）*/
.entry_text2 {
margin : 0px;
padding : 20px 80px 30px 70px;
font-size : 120%;
line-height: 200%;
background-image : url("http://blog-imgs-32.fc2.com/n/o/v/noveltemplate/ko041-31.jpg");
background-repeat : no-repeat ;
background-position : right bottom;
}

文字の大きさを変更する場合は　font-size 　の赤字の数値を、行間を変える場合は　line-height　の青字の数値を変更します。
その際、文字の大きさにあわせて、左右の余白も変更する必要がある時には、padding : の数値で調整します。
右の余白を変更する時は緑色の部分の数値を、左の余白を変更したい時にはピンク色の部分の変更します。
（paddingの数値が四つ並んでいる時は、上・右・下・左の余白を設定しています。一つであれば、上下左右全ての余白がその数値、二つであれば、最初の数値が上下、もう一つの数値は左右の余白を設定しています）

　　2012.10.6.追記改訂版のテンプレートはリキッドレイアウトで組んでありますので、margin や　padding　がパーセンテージで指定されていたり、最大横幅等　max-width　_width が指定されている場合があります。それらの数値や単位を変更すると縮小画面でレイアウトが崩れることがあるのでご注意ください。

PF・PF2タイプの場合

#permanent .entry {
margin:0 0 0 1em ; padding:1em 2em;
color: #333333;
background-color: transparent;
line-height : 200% ;text-align: left; _width:95%;overflow: hidden;
}

PF・PF2タイプは、bodyにフォントサイズの指定記述がありませんが、font-size :100%なので省いてあります。上の#permanent .entry　の設定にも　font-size 　の指定がありません。この場合、フォントサイズを指定している直近の祖先ボックスの指定がそのまま継承されます（上の場合は、body のfont-size : 100%; 　）これを変更する場合には、font-size : ●●%;　のように新たにフォントサイズを指定する内容を書き加える必要があります。

通常ﾌﾞﾛｸﾞ画面の文字の大きさを変更する

スタイルシートの中から以下の部分を探します。

PF・PF2タイプ以外の場合

/*エントリー：記事部分*/
.entry_text {
margin : 0px;
padding : 5px 20px 10px 20px;
line-height : 170%;
border-top : 1px dotted #693 ;
border-bottom : 1px dotted #693 ;

}

上の例では、.entry_text 　の設定には　font-size 　を指定している記述がありません。この場合、body の設定、つまりfont-size : 85%; 　の指定がそのまま反映されます。これを変更する場合には、font-size : ●●%;　のように新たにフォントサイズの指定を追加します。

PF・PF2タイプの場合

#page .entry {
margin : 0 0 20px 0 ;
padding : 0 2em 2em 2em ;
color: #333333;
font-size : 90% ;border-top : 4px dotted #ADD8E6;
line-height : 180% ;letter-spacing: normal ;
}

1em = 1文字分の長さ　　1px = 画面上の1ピクセル



注意：エントリー関係の設定は、個別記事ページ・通常ﾌﾞﾛｸﾞ画面固有のものだけではなく、他のページ（エリア）の表示と共用している場合があります。その場合には、設定を変更する事によって、その設定を共有している他のページの文字の大きさも変わりますのでご注意ください。

尚、個々のテンプレートの文字の変更に関するご質問・お問い合わせはご遠慮ください。カスタマイズなさる場合は、上の記事内容を参考に、ご自身の判断責任、そしてご自力でお願い申しあげます。

2012.10.6.追記

上述した理由から、この記事はコメントできないように設定してありますが、文字の変更にについては、例え別記事からご質問を寄せられても、ご返答することはありませんので、悪しからずご了承ください。

カスタマイズはあくまでご自身のできる範囲内でとお願いしております。上の記事だけでは出来ない、わからないという場合、このカスタマイズはご自身が出来る範囲を超えているとご理解ください。現状での文字変更は諦め、スタイルシートの基本を学ぶ等、スキルアップなさってから、ご自力でトライしてください。

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

カスタマイズの方法

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

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

［ＨＴＭＬ編集］部分をカスタマイズします。
ＨＴＭＬをスクロールして以下の部分を探します。スクロールバーで囲むのは赤字の部分です。

<!-- ▼ ▼フリースペース▼▼ -->
<div class="topindex">
<h2><font style="background-color:#ffffff;font-weight : bold;">ご案内</font></h2>
<p><%introduction>
<br /><br /></p>
<!-- ▲ ▲フリースペース ▲▲-->

<br />
<h3><font style="background-color:#ffffff;font-weight : bold;">最近の更新</font></h3>
<div class="side_text">
<ul>
<!--recent-->
<li><%recent_month>.<%recent_day>.  <a href="<%recent_link>" title="[<%recent_title>]を読む"><%recent_title></a> <script type="text/javascript">
nw(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script></li>
<!--/recent-->
</ul>
<script type="text/javascript">
<!--

前後に青字の部分を追加することでスクロールバーを設置できます。

<div style="overflow: auto;
height:130px;
border: 1px #C2A858 dotted;
border: 1px #C2A858 dotted;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #C2A858;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C2A858;
scrollbar-arrow-color: #C2A858;">
<ul>
<!--recent-->
<li><%recent_month>.<%recent_day>.  <a href="<%recent_link>" title="[<%recent_title>]を読む"><%recent_title></a> <script type="text/javascript">
nw(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script></li><br />
<!--/recent-->
</ul>
</div>

このままでもＯＫですが、ちょっと狭苦しく見えるので文頭のリストマークをはずしましょう。上から赤字の部分を削除して緑色の部分を追加します。

【更新】をクリック

スクロールバーのカスタマイズは他の場所でも使えます。通常ﾌﾞﾛｸﾞ画面のサイドバーで囲みたいプラグインがあれば同じ様にスクロールバーで囲むことができます。

プラグインをスクロールバーで囲む

菅理ページから［環境設定］⇒【プラグインの設定】をクリックして
［プラグインタイトル］ページを開く。
［ＰＣプラグイン］のリストの〔▼プラグインカテゴリ１〕〔▼プラグインカテゴリ２〕の中から
スクロールバーで囲みたいプラグインタイトルの【 詳細 】 をクリック
開いたページの表の一番下の欄を見ます。↓

プラグインの改造

【HTMLの編集】を行います。（上級者向け）

（上級者向け）という言葉にびびることなく、【HTMLの編集】をクリック
開かれた画面に表示されているＨＴＭＬの前後を上と同じように青字で記されたタグで囲めばＯＫです。

【設定】をクリック

スクロールバーの色を変更なさりたい時は、上述した「プログバーツを探せ」さまの当該記事に、スクロールバーに関する便利なサイトさまがたくさんご紹介されておりますのでそちらをご参考になさってください。「プログパーツを探せ」様は、ＦＣ２に限らず、ありとあらゆる（と申してよいかと）プログパーツの情報をサンプルと共にご紹介なさっている、ブロガーであれば必見のサイトさまです。とっても便利でとっても楽しいブログパーツの情報が盛りだくさんですので、お時間のある時など、ぜひ一度伺ってみてくださいませ。

設置の方法

①公式プラグイン「メールフォーム」を追加する。

管理画面⇒【プラグインの設定】⇒【公式プラグインの追加】
⇒【拡張プラグイン】⇒【メールフォーム】⇒【追加】
メールフォームを追加しましたという表示がでます。
プラグインのリストの中の【メールフォーム】の欄の「表示する」のチェックボックスをクリックしてチェックをはずします。（非表示になります）

②メールフォームを記事に投稿

【新しく記事を書く】で記事の編集画面にメールフォームのソースを投稿する。

<form action="./" method="post">
<p class="plugin-mail" &align>

名前:<br />
<input type="text" size="10" name="formmail[name]" value="" maxlength="100" style="width:50%;" /><br />
メール:<br />
<input type="text" size="10" name="formmail[mail]" value="" maxlength="150" style="width:50%;" /><br />
件名:<br />
<input type="text" size="10" name="formmail[title]" value="" maxlength="150" style="width:50%;" /><br />
本文:<br />
<textarea name="formmail[body]" cols="10" rows="6" style="width:100%;"></textarea>
<input type="submit" value=" 確認 " />
<input type="hidden" name="mode" value="formmail" />
<input type="hidden" name="formmail[no]" value="&formno" />

</p>
</form>

赤い数値の箇所は各入力欄の長さです。
お好みに合わせて変えてください。

これで記事の中にメールフォームを作ることができます。
必ずテストメールを送って正しく動くか確認することをお勧めします。

追記の編集画面下部
【記事の設定】⇒［改行の扱い］⇒HTMLのみにチェックを入れる

【記事を保存】をクリック

メールフォームを設定した記事をﾒﾆｭｰやナビゲーションに追加する場合はご参照ください。
サイトナビゲーションに追加する場合はコチラ
表紙メニューに追加する場合はコチラ

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

カスタマイズの方法

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

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

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

<div class="cat-navi">
～　中略　～
<div id="kanrendesu">
</div>
</div>

HTMLをスクロールして上の部分を探して、以下と差し替えます。

<div class="cat-navi"> <script type="text/javascript" src="http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/jkl-parsexml.js"></script> <!--ソース改変が可能であれば、src内のURLを自分でアップロードしたjkl-parsexml.jsのURLに変更してみてください。負荷が分散します。--> <script> <!-- var show_titles = 31 // 表示する関連エントリーの数。1～30の範囲を。推奨は5。 // 31以上で同一カテゴリ内の新着エントリー順に表示します。 var sortflag = 1 // 31以上に設定した場合の、表示順に関する設定 // 0:新着順 // 1:古い順 function get_fc2_cate_rss(url){ var xml = new JKL.ParseXML( url ); var func = function ( data ) { fc2_cate_xml_parse( data ) ; } xml.async( func ); xml.parse(); } function fc2_cate_xml_parse( xml ){ var cate_entrys = new Array(); var output_fc2_entry = '' if(xml["rdf:RDF"].item[1] == undefined){ cate_entrys[0] = new Array(xml["rdf:RDF"].item.link , xml["rdf:RDF"].item.title) } else { for(i in xml["rdf:RDF"].item){ // cate_entrys[i] = [0]url , [1]title cate_entrys[i] = new Array(xml["rdf:RDF"].item[i].link , xml["rdf:RDF"].item[i].title) } } if(cate_entrys.length < show_titles){ if(sortflag == 1){ cate_entrys.reverse() } for(i in cate_entrys){ if (cate_entrys[i][0] != '<%topentry_link>'){ output_fc2_entry += '<li><a href="' + cate_entrys[i][0] + '">' + cate_entrys[i][1] + '</a></li>' } else { output_fc2_entry += '<li><b><a href="' + cate_entrys[i][0] + '">' + cate_entrys[i][1] + '</a></b></li>' } } } else { for (i = 0 ; i < show_titles ; i++ ){ choice_entry = Math.floor ( Math.random() * cate_entrys.length) if (cate_entrys[choice_entry][0] != '<%topentry_link>'){ output_fc2_entry += '<li><a href="' + cate_entrys[choice_entry][0] + '">' + cate_entrys[choice_entry][1] + '</a></li>' } else { output_fc2_entry += '<li><b><a href="' + cate_entrys[choice_entry][0] + '">' + cate_entrys[choice_entry][1] + '</a></b></li>' } cate_entrys.splice(choice_entry,1) } } var k_k_k = '<h3>INDEX　「<%topentry_category>」　</h3><ul>' + output_fc2_entry + '</ul>' k_k_k += '' document.getElementById('kanrendesu').innerHTML = k_k_k } get_fc2_cate_rss('<%url>?xml&category=<%topentry_category_no>') // --> </script> <div id="kanrendesu"> </div> </div>

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


スクロールして関連エントリーメーカーについての指定箇所を探します。
下は [ novel-template-sepia ]の例です。


青字の部分を追加し、赤字の部分を変更します。

/* 関連エントリーメーカーの表示 */
.cat-navi {
margin : 0px 0px 0px 0px;
padding : 10px 0px 40px 0px ;
font-size : 80%;
line-height : 160%;
}

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 2px 10px 2px 10px ;
font-size : 110%;
color: #FFF;
background-color : black;
border-top : 1px solid #fff;
border-left : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/o04-7-22.jpg");
background-repeat : no-repeat ;
background-position : left bottom;
}

.cat-navi ol {
margin : 0px;
padding : 5px 0px 10px 20px;
list-style : square ;
}

①　見出しの番号の指定がページ的におかしかったので、訂正します。

.cat-navi h5　⇒⇒　.cat-navi h3


②　以前の新着順もくじの時は、昇順のもくじに慣れている読者の便宜を図るつもりで、あえて連番（番号）のリストマークを表示させておりましたが、昇順になった現在、その必要はもうないと思います。
改訂版では番号ではなく、■のリストマークに変更します。
変更　　　.cat-navi ol 　⇒⇒　.cat-navi ul
追加　　　list-style : square ;

リストマークがご不要な場合は
list-style : square ;　ではなく、list-style : none ;　を追加します。

番号リストマークをそのままお使いになる場合は、②のカスタマイズはご不要ですが、その代わりに、HTMLの以下の部分を、ul から　ol　に変更してください。

var k_k_k = '<h3>INDEX　「<%topentry_category>」　</h3><ul>' + output_fc2_entry + '</ul>'

var k_k_k = '<h3>INDEX　「<%topentry_category>」　</h3><ol>' + output_fc2_entry + '</ol>'

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

記事タイトルが通し番号の場合などは、上のような縦並びではなく
横並び目次にするのがおススメです。 詳しくは　コチラ

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

カスタマイズ

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

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

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

全記事一覧ページの表示順序の変更

ＨＴＭＬをスクロールして以下の部分を探します。

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


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

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

～～　中略　～～


<script type="text/javascript">
<!--

var list = document.getElementsByName('cat<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul>');
for (var i = list.length - 1; i >= 0; i--) {
elm = list.item(i);
s = elm.innerHTML;
document.write('<li>', s,'</li>');
}
if(list.length > 0) document.write('</ul>');

～～　中略　～～


<!--/category-->

　
</div>
<!--▲カテゴリー別タイトルリスト-->

赤字の部分を以下に差し替えます。

for (var i = 0; i < list.length; i++) {

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

一般用テンプレートの衣替え（デザイン変更）

　注意！

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

以下は小説用のテンプレート【novel-temp-rose1】ですが、このテンプレートを一般ブログスタイルに変更するとします。

【novel-temp-rose1】


【novel-temp-rose1】はnovel-tempタイプです。ですから、同じタイプ（templateタイプ・tempタイプ共通）の一般用テンプレートである表紙付きの【normal-temp_1】か表紙がない【normal-temp_2】 のどちらのレイアウトで表示させるかをまず決めます。

表紙付き【normal-temp_1】

OR どちらかを選ぶ

表紙無し【normal-temp_2】

表紙付きの【normal-temp_1】はNovelListなど、小説テンプレ固有の表示がないだけで構造はほとんど小説用テンプレと変わりません。表紙がない【normal-temp_2】は、トップページが通常ブログ画面になる普通のブログスタイルで表示されます。

仮に、表紙なしで表示させたいとすれば、【normal-temp_2】のHTMLと、【novel-temp-rose1】のスタイルシートでテンプレートを表示させることになります。

HTML 【normal-temp_2】

AND

スタイルシート 【novel-temp-rose1】

【normal-temp_2】と【novel-temp-rose1】をそれぞれＤＬします。

　注意

templateタイプ・tempタイプ以外のタイプのテンプレートの場合も同様に、同じタイプの一般用テンプレートのうち、表紙付き、表紙無しのどちらかを選びます。
　小説用テンプレートの名前の冒頭は必ずnovelがつき、一般用用テンプレートはnormalで始まりますので、お間違えのないように！

二つのテンプレートをＤＬしたら、テンプレート管理画面を開いて、【normal-temp_2】と【novel-temp-rose1】の編集画面をそれぞれ別窓で開いておきます。

（1）著作権表示の変更

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

　最重要！

テンプレートにお借りしている素材は、素材サイト様の著作権リンクを表示する事をお約束して借り受けたものです。衣替えしたにも関わらず、素材サイト様の著作権表示リンクが変更されず、お借りしている作品の素材サイト様の著作権表示リンクが正しく表示されていない場合は、違反利用となりますのでご注意ください。
衣替えの際にはフッター部の著作権表示リンクを一番最初に必ず、変更してください！

novel-temp-rose1の
［ＨＴＭＬ編集］部分を最後の方までスクロールしてゆき、以下の部分を探します。

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

<!--▼コピーライト HTMLやスタイルシートを交換する場合はここから差し替えてください-->
<div class="copyright">

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

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

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

それを、normal-temp_2　　の
［ＨＴＭＬ編集］部分の同じ箇所に貼り付けて差し替えます。


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

（2）スタイルシートの差し替え

novel-temp-rose1　の
［スタイルシート編集］部分にカーソルを持っていきます。

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

そのままnormal-temp_2　の編集画面にもどり、
［スタイルシート編集］部分に、カーソルを持ってゆき、

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

これで、normal-temp_2　のデザインはnovel-temp-rose1　に変更されました。

更新する前に、間違いがないか確認します。

normal-temp_2　の　【 プレビュー 】 をクリック

normal-temp_2のプレビュー画面がひらきます。normal-temp_2は表紙がないので、novel-temp-rose1のデザインの通常ブログ画面が表示されているはずです。
デザインや著作権表示がnovel-temp-rose1のものに変更されているか確認します。

問題がなければ、

normal-temp_2　の　【 更新 】 をクリック

　小説用のテンプレートでは、表紙メニューでは未分類を表示させないようにしてあります。
上の例は表紙無しのスタイルへの変更でしたので必要ありませんでしたが、表紙付きのスタイルに変更し、表紙メニューのカテゴリタイトル部分に未分類を表示させる場合は、差し替えたスタイルシートから以下の部分を削除してください。

/*隠しカテゴリ*/
.未分類 {
display : none;
}

特に注意！

ブログサーバ番号なしのサーバーでは、共有テンプレートをDLした時点で、文字コードが強制的に EUC-JP から、 UTF-8 に変換されます。HTMLとスタイルシートの文字コードが異なっていると、スタイルシート（画像・色・レイアウト）が全く反映されなくなります。HTMLもスタイルシートも、同じブログからDLしたテンプレートのものであれば問題はないはずですが、それ以外の場合は、両者の文字コードが同一であることをご確認ください。

尚、サイト内配布しているテンプレートの文字コードは全て EUC-JP ですので、ご利用の際は、HTML と　スタイルシートの文字コードをどちらか一方に統一してください。
HTML <head>～</head>内⇒　 charset=EUC-JP"
スタイルシート冒頭⇒　@charset "EUC-JP";

カスタマイズ

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

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

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

Novelテンプレートには予め、個別記事ページと通常ブログ画面の記事末尾に、ランキングバナーなどを追加する個所が指定してあります。HTMLをスクロールして　個別記事ページ　（<!--permanent_area-->～<!--/permanent_area-->内）のソースの中からランキングバナーを追加する個所を探します

<!--permanent_area-->
～　中　略　～

<!--topentry-->

～　中　略　～

<!--▼ランキングバナーなどを貼る場合はここへ(1)▼-->

<!--▲ランキングバナーなどを貼る場合はここへ(1)▲-->

～　中　略　～

<!--/topentry-->

～　中　略　～

<!--/permanent_area-->

ランキングバナーの前後を、<div class="c cnカテゴリ番号 ad<%topentry_no>">～</div>で囲んだタグを指定された個所に追加します。
この時、カテゴリ番号を親カテゴリ番号にすると、その親カテゴリに属する全てのカテゴリの小説本文ページに表示させることができます。
以下はカテゴリ番号２の記事ページにバナーを表示させる場合の例です。

<div class="c cn2 ad<%topentry_no>">ランキングバナー</div>

複数のカテゴリに同じバナーを表示する場合は　二番目のクラス名　cnカテゴリ番号　の後ろに半角スペースを空けて、第三のクラス名として　cnカテゴリ番号　と列挙していきます。
以下はカテゴリ番号２，４，６　のカテゴリの個別記事ページで同じランキングバナーを表示する場合の例です。

<div class="c cn2 cn4 cn6 ad<%topentry_no>">ランキングバナー</div>

カテゴリ番号２，４，６　で別々のバナーを表示させる場合は以下

<div class="c cn2 ad<%topentry_no>">ランキングバナーA</div>
<div class="c cn4 ad<%topentry_no>">ランキングバナーB</div>
<div class="c cn6 ad<%topentry_no>">ランキングバナーC</div>

上で指定した個所でなくとも、<!--permanent_area-->～<!--/permanent_area-->内の、<!--topentry--><!--/topentry-->で囲まれた中であれば、タグをどこに追加しても特定のカテゴリにだけ表示することができます。但し、どこに追加しても、記事本文と拍手タグの間に割り込んで表示する事ができないのは同じです。

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

特定の記事に同じ定型文を表示する場合

カテゴリ分類に関係なく、特定の記事群に同様の内容の文章（定型文）などを表示したい場合は
表示させたい定型文の前後を、 pno記事番号<div class="c pno記事番号 ad<%topentry_no>">～</div>で囲みます。

<div class="c pno1 pno2 pno3 pno4 pno5 ad<%topentry_no>">定型文</div>

HTMLを表紙なし一般用テンプレートに変更する場合

表紙なしの一般用のテンプレートは、エリアによっては小説用とは別レイアウトになります。IDの指定を変更することでスタイルシートは対応させていますが、フルスクリーン表示はエリアタグで直接指定しているので、普通にフルスクリーン表示のソースをHTMLに追加するだけでは、エリアによって背景とレイアウトが合わずおかしな具合になります。こうした事態を避けるための対応策は二つ。

A案.フルスクリーンにはせず、IE6と同じ表示にする。
B案.フルスクリーン表示のための追加ソースを一般用に変更する。

A案.フルスクリーンにはせず、IE6と同じ表示にする

IE6はフルスクリーン表示ができないため、通常の方法で背景が指定されています。これをIE7以上のブラウザにも適応させます。フルスクリーンにはなりませんが、一番簡単な方法です。

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

ページ全体の背景の指定には、IE6用の表示のために要素の前にアンダーハックが付いています。
このアンダーハック（要素の前のアンダーライン赤色の部分）を削除します。

body {
_background-image : url("画像ファイルアドレス");
_background-position: center top;_background-color : #000;}

#index {
_background-image : url("画像ファイルアドレス");
_background-position: center top;_background-color : #000;}

#page{background-image :none;
_background-image : url("画像ファイルアドレス");
_background-position: left bottom!important;_background-color : #E6D3D9;}

#permanent{background-image :none;
_background-image : url("画像ファイルアドレス");
_background-position: center bottom!important;_background-color : #323377;
}

#category{background-image :none;
_background-image : url("画像ファイルアドレス");
_background-position: center bottom!important;_background-color : #323377;
}
#tag{background-image :none;
_background-image : url("画像ファイルアドレス");
_background-position: center bottom!important;_background-color : #323377;
}
#search{background-image :none;
_background-image : url("画像ファイルアドレス");
_background-position: center bottom!important;_background-color : #323377;
}
#date,#search{background-image : none;_background-image : url("画像ファイルアドレス");}

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

B案.フルスクリーン表示のための追加ソースを表紙なし一般用に変更する

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

フルスクリーン表示のための追加ソースではエリアタグが背景画像のタグを囲んでいます。このエリアタグや画像タグを変更、もしくは削除します。

<!--フルスクリーン表示のための追加ソースここから-->

<!--index_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/index_area-->

<!--page_area--><!--not_index_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/not_index_area--><!--/page_area-->

<!--category_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/category_area-->

<!--tag_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/tag_area-->

<!--edit_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/edit_area-->

<!--titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/titlelist_area-->

<!--not_edit_area--><!--not_page_area--><!--not_permanent_area--><!--not_category_area--><!--not_tag_area--><!--not_titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/not_titlelist_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_permanent_area--><!--/not_page_area--><!--/not_edit_area-->

<!--フルスクリーン表示のための追加ソースここまで-->

• 表紙のないテンプレートでは、<!--index_area-->～<!--/index_area-->で囲まれた部分(赤字の部分)を削除します。
  
  
• 通常ブログ画面の背景がフルスクリーン表示される場合<!--page_area--><!--not_index_area-->～<!--/not_index_area--><!--/page_area-->で囲まれた部分があります。
  表紙のないテンプレートでは、ブログトップページも通常ブログ画面と同じデザインレイアウトになるので、これからトップページ以外のエリアを示すタグ、
  <!--not_index_area-->と<!--/not_index_area-->を削除します。
  
  
• カテゴリエリアの背景がフルスクリーン表示される場合<!--category_area-->～<!--/category_area-->で囲まれた部分があります。
  表紙のないテンプレートでは、カテゴリエリアは通常ブログ画面と同じレイアウトになるので<!--category_area-->～<!--/category_area-->内の画像タグを<!--page_area-->～<!--/page_area-->内と同じ画像タグに変更します。
  
  ※通常ブログ画面がフルスクリーン表示されない場合は、
  <!--category_area-->～<!--/category_area-->で囲まれた部分を削除します。
  
  
• タグエリア(NovelList)の背景がフルスクリーン表示される場合<!--tag_area-->～<!--/tag_area-->で囲まれた部分があります。
  
  1. novel-PFタイプ・PF2タイプの表紙のないテンプレートでは、タグエリアは通常ブログ画面と同じレイアウトになるので、<!--tag_area-->～<!--/tag_area-->内の画像タグを<!--page_area-->～<!--/page_area-->内と同じ画像タグに変更します。
     
     ※通常ブログ画面がフルスクリーン表示されない場合は、
     <!--tag_area-->～<!--/tag_area-->で囲まれた部分を削除します。
     
     
  2. novel-PFタイプ・PF2タイプ以外の表紙のないテンプレートでは、タグエリアは検索エリアと同じレイアウトになります。
     検索エリアの背景がフルスクリーン表示される場合<!--search_area-->～<!--/search_area-->,もしくは　<!--not_edit_area--><!--not_page_area--><!--not_permanent_area--><!--not_category_area--><!--not_tag_area--><!--not_titlelist_area-->～<!--/not_titlelist_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_permanent_area--><!--/not_page_area--><!--/not_edit_area-->で囲まれた部分があるので<!--tag_area-->～<!--/tag_area-->内の画像タグを検索エリア内と同じ画像タグに変更します。
     
     もしくは、<!--tag_area-->～<!--/tag_area-->で囲まれた部分を全て削除し、
     <!--not_tag_area-->と<!--/not_tag_area-->のタグを削除します。
     
     ※検索エリアがフルスクリーン表示されない場合は、
     <!--tag_area-->～<!--/tag_area-->で囲まれた部分を削除します。

変更後　novel-PF・PF2タイプ

<!--フルスクリーン表示のための追加ソースここから-->

<!--page_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/page_area-->

<!--category_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/category_area-->

<!--tag_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/tag_area-->

<!--edit_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/edit_area-->

<!--titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/titlelist_area-->

<!--not_edit_area--><!--not_page_area--><!--not_permanent_area--><!--not_category_area--><!--not_tag_area--><!--not_titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/not_titlelist_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_permanent_area--><!--/not_page_area--><!--/not_edit_area-->

<!--フルスクリーン表示のための追加ソースここまで-->

変更後　novel-PF・PF2タイプ以外

<!--フルスクリーン表示のための追加ソースここから-->

<!--page_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/page_area-->

<!--category_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/category_area-->

<!--tag_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/tag_area-->

<!--edit_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/edit_area-->

<!--titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/titlelist_area-->

<!--not_edit_area--><!--not_page_area--><!--not_permanent_area--><!--not_category_area--><!--not_tag_area--><!--not_titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/not_titlelist_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_permanent_area--><!--/not_page_area--><!--/not_edit_area-->

<!--フルスクリーン表示のための追加ソースここまで-->

もしくは

<!--フルスクリーン表示のための追加ソースここから-->

<!--page_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/page_area-->

<!--category_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/category_area-->

<!--edit_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/edit_area-->

<!--titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/titlelist_area-->

<!--not_edit_area--><!--not_page_area--><!--not_permanent_area--><!--not_category_area--><!--not_titlelist_area--><img class="bg" src="画像ファイルアドレス" alt="" /><!--/not_titlelist_area--><!--/not_category_area--><!--/not_permanent_area--><!--/not_page_area--><!--/not_edit_area-->

<!--フルスクリーン表示のための追加ソースここまで-->

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

カスタマイズ

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

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

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

(1)メニューボタンのソース

表紙メニューボタン。表紙画面の右側あるいは左側に縦一列に並んでいます。

<!-- ▼▼▼ 表紙ページ・メニュー ▼▼▼ー-->
<!--index_area-->

<h2>M E N U</h2>
<!-- ▽▽ポップアップ用・メニューボタン▽▽-->
<!--▽JavaScript無効時は非表示▽-->

<!--カーソルをあてると右フレーム側にその説明がポップアップで表示-->

<!--▼「はじめに」「About」など,メニューの一番上に新たなリンクボタンを追加する場合は、
以下のリンクタグにアドレスをいれ、前後の行を削.除します。
リンクボタンを既存メニューの下に追加する場合は、☆印の箇所を探して説明をご覧ください。-->

<!--この行を削.除
<h3 class="side_menu" ><a href="記事のアドレス" onmouseover="myIn('step1')">
　はじめに</a></h3>
この行を削.除-->
<!--▲「はじめに」「About」など▲-->

<!--▽JavaScript無効時は非表示▽-->
<div id="JSOK" style="display:none;">
<!--▼ご案内▼-->
<h3 class="side_menu" ><a href="#" onmouseover="myIn('step0')"> 　ご案内</a></h3>
<!--▲ご案内▲-->

<!--▼掲載小説（カテゴリー）一覧と目次ページへのリンク▼-->
<h3 class="side_menu" ><a href="#" title="" onmouseover="myIn('step2')"> 　MAIN </a></h3>
<!--▲掲載小説（カテゴリー）一覧と目次ページへのリンク▲-->


～　中略　～

～　中略　～



<!--☆☆☆リンクや、BBSなど、新たなコンテンツへのリンクボタンをメニューに加える時は、
以下のタグにコンテンツ名とアドレスを記入して前後の行を削.除してください。
ポップアップで表示されるそのリンク先の説明文は、このままスクロールして
★印の箇所を探して、そこに記載します。-->

<!--この行を削.除
<h3 class="side_menu" ><a href="コンテンツ(1)のリンク先アドレス" title="" onmouseover="myIn('step10')" > 　☆『コンテンツ名(1)』 </a></h3>

<h3 class="side_menu" ><a href="コンテンツ(2)のリンク先アドレス" title="" onmouseover="myIn('step11')" > 　☆『コンテンツ名(2)』 </a></h3>
この行を削.除-->

<!--△△ポップアップ用・メニューボタンここまで△△-->

(2)ホップアップ表示のソース

上のメニューボタンと対になっているその説明内容。

<!-- ▼▼▼▼▼ 表紙メニューポップアップ表示コンテンツここから ▼▼▼▼▼ -->

<!--▼ご案内（サイト説明）▼-->
<div id="step0" class="popupcard">

<h3>　ご 案 内</h3>
<div class="popupin2 pop_free">
<!-- ▼ ▼フリースペース(2)▼▼ -->
<%introduction>
<!-- ▲ ▲フリースペース (2)▲▲-->
<br />
</div></div>
<!--▲ご案内（サイト説明）▲-->

<!--▼「はじめに」「About」など▼-->
<div id="step1" class="popupcard">
<div class="popupin2"><p class="pop3">はじめての方はこちらをご覧ください。</p>
</div></div>
<!--▲「はじめに」「About」など▲-->

<!-- ▼掲載小説（カテゴリー）一覧と目次ページへのリンク▼ -->
<div id="step2" class="popupcard">
<h3 class="delete">掲載小説一覧</h3>
<div class="popupin pop_free">
<marquee scrollamount="5" class="delete"><font size="2">作品タイトルをクリックすると、もくじへとびます。▼がついているタイトルは、複数の章で構成されている長篇作品やシリーズものですのでクリックすると最初はその一覧が表示されます。作品全体の目次をご覧になる場合は <b>【 総目次 】</b> をクリックしてください。 </font > 　</marquee>
<!--category-->
～　中略　～
<!--/category-->
</div></div>
<!--▲掲載小説（カテゴリー）一覧と目次ページへのリンク-->


～　中略　～

～　中略　～


<!--★★メニューボタンを追加した場合には、
以下の★印の箇所に、その追加したコンテンツの説明文を記載なさると、
ポップアップでその説明文が表示されます。
(1)・(2)だけでなく追加するコンテンツをもっと増やす場合には　作者ブログの解説をご参照ください。★-->

<div id="step10" class="popupcard">
<div class="popupin2"><p class="pop3">
　　★追加した『コンテンツ名(1)』 の説明を書き入れてください
</p></div></div>
<div id="step11" class="popupcard">
<div class="popupin2"><p class="pop3">
　　★追加した『コンテンツ名(2)』 の説明を書き入れてください。
</p></div></div>

<!--▲▲▲ 表紙メニューポップアップ表示コンテンツここまで ▲▲▲-->

メニューボタンのタイトル…ピンク色の部分
ポップアップで表示される内容…青い色の部分

【ご案内】でポップアップされる内容を変更する場合

初期設定の【ご案内】でポップアップされるのは、ブログ開設時に100文字以内で設定した公式？なあなたのブログの紹介説明<%introduction>になります。

表示される内容を変更する場合125文字以内であれば、管理画面から設定を変更するだけでＯＫです。テンプレートもカスタマイズしないでよいので一番簡単です。

菅理ページから［環境設定］⇒【環境設定の変更】を開いて、
［ブログの説明］の内容を変更してから
【更新】をクリック

変更する内容が125文字を超える場合は、上の(2)ポップアップ表示のソースから、<%introduction>を削除して新しい内容に差し替えます。
文字色の変更や装飾、絵文字などを使う場合は、別窓で、［新しく記事を書く］画面を開いて記事と同じ様にツールをつかって作成し、それをコピペして貼り替えるとよいでしょう。

メニューボタンの表示・ポップアップされる内容を変更する場合

ポップアップされる内容を変更したいメニューボタンのID名（step〇〇）を確認します。
ＨＴＭＬをスクロールして、(2)ポップアップ表示のソースの中から、その番号が指定されている箇所（id="step〇〇"）を探して変更します。
例えば、MAIN　は、step2ですから、ポップアップ表示を変更する場合は、以下のstep2　のソースを変更します。

<!--▼掲載小説（カテゴリー）一覧と目次ページへのリンク▼-->
<h3 class="side_menu" ><a href="#" title="" onmouseover="myIn('step2')"> 　MAIN </a></h3>
<!--▲掲載小説（カテゴリー）一覧と目次ページへのリンク▲-->

メニューボタンのタイトルは、MAINと表示されているピンク色の部分です。メニューボタンのタイトルを変更する場合はここを変更したいボタンタイトルに差し替えます。 メニューボタンタイトルの前のスペースはそのままに！（ボタンのリンク背景色設定のために、余白はpaddingではなくこのスペースで調整しています。余白を失くすとタイトル文字列が詰まって表示されます）

ポップアップされた窓に実際に表示されるのは青字の部分です。窓に表示される説明などを変更する場合は青字の部分を書き換えます。

<!-- ▼掲載小説（カテゴリー）一覧と目次ページへのリンク▼ -->
<div id="step2" class="popupcard">
<h3 class="delete">掲載小説一覧</h3>
<div class="popupin pop_free">
<marquee scrollamount="5" class="delete"><font size="2">作品タイトルをクリックすると、もくじへとびます。▼がついているタイトルは、複数の章で構成されている長篇作品やシリーズものですのでクリックすると最初はその一覧が表示されます。作品全体の目次をご覧になる場合は <b>【 総目次 】</b> をクリックしてください。 </font > 　</marquee>
<!--category-->
～　中略　～
<!--/category-->
</div></div>
<!--▲掲載小説（カテゴリー）一覧と目次ページへのリンク-->

表紙メニュー　冒頭に「はじめに」「About」を表示する

「はじめに」や「About」などのサイトの説明記事がある場合はそのページへのリンクボタンを追加できます。
初期設定時は非表示になっていますが、step1がそれに当たります。HTML内の説明の通り、前後のタグを削除して、赤地に白抜きの部分に記事のアドレスを入れてください。
記事にはリンクさせず、ポップアップ部分で説明を表示させたい場合はメニューボタンの記事のアドレスを　#　に変更し、ポップアップ表示のソース中のstep1　青字部分はじめての方はこちらをご覧くださいを変更します。

新しいコンテンツを表紙メニューに追加する場合

初期設定では非表示になっていますが、新しいコンテンツを表紙メニューに追加する場合に備えて、予備のメニューボタン、ならびにその説明がポップアップで表示されるソースがＨＴＭＬの中には予め記載されています。
初期設定時は非表示になっていますが、step10 step11　がそれに当たります。
ＨＴＭＬ中の説明に従って、それぞれ、ﾒﾆｭｰボタンのソースにはコンテンツ名、リンク先アドレス、ポップアップのソースには、表示させたい内容を記載して前後のタグを削除します。
予備のボタンで足りない場合は、step以下の通し番号だけを違えて、メニューボタン、ポップアップ表示の二箇所にそれぞれ追加してください。

カードが表示されるデザインで、カードの内容を変更する

verPF1207以降のバージョンのnovel-PF-Fall や　novel-PF-Block　など、表紙メインフレームにカードが表示されるデザインでは、最初からご案内として、<%introduction>サイト説明が表示されます。
これを他のテンプレートと同じ様に最初は何も表示させない、もしくは、【ご案内】以外のコンテンツを表示させる事ができます。

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

最初は何も表示させないスタイルに変更する場合は以下の部分を探して全て削除します。

/* ========================
ポップアップ表示関連(左寄せ)
=========================== */
#step0 {z-index:0; visibility:visible;}
.PF2 #step0{visibility:hidden;}

最初から表示される内容を【ご案内】から他のコンテンツに変更する場合は、ID名(#step0)を表示させたいコンテンツのIDに変更します。

#step1　 はじめに
#step2　 掲載小説一覧
#step3　 NovelList
#step4　 最近の更新
#step5　 月別の全更新履歴(Archives)
#step6　 AllTitlelist(カテゴリ別全記事一覧タイトルリスト)
#step7　 通常のブログ画面
#step8　 最近のコメン卜
#step9　 最近の卜ラックバック
#step10　追加した『コンテンツ名(1)』
#step11　追加した『コンテンツ名(2)』

（例）【ご案内】から変更して【最近の更新】を最初から表示させる場合は以下のようにID名を#step0から#step4に変更します。

#step4 {z-index:0; visibility:visible;}
.PF2 #step4{visibility:hidden;}

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

以下のカスタマイズをお試しになる場合は、必ず拙作テンプレのver1210以降のバージョンのテンプレートをご利用ください。ver1210以前のバージョンのテンプレートではレイアウトが崩れたり、スクロールに不具合が起きます。

カスタマイズの方法

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

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

HTMLのカスタマイズ　全タイプ共通

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

<head>
～中略～
</head>

<body <!--index_area-->onload="hidethem()"<!--/index_area--> id="～中略～">
///////////ここにソースを貼る//////////////

ボディタグの直下、上の赤字の部分に以下のエンターページのソースを追加します。
2013.2.25.エンターページのソースを改定しました。
フルスクリーン表示のソースがある場合もそれより上、とにかくこのエンターページのソースは必ずボディタグの直下に貼ります。

上は黒背景白文字になりますが、背景色を変更する場合はbackground-colorの、文字色を変更する場合はcolorの色コード（ピンク色の部分）を変更します。
ブログタイトルの下にはブログの説明文が表示されますが、これを注意書などに変更する場合は赤色の部分<%introduction>を削除して差し替えます。Enterをバナーや画像に変更する場合は青色の部分を画像タグに差し替えます。

<!--//////////Enterページココから//////////-->

<!--index_area-->
<!--▼ここより変更不可-->
<div style="position:relative;z-index:100;width:100%;height:100%;background-color:#000;color:#fff;text-align:center;margin:0;padding:0;">
<div style="margin:0 auto;padding:0;height:80%;overflow:hidden;">
<!--▲ここまで変更不可-->

<div style="margin:0 auto;padding:50px 0;font-size:xx-large;"><%blog_name></div>
<div style="max-width:600px;_width:600px;margin:40px;margin:0 auto;" />
<!-- ブログの説明 --><%introduction><!-- ブログの説明 -->
<br /><br />「Enterをクリックしてお入りください」<br /><br /></div>
<a href="#pagetop" rel="nofollow"><span style="font-size:xx-large;">Enter</span></a>


<!--▼ここより変更不可-->
</div><div style="min-height:10%;">Template by <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel テンプレート</a>　　<%ad> <%ad2><br /></div></div>
<!--▲ここまで変更不可-->
<!--/index_area-->

<!--//////////Enterページココまで//////////-->

　2013.2.26.タグをテーブルからブロックに変更し、高さ指定を追加しました。
　追加したエンター画像や画面サイズに左右されることなくフッター部の表示域(広告や著作権表示)を確保するために、変更不可の個所は背景色・文字色以外の追加変更禁止です。

これでエンターページを装着する事ができましたが、このままでは、他ページからHOMEへ戻る度に、Enterページが表示され、その度にEnterをクリックしなければ表紙ページを見ることができません。それはあまりに鬱陶しいので、他ページからHOMEへ戻る時にはEnterページを飛び越してダイレクトに表紙ページの上に着地するようにHOMEへのリンクタグにアンカーを追加します。

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

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

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

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

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

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

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

メモ帳のツールバーの、

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

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

　その窓の【検索する文字列】の欄に　href="<%url>"　　
【置き換えする文字列】に　href="<%url>#pagetop"　と入れて
【すべて置き換え】をクリック

置き換えが終わったら、

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

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

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

これでHOMEへのリンク先アドレスにアンカーが追加されました。HOMEをクリックしても、Enterページを飛び越してダイレクトに表紙ページが表示されるはずです。

スタイルシートのカスタマイズ

エンターページ画面ではスクロールが表示されず、表紙画面でのみスクロールが表示さるように指定します
［スタイルシート編集］部分をカスタマイズします。

以下のコードをスタイルシートに追加します。

novel-PF・PF2タイプの場合

#index {overflow : hidden ;}
#index .main_frm{height:100%; overflow:auto;}

novel-J・Jfタイプ・novel-G・Gfタイプの場合
novel-J・Jfタイプ・novel-G・Gfタイプの場合はスタイルシートのカスタマイズが不要な場合があります。HTMLのカスタマイズを終えた時点で、【プレビュー】をクリックし、その時、エンターページ画面にスクロールが表示されていない場合はそのままでOK、カスタマイズは不要です。スクロールが表示される場合は以下を追加。

#index {overflow : hidden ;}
#index .all{ height:100%; overflow:auto;}

上以外のタイプのテンプレートの場合

#index {overflow : hidden ;}
#index .main{ height:100%; overflow:auto;}

【 更新 】 をクリック

カスタマイズ

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

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

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

<head>～</head>内

<meta name="robots" content="NOINDEX,NOFOLLOW" />
<title><!--index_area--><%blog_name>:<%author_name><!--/index_area--><!--not_index_area-->◆<!--/not_index_area--></title>

上の個所を以下に変更

<title><%blog_name><!--not_date_area--><!--not_index_area--><!--not_titlelist_area--><!--not_edit_area-->：<%sub_title><!--/not_edit_area--><!--/not_titlelist_area--><!--/not_index_area--><!--/not_date_area--><!--edit_area-->：コメントの編集<!--/edit_area--><!--titlelist_area-->：全記事一覧<!--/titlelist_area--><!--date_area-->：<%now_year>年<%now_month>月<!--/date_area--></title>

<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />

【 更新 】 をクリック

とりあえず、作品名検索に限れば、これでOKだと思います。２～３週間すれば、作品名で検索してもパソコンサイトがヒットするようになると思いますが、万一、２～３週間後も、作品名でパソコンサイトがヒットしないままであれば、以下をお試しください。

<body>～</body>内のリンクタグからrel="nofollow"を削除する

novel-C-EnterのHTML内にrel="nofollow"は98個所あります。一つ一つ探して削除するのは大変なので、メモ帳へコピペして一気に削除します。

最初にパソコンのメモ帳を開いておきます。

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

メモ帳が表示されたらそのままにして、ブラウザのブログ画面を操作します。

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

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

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

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

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

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

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

メモ帳のツールバーの、

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

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

　その窓の【検索する文字列】の欄に　rel="nofollow"　　
【置き換えする文字列】は空欄のままして
【すべて置き換え】をクリック

置き換えが終わったら、

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

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

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

これでHTML内のrel="nofollow"は全て削除されたはずです。

【 更新 】 をクリック

SEO対策　（おまけ）

アフィリエイトや情報ブログではなく小説サイトなら上で十分だと思いますが、SEO(検索エンジン最適化)対策をもう少し頑張りたい場合は、<head>～</head>内の赤色の部分
<meta name="robots" content="NOINDEX,NOFOLLOW" />
を以下に変更すれば、多少は効果アリだと思います。

<meta name="ROBOTS" content="ALL" />
<meta name="DESCRIPTION" content="<%introduction>" />
<meta name="keywords" content="オンライン小説,ブログ小説,無料で読めるWeb小説,連載小説,Novel" />

ピンク色の部分はブログの説明、オレンジ色の部分はブログの特徴・セールスポイントをカンマ, で区切って記載します。必用であれば、自サイトに相応しいと思う内容に変更してください。
但し、ここは検索ロボットにアピールする箇所ですから、凝った言い回しや抽象的な表現は避け、端的でわかりやすい文字列を用います。

尚、SEO対策に関する管理人へのご質問等はご遠慮ください。
SEO対策の詳細は、専門サイト様の記事などをご参照ください。
こちら様などわかりやすいのでおススメです⇒猿でも出来るSEO対策