小説本文(個別記事）ページ

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

「関連エントリーメーカー」で
小説本文（個別記事）ページの末尾に
新着順目次（同一カテゴリ一覧リスト）を表示させる

前ページで述べましたように、このカスタマイズは、【Harmonia!!】 の管理人 ちよろ さま考案の「関連エントリーメーカー」のスクリプトを丸ごとお借りしております。以下の記事を参考にさせていただきました。

FC2ブログで関連エントリーを表示させるスクリプト

ちよろ様、ありがとうございました！＜m(__)m＞

ちよろ様のお許しを頂戴致しましたので、公開中のＮｏｖｅｌテンプレートにも、「関連エントリーメーカー」を順次装着し、リニューアルしてゆきます。2009.5.1.以降に登録、更新したテンプレートに関しては「関連エントリーメーカー」を装着済みでありますので、以下のカスタマイズは必要ありません。

　2009.912.現在　関連エントリーメーカーは以前の新着順から昇順（時系列の旧い記事が上にくる）に改訂いたしました。昇順のカスタマイズについては コチラ

カスタマイズの方法

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

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

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

スクロールしていくと下のように書かれた部分があるはずです。

<!--more-->
<%topentry_more>
<!--/more-->
</div>

<!--▼ページナビゲーション▼-->
<!--permanent_area--><ul class="entry_navi">
<li><!--nextentry--><a href="<%nextentry_url>" title="【<%nextentry_title>】へ"><i>Back</i></a><!--/nextentry--> </li>
<li>  <a href="<%topentry_category_link>" title="【<%topentry_category>】もくじへ"><i>Index</i></a></li>
<li> <!--preventry-->  <a href="<%preventry_url>" title="【<%preventry_title>】へ"><i>Next</i></a><!--/preventry--></li>
</ul><!--/permanent_area-->
<!--▲ページナビゲーション▲-->

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

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

<%topentry_more>の前後に、改行<br />や、段落のタグ<p></p>があるテンプレートもありますが、それはこの際、気にせずに、<%topentry_more>とページナビゲーション・ランキングバナーの設置位置（①もしくは番号なし）がある箇所を探してください。

ページナビゲーションの上に以下のスクリプトを追加します。

<!--permanent_area-->

<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以上で同一カテゴリ内の新着エントリー順に表示します。

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){
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>' + cate_entrys[i][1] + '</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 = '<h5>▼ 　～ INDEX ～　「 <%topentry_category> 」　～　新着順　～　</h5><ol>' + output_fc2_entry + '</ol>'
k_k_k += '<div align="right"><a href="http://lastoneofthezodiac.blog38.fc2.com/blog-entry-4493.html">関連エントリーメーカー for FC2 Blog</a></div>'
// 著作権表示部分を消す場合は上の一行と、この行を削除
document.getElementById('kanrendesu').innerHTML = k_k_k
}

get_fc2_cate_rss('<%url>?xml&category=<%topentry_category_no>')

// -->
</script><noscript><a href="http://lastoneofthezodiac.blog38.fc2.com/blog-entry-4493.html">関連エントリーメーカー for FC2 Blog</a></noscript>
<div id="kanrendesu">
</div>

</div>
<!--/permanent_area-->

新着順がわかりやすいように上のスクリプトではリストに通し番号がついていますが、通し番号のついていないリストにする場合には、赤字の部分 ol　を　ul　に変更してください。

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

これでOKですが、このままですと、記事本文とも、また、高速配信を導入されている場合には広告とも区別がつきにくいのでスタイルシートを編集して、見せ方を変えましょう。

カスタマイズの方法は次ページで こちら

記事タイトルを通し番号でつけている場合のカスタマイズは こちら

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

新着順目次（同一カテゴリ一覧リスト）のカスタマイズ

前ページの「関連エントリーメーカー」装着のカスタマイズで、小説本文（個別記事）ﾍﾟｰｼﾞの末尾にはその小説の新着順の目次（同一カテゴリ一覧リスト）が表示されるようになったと思いますが、そのままですと、記事本文や広告との見分けがつきにくいので、その見せ方を変えるカスタマイズをご紹介します。

カスタマイズの方法

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

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

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

スタイルシートのどこでもよいので、以下のように、関連エントリーメーカーの表示を指定する内容を追加します。下は [ 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;
}

/* 一覧から訪問済みのﾍﾟｰｼﾞタイトルの色を変える場合 下は青#0000FFに変える例*/

.cat-navi a:visited { color : #0000FF; text-decoration : none;}

background-image は、背景画像の指定です。赤字の部分に背景画像のアドレスを入れます。

background-image : url("背景画像のアドレス");

.cat-navi a:visited は、 一覧から訪問済みのﾍﾟｰｼﾞのタイトルの色を変える指定です。
上の例は青#0000FFですが、必要であればテンプレートにあわせてカラコード#●●●●●●を変更してください。

.cat-navi a:visited { color : #●●●●●●; text-decoration : none;}

.cat-navi h5が　この記事の末尾で、▼～INDEX～「小説タイトル」～新着順　と帯状に表示されている、見出し部分の設定になります。主にこの部分を、それぞれのテンプレートにあわせて変更します。他の部分はまるごとコピペしてください。［テンプレートの名前］をクリックするとそれぞれのカスタマイズしたサンプルがご覧になれます。

［novel-template］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 2px 10px 2px 10px ;
font-size : 110%;
color: #ffffff;
background-color : black;
border-top : 1px solid #fff;
border-left : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-32.fc2.com/n/o/v/noveltemplate/bsb35-2.jpg");

}

［nove-template-rose1］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
color : #663333;
background-color : #ffffff;
border : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/eiji742.jpg");
background-repeat : no-repeat ;
background-position : right center;
}

［novel-template-rose2］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
color : #663333;
background-color : #ffffff;
border : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/hana1413.jpg");
background-position : right bottom;
}

文字が見え辛い場合は前ページのスクリプトに赤字のタグを追加して文字の背景だけを白くします。

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

var k_k_k = '<h5><font style="background-color:#ffffff;">▼ 　～ INDEX ～　「 <%topentry_category> 」　～　新着順　～　</font></h5><ol>' + output_fc2_entry + '</ol>'
k_k_k += '<div align="left"></div>'
document.getElementById('kanrendesu').innerHTML = k_k_k
}

［novel-template-rose3］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
border : 1px solid #C2A858 ;
font-weight : bold ;
color : #900000;
font-weight : bold;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/hana31223.jpg");
background-position : right bottom;
}

［novel-template-green］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
color : #663333;
background-color : #ffffff;
border : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/midori68w.jpg");
background-position : right center;
}

［novel-10-mono1］［novel-10-mono2］

.cat-navi h5 {
margin : 0px 0px 10px 0px;
padding : 2px 10px ;
font-size : 110%;
color : #fff;
background-color : #000;
border-left : 4px double #ffffff;
border-bottom : 4px double #ffffff;
font-weight : bold ;

}

novel-10-blackシリーズは、前述の例ではなく下記の内容を追加します。
[novel-10-black1]

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

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 50px 10px 0px 10px ;
font-size : 110%;
color : #fff;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/one03-11612.jpg");
background-repeat : no-repeat ;
background-position : center top;
text-align : center;
}

.cat-navi ol {
margin : 0px;
padding : 5px 0px 10px 150px;
}

[novel-10-black2]

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

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 70px 10px 0px 10px ;
font-size : 110%;
color : #fff;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/2-1.gif");
background-repeat : no-repeat ;
background-position : center top;
text-align : center;
}

.cat-navi ol {
margin : 0px;
padding : 5px 0px 10px 125px;
}

black2はさらに、［HTML編集］部分をカスタマイズします。
ＨＴＭＬの下の箇所を探して、赤字で記されたイメージタグを追加します。

～前ページで追加した関連エントリーメーカーのスクリプト～
<!--▼ページナビゲーション▼-->
<ul class="entry_navi">
～中略～
</ul>
<!--▲ページナビゲーション▲-->

<p align="center"><img src="http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/3-2.gif" alt="" border="0" width="230" height="45" /></p>

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

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

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

marginとpadding は余白の設定、それぞれ上右下左の余白を指定しており、文字の大きさはfont-size行間はline-height、文字の色はcolor、文字の太さont-weight、枠線はborderです。
詳しくは、ハウツー系サイトさまなどをご参考に。尚、上以外のデザインに変更なさる場合のご質問はご遠慮ください。

記事タイトルが通し番号の場合のカスタマイズは次のページでご説明します。

記事タイトルが通し番号の場合のカスタマイズ

関連エントリーメーカーの同一カテゴリ一覧は縦並びのリストで表示されます。記事タイトルが通し番号の場合は、数字だけが縦一列に並ぶことになり、少々見栄えが悪いのでそれを数字が横にならぶリストに変更します。こういう風になります こちら

　カスタマイズの難易度０…カスタマイズ不要・管理画面で設定変更するだけでＯＫ

ＦＣ２ブログでは、ブログをパス制にして、パスワードを知る人しか閲覧できないようにすることもできます。
（プライベートモード～詳しくは コチラ）　

そこまでしなくとも、特定の記事だけにパスをかけることもできます。記事にパスをかけると、目次にも、　更新一覧にも記事タイトルは表示されますが、その記事を閲覧する際には、パスを記入しなければページが開けない状態になります。

全くのシークレット設定(プライベートモード)にしなくとも、閲覧に必要なパスを確認画面で表示する設定にしておけば、閲覧の際の意志や年齢確認の手段としてワンクッションおくことができます。

　カスタマイズの難易度３

おススメカスタマイズ！

いつもお世話になっているＦＣ２ブログのテンプレート工房さまですが、小説ｻｲﾄを運営なさっている皆様にとっては実に有用なカスタマイズ記事をアップしてくださいましたのでご紹介させていただきます。

記事の中にメールフォームを作る

ブログでメールフォームを設定する場合、プラグインに追加するだけでＯＫですので、とても簡単ですが、メールフォームが表示されるのは当然のことながら、サイドメニューのプラグインスペースになってしまいます。それをサイドメニューではなく、記事中に設定できるとなれば、サイトナビゲーションや表紙メニューにﾒｰﾙフォームのある記事へのリンクﾎﾞﾀﾝを追加することもできますし、マイブログをよりＨＰっぽく仕上げることができますのでおススメであります。

但しこのメールフォームはメール送信後、自動的に通常ブログ画面が開き、ページは変更できません。

諸般の事情から拙宅ではメールフォームを設置しておりませんが、ご興味のある方はぜひ、トライしてみてくださいませ。

　カスタマイズの難易度３

新作テンプレートについての先日の記事でお知らせしましたが、
関連エントリーメーカー（個別記事の末尾に表示されている同一カテゴリ一覧―新着順もくじのことです）のご考案者、
「Harmonia!!」のちよろ様が、
昇順のスクリプトをご考案くださいました。

FC2ブログで関連エントリーを表示させるスクリプト

ちよろ様、ありがとうございました！＜m(__)m＞

これにともない、現在公開中のテンプレートを全て、昇順に改定させていただきました。
以下は、すでにご利用中のお手元のテンプレートを、昇順に変更なさる場合のカスタマイズです。

　カスタマイズの難易度１

今まで、novel-Sタイプやnovel-Rタイプなどは、共有テンプレートとして公開されているものとは別に、個別記事ページのレイアウトだけを変更したテンプレート（コンパクト版など）をサイト内配布しておりました。

ＨＰ風サイトへの擬態を究極の目的としている以上、新たに有用な方法をみつければ、その度に追加変更してまいりますので、当然、改訂の回数も多くなります。新しい機能は、家電の新製品と同じで、ある程度使ってみないとわからない、気づかない不具合も多く、その不具合を解消するべくまた新たな改訂が必要となります。

上述したとおり、改訂が多いNovelテンプレートでありますが、その作業は最新の共有テンプレートを優先させるため、サイト内配布テンプレートのメンテナンスはどうしても後回しになり、滞りがちでありました。

今回、タイプ別にテンプレートのHTMLを統一したのを機に、サイト内配布を終了し、公開中の共有テンプレートのスタイルシートに直接、レイアウトを変更できる内容を追加致しました。

カスタマイズはいたって簡単、スタイルシートの中から不要な二行を削除するだけです。

　カスタマイズの難易度２

Novelテンプレートでは、衣替え以外の背景画像の変更は原則不可ですが、背景色の変更に関しては制約はありません。ご自由にどうぞ。
但し、デザイン変更にあたりますのでサポートはできません。
背景色を変更なさる場合は以下を参考に、ご自力でのカスタマイズをお願い致します。
ご質問など、ご遠慮ください。

2012.8.11.改訂

　カスタマイズの難易度１

ver1203以前の旧バージョンのテンプレートを御利用の場合

FC2ブログ仕様変更により、ver1203以前の旧バージョンのテンプレートに不具合が起きており、再DLもしくは修正が必要です。再DLではなく旧バージョンのテンプレートのHTMLを変更してご利用の場合は、一旦の同じテンプレートをDLしていただき、スタイルシートの冒頭文字の設定(C)～(D)(E)～(F)(G)～(H)を改訂された新バージョンの内容に差し替えてご利用ください。
修正個所・方法について詳しくは　コチラ

Novelテンプレート全てではありませんが、一部のテンプレートでは、個別記事ページと通常ブログ画面の、記事本文と追記の最初の文字が、以下のように大きく、画像に装飾されて表示されます。(first-letterの設定）

novel-R-Angel個別記事ページ


novel-R-Angel通常ブログ画面



背景に表示される画像の位置は、初期設定の表示に合わせて微調整してあります。DL後にスタイルートをカスタマイズして文字サイズや行間・文字間隔の設定を変更するとバランスが崩れ、表示が乱れる事があります。また、記事冒頭に余白を入れてしまうと、左側が大きくあき、テンプレートによっては、firefoxで閲覧時に、小さい四角が表示されてしまうのでご注意ください。

　注意！

この場合、記事の編集画面で　文字装飾ツールをつかって文字の大きさや色を変更する時は必ず、2番目の文字からにしてください。

　文字装飾が不要なページ

この１文字目の装飾が不要なページ(記事)は、記事本文や追記の冒頭に　改行　をいれて投稿すると、大きさも変わらず、背景画像もなく、普通に表示されます。
但し、自動改行は、編集画面を開くたびに詰まってしまいますので、改行を入れる場合は、
<br />と手打ちしてください。

全てのページ(記事)で１文字目の装飾が不要であり、投稿の度に改行を入れるのがご面倒であれば、スタイルシートから　first-letter　の設定箇所を削除してください。

カスタマイズの難易度５

今回の改訂で、特定の個別記事ページの背景変更が以前より簡単になりました。HTML部分には予め、必要なカスタマイズを施してありますから、あとは、スタイルシートに変更後の背景を設定を追加するだけです。例をご参考に、お好みのスタイルに指定した上で追加してください。

209.7.1.現在、novel-10タイプ・novel-Wタイプ以外のテンプレートは、背景画像の変更のためのタグが実装して改訂済みです。但し、表紙なしの一般ブログテンプレートはこのカスタマイズの需要があると思えませんので、現在も今後も実装予定はありません。

スタイルシートの具体的な記述方法や、その内容についての説明は省きますが、背景画像・背景色・文字色・リンク色などは、カスタマイズの基本ですから、ハウツー系サイト様など簡単に調べられます。
ご不明な部分はご自力で御調べいただき、ご質問等ご容赦ください。

　注意

2010.8.5.Novelテンプレートの利用規約を改定し、衣替え以外の背景画像の変更は原則不可とさせていただきました。以下にご紹介したカスタマイズで、画像を変更してご利用の場合は、管理人の課した条件を満たすことが必要です。
詳しくは　背景画像を変更してのご利用をご希望の場合　

　カスタマイズの難易度０…カスタマイズ不要・管理画面で設定変更するだけでＯＫ

FC2ブログに新しい機能として関連記事リストが追加されましたが、Novelテンプレートでは以前より、「Harmonia!!」ちよろ様ご考案の関連エントリーを導入しています。記事の末尾に、関連記事を複数リスト表示するという役目は関連エントリーが十分に果たしてくれていますので、Novelテンプレートでは関連リストを、個別記事ページの同作品（同一カテゴリ）前話・次話へのページナビゲーションとして表示させます。

こういう風に表示されます。

実際に表示されているページはこちら　PFタイプ　スタンダードタイプ　Rタイプ　Sタイプ

但し、そのためには、関連リストをページナビゲーションに表示させた仕様に改訂したテンプレートを再ＤＬする必要がありますが、2010.9.4.現在、改訂が済んでいるにも関わらず、一部の共有テンプレートの更新（改訂）が反映されない状態が続いています。テンプレート一覧で、最終更新日が、本日以前の日付で表示されているNovelテンプレートは、以下の設定をしても、関連リストはページナビゲーションとして表示されません。

改訂されていないテンプレートの場合このように表示されます




このままでも、前後ページにリンクできますが、ページナビゲーションとしては体裁が悪く小説の読者にとってはわかりやすいとはいえませんので、

最終更新日が、2010/09/04以降の日付の
Novelテンプレートを、再ＤＬしてご利用ください。

（2010.9.4.novel-10タイプ・novel-Wタイプのテンプレートは未改訂のため公開を一時中止しておりますが、改訂が済み次第公開します。）

　注意

DL済みのテンプレート一覧に同じ名前のテンプレートがあると再DLすることはできませんので、最初にDLしたテンプレートを一旦削除するか、名前を変更してください。
テンプレートの名前の変更方法は　コチラ

　「常に単独の作品しか連載しないし、連載の合間には雑記的な記事も書かない！」という方は、改訂以前のテンプレートのまま、この設定はしない方が多分見やすいです。

　2010.8.5.Novelテンプレート利用規約を改訂し、今後、画像の無断変更を禁止させていただきました。
規約改訂以前に画像を変更してご利用の方も、規約改訂後にデザイン変更、もしくはテンプレートを再ＤＬして改訂なさる場合は、管理人の課した条件を満たした上でご連絡をお願い申し上げます。詳しくはコチラ

　カスタマイズの難易度２

新作テンプレートや改訂版のテンプレートの目次ページと小説ページでは、「関連もくじ一覧」として、同じ親カテゴリに属する全てのカテゴリの目次へのリンクが表示されます。


ＤＬ時、この関連もくじは縦並びですが、小説ページに関しては、
全ページ、あるいは特定の（カテゴリ）だけ、以下のように横並びに変更して表示することができます。

関連(カテゴリ)もくじ一覧が表示

改訂版のテンプレートでは、親子カテゴリ設定している場合、そのカテゴリの目次ページと小説ページでは、「関連もくじ一覧」として、同じ親カテゴリに属する全てのカテゴリの目次へのリンクが表示されます。
開いているページのカテゴリは、わかりやすいように色を変えて（下の場合は赤字）表示されます。



　　もくじページに表示される関連目次





　　小説(個別記事)ページに表示される関連目次

　　　

表示されるのは、親子カテゴリを設定している場合だけです。
親子カテゴリ設定をしていない単独カテゴリのページでは、今まで通り、その小説の目次へのリンクだけが表示されます。また、親子カテゴリ設定をしていても、実際に公開中の記事のない場合はここには表示されません。

親子カテゴリ設定をしていない方はぴんとこないと思いますが、長編作品を親子カテゴリ設定で章分けして掲載なさっているサイト様の場合、閲覧者にとっては便利になると思います。
連載の更新の度に、読みに訪れてくれる読者はともかく、初回訪問者が、章に分けられている長編作品を続けて読む場合、今までは一旦、総目次に戻らなければ、次の章に進めませんでしたが、これでその手間が省けます。

特にJavaScript無効時、親カテゴリの総目次はカテゴリ別に表示されませんが、この関連もくじ一覧は、JavaScript無効時も同様に表示されます。但し、スタイルシートが無効な閲覧環境ではとんでもない表示になります
（国内ではそういうｗｅｂ環境もままないと思いますが、…(^^ゞ）

記事タイトルを連番で付けている場合など、小説ページの関連もくじを横並びに表示させることもできます。
詳しくは　小説ページの関連もくじ一覧の表示を横並びにする

　カスタマイズの難易度４

改訂前のnovel-PF.novel-PF2以外のスタイルシートには個別記事ページのデザインを変更できる二種類のスタイルが組み込まれておりました。改訂版も、スタイルシート内の(A)(B)二行を削除する事で、ダウンロード時のスタイルとは別のスタイル、レイアウトで表示できるのは同じです。
個別記事の表示をコンパクト版・ワイド版に変更する

違うのは、コンパクト版かワイド版、変更はできても、どちらか一方のスタイルでしか選択できなかった改訂以前と違って、改訂版は、一つのテンプレート内で、カテゴリ、もしくは記事によって、二種類のスタイルでの表示が可能になった事です。
ダウンロード時、改訂版のテンプレートでは、カテゴリ番号0のカテゴリ(初期設定では未分類)と、それ以外のカテゴリとは別のスタイルで表示されます。

実際の表示例　novel-R-Sepiaの場合　
未分類カテゴリの記事ページ　　　未分類以外のカテゴリの記事ページ

カテゴリ0以外の記事ページのスタイルを別表示にする場合はカスタマイズが必要です。

カテゴリ番号の確認

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

　カスタマイズの難易度３

注意

2011.9.7.以前にDLしたテンプレートではこのカスタマイズが正しく反映されません。大変申し訳ありませんが、このカスタマイズをお試しになる場合は、HTMLのバージョンナンバーが、ver1110　もしくはverPF1105　以降の最新版を再DLしてご利用ください。

改訂版のテンプレートの個別記事ページでは、作品(カテゴリ)ごとに違う定型文やランキングバナーを表示させることができます。
このカスタマイズは目次ページではなく、小説本文ページにカテゴリごとに違うバナーを表示させるカスタマイズのご紹介です。
目次ページに作品ごとに違うバナーを表示させる場合は　　コチラ
通常ブログ画面で作品ごとに違うバナーを表示させる場合は　　コチラ


個々の作品別にジャンルの違うランキングに参加する場合に便利なカスタマイズですが、表示されるのは、FC2ブログ拍手タグや前話次話へのページナビゲーションの後になります。記事本文と拍手タグ等の間に割り込んで表示させることはできません。記事本文の直下に表示したい場合は、従来通り、記事の編集画面の末尾にタグを追加してください。

カテゴリの番号の確認

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

　カスタマイズの難易度０…記事上にリンクボタンを追加するだけ
　カスタマイズの難易度２…他の表示と整合性を持たせる場合

改訂以前のテンプレートでは、小説(同一カテゴリ)の前話、次話へのページリンクは、記事下にのみ表示されました。改訂版のテンプレートでは、関連リストの設定を変更するだけで、本文の上にも、目次ページ、前話ページ、次話ページへのリンクボタンを横並びで表示させることができます

関連記事リストの設定を変更

菅理画面を開いてください。

左側のメニューから ［ 環 境 設 定 ］ ⇒ 【 環境設定の変更 】 をクリック
開いた画面の一番上 ［ 環 境 設 定 ］　⇒【ブログの設定 】 ⇒ 【 記事の設定　】 をクリック

開いた画面の　［ 記事の設定 ］の［ 関連記事リスト 表示方法 ］を

関連記事リスト 表示場所 リストを 【個別ページの記事下 】 から　【上記全て 】に変更 して
【 更新 】をクリック　

但し、この設定にすると、右がわの時系列順のページナビと、同じリンク先を示している場合でも矢印の向きが反対になってしまいます。
また、一般的に、左矢印がもどる、右矢印が進むとされていますが、このままでは、左矢印がすすむ、つまり次話ページのリンク、右矢印がもどる、つまり前話ページへのリンクボタンが表示され、それも不自然です。
それを避けるためには、記事の表示順序を変更する必用があります。

同じカテゴリ中の 【前後の記事を古い順に 】 表示する

この設定変更で、記事上のページナビは、左矢印が前話ページへのリンク、右矢印が次話ページへのリンクを示し、時系列順のページナビの矢印とも整合するようになります。
しかし、そうなると、今度は、記事下の前話、次話のページナビにNext Backとリンク先が反対になるという不具合が生じますので、これは、テンプレートをカスタマイズすることで調整します。

　カスタマイズの難易度２

Novelテンプレートでは、五つの基本設定の通りに関連記事リストを設定すると、個別記事の下に前話・次話へのページナビが以下のように表示されます。


この時、関連記事リスト 表示場所 リストを【個別ページの記事下】ではなく 【上記すべて 】 に表示する　に設定すると記事下だけではなく記事上にも小説前話、次話、目次へのリンクボタンを表示できます


また、カスタマイズ次第で、記事下のページナビゲーションの表示を変更して、記事上と同じスタイルで表示させることもできます。

以下は、記事下のページナビゲーションの表示を変更して、記事上と記事下に同じスタイルで前話・作品目次・次話へのリンクボタンを横並びで表示させるカスタマイズです。

設定変更とカスタマイズ

関連リストの設定変更

最初に関連リストの設定を変更します。
菅理画面を開いてください。

左側のメニューから ［ 環 境 設 定 ］ ⇒ 【 環境設定の変更 】 をクリック
開いた画面の一番上 ［ 環 境 設 定 ］　⇒【ブログの設定 】 ⇒ 【 記事の設定　】 をクリック

開いた画面の　［ 記事の設定 ］の［ 関連記事リスト 表示方法 ］を

関連記事リスト 表示場所 リストを 【テンプレート変数のみ 】 に表示する
同じカテゴリ中の 【前後の記事を古い順に 】 表示する
に変更した上で
【 更新 】をクリック　

但しこれは、記事(ページ別)の表示順　を　新しい順　にしている場合（通常ブログ画面の冒頭に最新記事が表示）の設定です。（「はじめに」など一番古い記事を通常ブログ画面の冒頭に表示させるため）　記事(ページ別)の表示順　　を　古い順　にしている場合は、

同じカテゴリ中の 【前後の記事を新しい順に 】 表示する　に設定してください。

アカマイ広告を非表示にする

この方法は、テンプレート変数のみで関連記事リストを表示させるため、アカマイ広告を表示する設定にしている場合(初期設定では表示)、記事下のページナビゲーションは、広告の下に表示されてしまいます。
それを避けるためには、アカマイ広告を非表示のに変更しておきましょう。

アカマイ広告を非表示にする設定は、関連リストの設定と同じページの下の方にあります。

画像高速表示の設定　【利用しない】
【更新】をクリック

但し、設定変更が反映されるまで一週間ほどかかりますので、その間広告は表示され続けます。

　カスタマイズの難易度２
Novelテンプレートの個別記事ページではコメント・トラックバックを受け付けない設定にすると、コメント・トラックバック自体の表示は消えますが、コメント欄のページナビゲーションとサイトナビゲーションは残るため、記事欄の下部に、サイトナビゲーションやページナビゲーションが重複して表示されてしまいます。

ヘッダー

サイトナビゲーション①

ページナビゲーション 記事本文 ページナビゲーション

サイトナビゲーション②

ページナビゲーション （サイトナビゲーション③）

サイトナビゲーション④

フッター

その問題を改善するため、改訂版では、<head> ～</head>内の一か所をカスタマイズするだけでコメントトラックバック関連の表示全てを非表示にできるようになっています。
詳しくは【改定版　簡単カスタマイズ】コメント・トラックバックが不要な場合

しかし、これは、全ての記事ページのコメント・トラックバック欄を一括して非表示にするカスタマイズですので、カテゴリによって、あるいは記事によって、コメントやトラックバックを受付ていたり、受け付けていなかったり、その設定がまちまちなブログの場合はこの方法はつかえません。

以下は、ほとんどの記事でコメント・トラックバックを受け付けているが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けていない場合のカスタマイズです。
一括で非表示にするのではなく、コメント・トラックバックを受け付けていない、特定のカテゴリ、もしくは特定の記事ページのみ、コメント・トラックバック欄の残骸を非表示にします。

それとは反対に、ほとんどの記事でコメント・トラックバックを受け付けていないが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けている場合のカスタマイズはコチラ

　注意

このカスタマイズは表紙や記事ページのコメントトラックバック関連のソースに変更を施した改訂済みのテンプレートのみ成立するカスタマイズです。改訂以前のテンプレートに、以下の<head> ～</head>部分のソースを追加するだけでは、カスタマイズは反映されませんのでご注意ください。

　カスタマイズの難易度２
Novelテンプレートの個別記事ページではコメント・トラックバックを受け付けない設定にすると、コメント・トラックバック自体の表示は消えますが、コメント欄のページナビゲーションとサイトナビゲーションは残るため、記事欄の下部に、サイトナビゲーションやページナビゲーションが重複して表示されてしまいます。

ヘッダー

サイトナビゲーション①

ページナビゲーション 記事本文 ページナビゲーション

サイトナビゲーション②

ページナビゲーション （サイトナビゲーション③）

サイトナビゲーション④

フッター

その問題を改善するため、改訂版では、<head> ～</head>内の一か所をカスタマイズするだけでコメントトラックバック関連の表示全てを非表示にできるようになっています。
詳しくは【改定版　簡単カスタマイズ】コメント・トラックバックが不要な場合

しかし、それは、全ての記事ページのコメント・トラックバック欄を一括して非表示にするカスタマイズですので、カテゴリによって、あるいは記事によって、コメントやトラックバックを受付ていたり、受け付けていなかったり、その設定がまちまちなブログの場合、この方法はつかえません。

この記事でご紹介するのは、ほとんどの記事でコメント・トラックバックを受け付けていないが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けている場合のカスタマイズです。
一旦全てのページのコメント・トラックバック欄を非表示にした上で、特定のカテゴリ、もしくは特定の記事ページでのみ、コメント・トラックバック欄が表示されるようにカスタマイズします。

それとは反対に、ほとんどの記事でコメント・トラックバックを受け付けているが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けていない場合のカスタマイズはコチラ

　注意

このカスタマイズは表紙や記事ページのコメントトラックバック関連のソースに変更を施した改訂済みのテンプレートのみ成立するカスタマイズです。改訂以前のテンプレートに、以下の<head> ～</head>部分のソースを追加するだけでは、カスタマイズは反映されませんのでご注意ください。

　カスタマイズの難易度１

記事の編集画面で、ルビを付ける漢字(赤色の部分)とふりがな(青色の部分)とカッコ()を以下のようにルビタグで囲みます。

<ruby><rb>亜米利加</rb><rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby>

亜米利加（アメリカ）
ルビをつけた漢字と前後の語句の間は改行を入れずに続けて記載します。

<ruby><rb>亜米利加</rb><rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby>合衆国の首都は<ruby><rb>華盛頓</rb><rp>（</rp><rt>ワシントン</rt><rp>）</rp></ruby>だ。

亜米利加（アメリカ）合衆国の首都は華盛頓（ワシントン）だ。
一連のルビタグは正しく間違いがないように記載します。対のタグが欠けるとルビを付けた漢字の直後に改行が入ったり、あるいは改行するべき個所で改行されなかったりなどの不具合がでてくるので注意します。

行間を広くとっているテンプレートやフォントをメイリオで指定しているテンプレートなどの場合、ルビを振ると、ルビと漢字との間が広く開いてしまいます。不自然な場合は、ルビをつけた漢字だけline-height:100%を指定すると漢字のすぐ上にルビを表示できます。

ルビタグの前後を<span style="line-height:100%;">～</span>で囲みます。

<span style="line-height:100%;"><ruby><rb>亜米利加</rb><rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby></span>合衆国の首都は<span style="line-height:100%;"><ruby><rb>華盛頓</rb><rp>（</rp><rt>ワシントン</rt><rp>）</rp></ruby></span>だ。

亜米利加（アメリカ）合衆国の首都は華盛頓（ワシントン）だ。
ルビを多用する作品の場合、テンプレートのスタイルシートで最初から指定しておけば、そのテンプレートを使う限り、編集画面で個々に行間を指定しなくとも自働的に100%,つまり漢字のすぐ上にルビを表示できます。

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

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

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

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

スタイルシートをスクロールして末尾に以下を追加します。

ruby { line-height : 100% ; }

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

ルビについて詳しくは TAG＜Index＞ -ルビ（ふりがな）を付ける

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

「関連エントリーメーカー」で
小説本文（個別記事）ページの末尾に
新着順目次（同一カテゴリ一覧リスト）を表示させる

前ページで述べましたように、このカスタマイズは、【Harmonia!!】 の管理人 ちよろ さま考案の「関連エントリーメーカー」のスクリプトを丸ごとお借りしております。以下の記事を参考にさせていただきました。

FC2ブログで関連エントリーを表示させるスクリプト

ちよろ様、ありがとうございました！＜m(__)m＞

ちよろ様のお許しを頂戴致しましたので、公開中のＮｏｖｅｌテンプレートにも、「関連エントリーメーカー」を順次装着し、リニューアルしてゆきます。2009.5.1.以降に登録、更新したテンプレートに関しては「関連エントリーメーカー」を装着済みでありますので、以下のカスタマイズは必要ありません。

　2009.912.現在　関連エントリーメーカーは以前の新着順から昇順（時系列の旧い記事が上にくる）に改訂いたしました。昇順のカスタマイズについては コチラ

カスタマイズの方法

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

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

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

スクロールしていくと下のように書かれた部分があるはずです。

<!--more-->
<%topentry_more>
<!--/more-->
</div>

<!--▼ページナビゲーション▼-->
<!--permanent_area--><ul class="entry_navi">
<li><!--nextentry--><a href="<%nextentry_url>" title="【<%nextentry_title>】へ"><i>Back</i></a><!--/nextentry--> </li>
<li>  <a href="<%topentry_category_link>" title="【<%topentry_category>】もくじへ"><i>Index</i></a></li>
<li> <!--preventry-->  <a href="<%preventry_url>" title="【<%preventry_title>】へ"><i>Next</i></a><!--/preventry--></li>
</ul><!--/permanent_area-->
<!--▲ページナビゲーション▲-->

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

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

<%topentry_more>の前後に、改行<br />や、段落のタグ<p></p>があるテンプレートもありますが、それはこの際、気にせずに、<%topentry_more>とページナビゲーション・ランキングバナーの設置位置（①もしくは番号なし）がある箇所を探してください。

ページナビゲーションの上に以下のスクリプトを追加します。

<!--permanent_area-->

<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以上で同一カテゴリ内の新着エントリー順に表示します。

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){
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>' + cate_entrys[i][1] + '</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 = '<h5>▼ 　～ INDEX ～　「 <%topentry_category> 」　～　新着順　～　</h5><ol>' + output_fc2_entry + '</ol>'
k_k_k += '<div align="right"><a href="http://lastoneofthezodiac.blog38.fc2.com/blog-entry-4493.html">関連エントリーメーカー for FC2 Blog</a></div>'
// 著作権表示部分を消す場合は上の一行と、この行を削除
document.getElementById('kanrendesu').innerHTML = k_k_k
}

get_fc2_cate_rss('<%url>?xml&category=<%topentry_category_no>')

// -->
</script><noscript><a href="http://lastoneofthezodiac.blog38.fc2.com/blog-entry-4493.html">関連エントリーメーカー for FC2 Blog</a></noscript>
<div id="kanrendesu">
</div>

</div>
<!--/permanent_area-->

新着順がわかりやすいように上のスクリプトではリストに通し番号がついていますが、通し番号のついていないリストにする場合には、赤字の部分 ol　を　ul　に変更してください。

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

これでOKですが、このままですと、記事本文とも、また、高速配信を導入されている場合には広告とも区別がつきにくいのでスタイルシートを編集して、見せ方を変えましょう。

カスタマイズの方法は次ページで こちら

記事タイトルを通し番号でつけている場合のカスタマイズは こちら

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

新着順目次（同一カテゴリ一覧リスト）のカスタマイズ

前ページの「関連エントリーメーカー」装着のカスタマイズで、小説本文（個別記事）ﾍﾟｰｼﾞの末尾にはその小説の新着順の目次（同一カテゴリ一覧リスト）が表示されるようになったと思いますが、そのままですと、記事本文や広告との見分けがつきにくいので、その見せ方を変えるカスタマイズをご紹介します。

カスタマイズの方法

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

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

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

スタイルシートのどこでもよいので、以下のように、関連エントリーメーカーの表示を指定する内容を追加します。下は [ 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;
}

/* 一覧から訪問済みのﾍﾟｰｼﾞタイトルの色を変える場合 下は青#0000FFに変える例*/

.cat-navi a:visited { color : #0000FF; text-decoration : none;}

background-image は、背景画像の指定です。赤字の部分に背景画像のアドレスを入れます。

background-image : url("背景画像のアドレス");

.cat-navi a:visited は、 一覧から訪問済みのﾍﾟｰｼﾞのタイトルの色を変える指定です。
上の例は青#0000FFですが、必要であればテンプレートにあわせてカラコード#●●●●●●を変更してください。

.cat-navi a:visited { color : #●●●●●●; text-decoration : none;}

.cat-navi h5が　この記事の末尾で、▼～INDEX～「小説タイトル」～新着順　と帯状に表示されている、見出し部分の設定になります。主にこの部分を、それぞれのテンプレートにあわせて変更します。他の部分はまるごとコピペしてください。［テンプレートの名前］をクリックするとそれぞれのカスタマイズしたサンプルがご覧になれます。

［novel-template］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 2px 10px 2px 10px ;
font-size : 110%;
color: #ffffff;
background-color : black;
border-top : 1px solid #fff;
border-left : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-32.fc2.com/n/o/v/noveltemplate/bsb35-2.jpg");

}

［nove-template-rose1］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
color : #663333;
background-color : #ffffff;
border : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/eiji742.jpg");
background-repeat : no-repeat ;
background-position : right center;
}

［novel-template-rose2］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
color : #663333;
background-color : #ffffff;
border : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/hana1413.jpg");
background-position : right bottom;
}

文字が見え辛い場合は前ページのスクリプトに赤字のタグを追加して文字の背景だけを白くします。

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

var k_k_k = '<h5><font style="background-color:#ffffff;">▼ 　～ INDEX ～　「 <%topentry_category> 」　～　新着順　～　</font></h5><ol>' + output_fc2_entry + '</ol>'
k_k_k += '<div align="left"></div>'
document.getElementById('kanrendesu').innerHTML = k_k_k
}

［novel-template-rose3］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
border : 1px solid #C2A858 ;
font-weight : bold ;
color : #900000;
font-weight : bold;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/hana31223.jpg");
background-position : right bottom;
}

［novel-template-green］

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 0px 10px ;
font-size : 110%;
color : #663333;
background-color : #ffffff;
border : 1px solid #C2A858 ;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/midori68w.jpg");
background-position : right center;
}

［novel-10-mono1］［novel-10-mono2］

.cat-navi h5 {
margin : 0px 0px 10px 0px;
padding : 2px 10px ;
font-size : 110%;
color : #fff;
background-color : #000;
border-left : 4px double #ffffff;
border-bottom : 4px double #ffffff;
font-weight : bold ;

}

novel-10-blackシリーズは、前述の例ではなく下記の内容を追加します。
[novel-10-black1]

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

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 50px 10px 0px 10px ;
font-size : 110%;
color : #fff;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/one03-11612.jpg");
background-repeat : no-repeat ;
background-position : center top;
text-align : center;
}

.cat-navi ol {
margin : 0px;
padding : 5px 0px 10px 150px;
}

[novel-10-black2]

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

.cat-navi h5 {
margin : 0px 0px 20px 0px;
padding : 70px 10px 0px 10px ;
font-size : 110%;
color : #fff;
font-weight : bold ;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/2-1.gif");
background-repeat : no-repeat ;
background-position : center top;
text-align : center;
}

.cat-navi ol {
margin : 0px;
padding : 5px 0px 10px 125px;
}

black2はさらに、［HTML編集］部分をカスタマイズします。
ＨＴＭＬの下の箇所を探して、赤字で記されたイメージタグを追加します。

～前ページで追加した関連エントリーメーカーのスクリプト～
<!--▼ページナビゲーション▼-->
<ul class="entry_navi">
～中略～
</ul>
<!--▲ページナビゲーション▲-->

<p align="center"><img src="http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/3-2.gif" alt="" border="0" width="230" height="45" /></p>

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

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

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

marginとpadding は余白の設定、それぞれ上右下左の余白を指定しており、文字の大きさはfont-size行間はline-height、文字の色はcolor、文字の太さont-weight、枠線はborderです。
詳しくは、ハウツー系サイトさまなどをご参考に。尚、上以外のデザインに変更なさる場合のご質問はご遠慮ください。

記事タイトルが通し番号の場合のカスタマイズは次のページでご説明します。

記事タイトルが通し番号の場合のカスタマイズ

関連エントリーメーカーの同一カテゴリ一覧は縦並びのリストで表示されます。記事タイトルが通し番号の場合は、数字だけが縦一列に並ぶことになり、少々見栄えが悪いのでそれを数字が横にならぶリストに変更します。こういう風になります こちら

　カスタマイズの難易度０…カスタマイズ不要・管理画面で設定変更するだけでＯＫ

ＦＣ２ブログでは、ブログをパス制にして、パスワードを知る人しか閲覧できないようにすることもできます。
（プライベートモード～詳しくは コチラ）　

そこまでしなくとも、特定の記事だけにパスをかけることもできます。記事にパスをかけると、目次にも、　更新一覧にも記事タイトルは表示されますが、その記事を閲覧する際には、パスを記入しなければページが開けない状態になります。

全くのシークレット設定(プライベートモード)にしなくとも、閲覧に必要なパスを確認画面で表示する設定にしておけば、閲覧の際の意志や年齢確認の手段としてワンクッションおくことができます。

　カスタマイズの難易度３

おススメカスタマイズ！

いつもお世話になっているＦＣ２ブログのテンプレート工房さまですが、小説ｻｲﾄを運営なさっている皆様にとっては実に有用なカスタマイズ記事をアップしてくださいましたのでご紹介させていただきます。

記事の中にメールフォームを作る

ブログでメールフォームを設定する場合、プラグインに追加するだけでＯＫですので、とても簡単ですが、メールフォームが表示されるのは当然のことながら、サイドメニューのプラグインスペースになってしまいます。それをサイドメニューではなく、記事中に設定できるとなれば、サイトナビゲーションや表紙メニューにﾒｰﾙフォームのある記事へのリンクﾎﾞﾀﾝを追加することもできますし、マイブログをよりＨＰっぽく仕上げることができますのでおススメであります。

但しこのメールフォームはメール送信後、自動的に通常ブログ画面が開き、ページは変更できません。

諸般の事情から拙宅ではメールフォームを設置しておりませんが、ご興味のある方はぜひ、トライしてみてくださいませ。

　カスタマイズの難易度３

新作テンプレートについての先日の記事でお知らせしましたが、
関連エントリーメーカー（個別記事の末尾に表示されている同一カテゴリ一覧―新着順もくじのことです）のご考案者、
「Harmonia!!」のちよろ様が、
昇順のスクリプトをご考案くださいました。

FC2ブログで関連エントリーを表示させるスクリプト

ちよろ様、ありがとうございました！＜m(__)m＞

これにともない、現在公開中のテンプレートを全て、昇順に改定させていただきました。
以下は、すでにご利用中のお手元のテンプレートを、昇順に変更なさる場合のカスタマイズです。

　カスタマイズの難易度１

今まで、novel-Sタイプやnovel-Rタイプなどは、共有テンプレートとして公開されているものとは別に、個別記事ページのレイアウトだけを変更したテンプレート（コンパクト版など）をサイト内配布しておりました。

ＨＰ風サイトへの擬態を究極の目的としている以上、新たに有用な方法をみつければ、その度に追加変更してまいりますので、当然、改訂の回数も多くなります。新しい機能は、家電の新製品と同じで、ある程度使ってみないとわからない、気づかない不具合も多く、その不具合を解消するべくまた新たな改訂が必要となります。

上述したとおり、改訂が多いNovelテンプレートでありますが、その作業は最新の共有テンプレートを優先させるため、サイト内配布テンプレートのメンテナンスはどうしても後回しになり、滞りがちでありました。

今回、タイプ別にテンプレートのHTMLを統一したのを機に、サイト内配布を終了し、公開中の共有テンプレートのスタイルシートに直接、レイアウトを変更できる内容を追加致しました。

カスタマイズはいたって簡単、スタイルシートの中から不要な二行を削除するだけです。

　カスタマイズの難易度２

Novelテンプレートでは、衣替え以外の背景画像の変更は原則不可ですが、背景色の変更に関しては制約はありません。ご自由にどうぞ。
但し、デザイン変更にあたりますのでサポートはできません。
背景色を変更なさる場合は以下を参考に、ご自力でのカスタマイズをお願い致します。
ご質問など、ご遠慮ください。

2012.8.11.改訂

　カスタマイズの難易度１

ver1203以前の旧バージョンのテンプレートを御利用の場合

FC2ブログ仕様変更により、ver1203以前の旧バージョンのテンプレートに不具合が起きており、再DLもしくは修正が必要です。再DLではなく旧バージョンのテンプレートのHTMLを変更してご利用の場合は、一旦の同じテンプレートをDLしていただき、スタイルシートの冒頭文字の設定(C)～(D)(E)～(F)(G)～(H)を改訂された新バージョンの内容に差し替えてご利用ください。
修正個所・方法について詳しくは　コチラ

Novelテンプレート全てではありませんが、一部のテンプレートでは、個別記事ページと通常ブログ画面の、記事本文と追記の最初の文字が、以下のように大きく、画像に装飾されて表示されます。(first-letterの設定）

novel-R-Angel個別記事ページ


novel-R-Angel通常ブログ画面



背景に表示される画像の位置は、初期設定の表示に合わせて微調整してあります。DL後にスタイルートをカスタマイズして文字サイズや行間・文字間隔の設定を変更するとバランスが崩れ、表示が乱れる事があります。また、記事冒頭に余白を入れてしまうと、左側が大きくあき、テンプレートによっては、firefoxで閲覧時に、小さい四角が表示されてしまうのでご注意ください。

　注意！

この場合、記事の編集画面で　文字装飾ツールをつかって文字の大きさや色を変更する時は必ず、2番目の文字からにしてください。

　文字装飾が不要なページ

この１文字目の装飾が不要なページ(記事)は、記事本文や追記の冒頭に　改行　をいれて投稿すると、大きさも変わらず、背景画像もなく、普通に表示されます。
但し、自動改行は、編集画面を開くたびに詰まってしまいますので、改行を入れる場合は、
<br />と手打ちしてください。

全てのページ(記事)で１文字目の装飾が不要であり、投稿の度に改行を入れるのがご面倒であれば、スタイルシートから　first-letter　の設定箇所を削除してください。

カスタマイズの難易度５

今回の改訂で、特定の個別記事ページの背景変更が以前より簡単になりました。HTML部分には予め、必要なカスタマイズを施してありますから、あとは、スタイルシートに変更後の背景を設定を追加するだけです。例をご参考に、お好みのスタイルに指定した上で追加してください。

209.7.1.現在、novel-10タイプ・novel-Wタイプ以外のテンプレートは、背景画像の変更のためのタグが実装して改訂済みです。但し、表紙なしの一般ブログテンプレートはこのカスタマイズの需要があると思えませんので、現在も今後も実装予定はありません。

スタイルシートの具体的な記述方法や、その内容についての説明は省きますが、背景画像・背景色・文字色・リンク色などは、カスタマイズの基本ですから、ハウツー系サイト様など簡単に調べられます。
ご不明な部分はご自力で御調べいただき、ご質問等ご容赦ください。

　注意

2010.8.5.Novelテンプレートの利用規約を改定し、衣替え以外の背景画像の変更は原則不可とさせていただきました。以下にご紹介したカスタマイズで、画像を変更してご利用の場合は、管理人の課した条件を満たすことが必要です。
詳しくは　背景画像を変更してのご利用をご希望の場合　

　カスタマイズの難易度０…カスタマイズ不要・管理画面で設定変更するだけでＯＫ

FC2ブログに新しい機能として関連記事リストが追加されましたが、Novelテンプレートでは以前より、「Harmonia!!」ちよろ様ご考案の関連エントリーを導入しています。記事の末尾に、関連記事を複数リスト表示するという役目は関連エントリーが十分に果たしてくれていますので、Novelテンプレートでは関連リストを、個別記事ページの同作品（同一カテゴリ）前話・次話へのページナビゲーションとして表示させます。

こういう風に表示されます。

実際に表示されているページはこちら　PFタイプ　スタンダードタイプ　Rタイプ　Sタイプ

但し、そのためには、関連リストをページナビゲーションに表示させた仕様に改訂したテンプレートを再ＤＬする必要がありますが、2010.9.4.現在、改訂が済んでいるにも関わらず、一部の共有テンプレートの更新（改訂）が反映されない状態が続いています。テンプレート一覧で、最終更新日が、本日以前の日付で表示されているNovelテンプレートは、以下の設定をしても、関連リストはページナビゲーションとして表示されません。

改訂されていないテンプレートの場合このように表示されます




このままでも、前後ページにリンクできますが、ページナビゲーションとしては体裁が悪く小説の読者にとってはわかりやすいとはいえませんので、

最終更新日が、2010/09/04以降の日付の
Novelテンプレートを、再ＤＬしてご利用ください。

（2010.9.4.novel-10タイプ・novel-Wタイプのテンプレートは未改訂のため公開を一時中止しておりますが、改訂が済み次第公開します。）

　注意

DL済みのテンプレート一覧に同じ名前のテンプレートがあると再DLすることはできませんので、最初にDLしたテンプレートを一旦削除するか、名前を変更してください。
テンプレートの名前の変更方法は　コチラ

　「常に単独の作品しか連載しないし、連載の合間には雑記的な記事も書かない！」という方は、改訂以前のテンプレートのまま、この設定はしない方が多分見やすいです。

　2010.8.5.Novelテンプレート利用規約を改訂し、今後、画像の無断変更を禁止させていただきました。
規約改訂以前に画像を変更してご利用の方も、規約改訂後にデザイン変更、もしくはテンプレートを再ＤＬして改訂なさる場合は、管理人の課した条件を満たした上でご連絡をお願い申し上げます。詳しくはコチラ

　カスタマイズの難易度２

新作テンプレートや改訂版のテンプレートの目次ページと小説ページでは、「関連もくじ一覧」として、同じ親カテゴリに属する全てのカテゴリの目次へのリンクが表示されます。


ＤＬ時、この関連もくじは縦並びですが、小説ページに関しては、
全ページ、あるいは特定の（カテゴリ）だけ、以下のように横並びに変更して表示することができます。

関連(カテゴリ)もくじ一覧が表示

改訂版のテンプレートでは、親子カテゴリ設定している場合、そのカテゴリの目次ページと小説ページでは、「関連もくじ一覧」として、同じ親カテゴリに属する全てのカテゴリの目次へのリンクが表示されます。
開いているページのカテゴリは、わかりやすいように色を変えて（下の場合は赤字）表示されます。



　　もくじページに表示される関連目次





　　小説(個別記事)ページに表示される関連目次

　　　

表示されるのは、親子カテゴリを設定している場合だけです。
親子カテゴリ設定をしていない単独カテゴリのページでは、今まで通り、その小説の目次へのリンクだけが表示されます。また、親子カテゴリ設定をしていても、実際に公開中の記事のない場合はここには表示されません。

親子カテゴリ設定をしていない方はぴんとこないと思いますが、長編作品を親子カテゴリ設定で章分けして掲載なさっているサイト様の場合、閲覧者にとっては便利になると思います。
連載の更新の度に、読みに訪れてくれる読者はともかく、初回訪問者が、章に分けられている長編作品を続けて読む場合、今までは一旦、総目次に戻らなければ、次の章に進めませんでしたが、これでその手間が省けます。

特にJavaScript無効時、親カテゴリの総目次はカテゴリ別に表示されませんが、この関連もくじ一覧は、JavaScript無効時も同様に表示されます。但し、スタイルシートが無効な閲覧環境ではとんでもない表示になります
（国内ではそういうｗｅｂ環境もままないと思いますが、…(^^ゞ）

記事タイトルを連番で付けている場合など、小説ページの関連もくじを横並びに表示させることもできます。
詳しくは　小説ページの関連もくじ一覧の表示を横並びにする

　カスタマイズの難易度４

改訂前のnovel-PF.novel-PF2以外のスタイルシートには個別記事ページのデザインを変更できる二種類のスタイルが組み込まれておりました。改訂版も、スタイルシート内の(A)(B)二行を削除する事で、ダウンロード時のスタイルとは別のスタイル、レイアウトで表示できるのは同じです。
個別記事の表示をコンパクト版・ワイド版に変更する

違うのは、コンパクト版かワイド版、変更はできても、どちらか一方のスタイルでしか選択できなかった改訂以前と違って、改訂版は、一つのテンプレート内で、カテゴリ、もしくは記事によって、二種類のスタイルでの表示が可能になった事です。
ダウンロード時、改訂版のテンプレートでは、カテゴリ番号0のカテゴリ(初期設定では未分類)と、それ以外のカテゴリとは別のスタイルで表示されます。

実際の表示例　novel-R-Sepiaの場合　
未分類カテゴリの記事ページ　　　未分類以外のカテゴリの記事ページ

カテゴリ0以外の記事ページのスタイルを別表示にする場合はカスタマイズが必要です。

カテゴリ番号の確認

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

　カスタマイズの難易度３

注意

2011.9.7.以前にDLしたテンプレートではこのカスタマイズが正しく反映されません。大変申し訳ありませんが、このカスタマイズをお試しになる場合は、HTMLのバージョンナンバーが、ver1110　もしくはverPF1105　以降の最新版を再DLしてご利用ください。

改訂版のテンプレートの個別記事ページでは、作品(カテゴリ)ごとに違う定型文やランキングバナーを表示させることができます。
このカスタマイズは目次ページではなく、小説本文ページにカテゴリごとに違うバナーを表示させるカスタマイズのご紹介です。
目次ページに作品ごとに違うバナーを表示させる場合は　　コチラ
通常ブログ画面で作品ごとに違うバナーを表示させる場合は　　コチラ


個々の作品別にジャンルの違うランキングに参加する場合に便利なカスタマイズですが、表示されるのは、FC2ブログ拍手タグや前話次話へのページナビゲーションの後になります。記事本文と拍手タグ等の間に割り込んで表示させることはできません。記事本文の直下に表示したい場合は、従来通り、記事の編集画面の末尾にタグを追加してください。

カテゴリの番号の確認

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

　カスタマイズの難易度０…記事上にリンクボタンを追加するだけ
　カスタマイズの難易度２…他の表示と整合性を持たせる場合

改訂以前のテンプレートでは、小説(同一カテゴリ)の前話、次話へのページリンクは、記事下にのみ表示されました。改訂版のテンプレートでは、関連リストの設定を変更するだけで、本文の上にも、目次ページ、前話ページ、次話ページへのリンクボタンを横並びで表示させることができます

関連記事リストの設定を変更

菅理画面を開いてください。

左側のメニューから ［ 環 境 設 定 ］ ⇒ 【 環境設定の変更 】 をクリック
開いた画面の一番上 ［ 環 境 設 定 ］　⇒【ブログの設定 】 ⇒ 【 記事の設定　】 をクリック

開いた画面の　［ 記事の設定 ］の［ 関連記事リスト 表示方法 ］を

関連記事リスト 表示場所 リストを 【個別ページの記事下 】 から　【上記全て 】に変更 して
【 更新 】をクリック　

但し、この設定にすると、右がわの時系列順のページナビと、同じリンク先を示している場合でも矢印の向きが反対になってしまいます。
また、一般的に、左矢印がもどる、右矢印が進むとされていますが、このままでは、左矢印がすすむ、つまり次話ページのリンク、右矢印がもどる、つまり前話ページへのリンクボタンが表示され、それも不自然です。
それを避けるためには、記事の表示順序を変更する必用があります。

同じカテゴリ中の 【前後の記事を古い順に 】 表示する

この設定変更で、記事上のページナビは、左矢印が前話ページへのリンク、右矢印が次話ページへのリンクを示し、時系列順のページナビの矢印とも整合するようになります。
しかし、そうなると、今度は、記事下の前話、次話のページナビにNext Backとリンク先が反対になるという不具合が生じますので、これは、テンプレートをカスタマイズすることで調整します。

　カスタマイズの難易度２

Novelテンプレートでは、五つの基本設定の通りに関連記事リストを設定すると、個別記事の下に前話・次話へのページナビが以下のように表示されます。


この時、関連記事リスト 表示場所 リストを【個別ページの記事下】ではなく 【上記すべて 】 に表示する　に設定すると記事下だけではなく記事上にも小説前話、次話、目次へのリンクボタンを表示できます


また、カスタマイズ次第で、記事下のページナビゲーションの表示を変更して、記事上と同じスタイルで表示させることもできます。

以下は、記事下のページナビゲーションの表示を変更して、記事上と記事下に同じスタイルで前話・作品目次・次話へのリンクボタンを横並びで表示させるカスタマイズです。

設定変更とカスタマイズ

関連リストの設定変更

最初に関連リストの設定を変更します。
菅理画面を開いてください。

左側のメニューから ［ 環 境 設 定 ］ ⇒ 【 環境設定の変更 】 をクリック
開いた画面の一番上 ［ 環 境 設 定 ］　⇒【ブログの設定 】 ⇒ 【 記事の設定　】 をクリック

開いた画面の　［ 記事の設定 ］の［ 関連記事リスト 表示方法 ］を

関連記事リスト 表示場所 リストを 【テンプレート変数のみ 】 に表示する
同じカテゴリ中の 【前後の記事を古い順に 】 表示する
に変更した上で
【 更新 】をクリック　

但しこれは、記事(ページ別)の表示順　を　新しい順　にしている場合（通常ブログ画面の冒頭に最新記事が表示）の設定です。（「はじめに」など一番古い記事を通常ブログ画面の冒頭に表示させるため）　記事(ページ別)の表示順　　を　古い順　にしている場合は、

同じカテゴリ中の 【前後の記事を新しい順に 】 表示する　に設定してください。

アカマイ広告を非表示にする

この方法は、テンプレート変数のみで関連記事リストを表示させるため、アカマイ広告を表示する設定にしている場合(初期設定では表示)、記事下のページナビゲーションは、広告の下に表示されてしまいます。
それを避けるためには、アカマイ広告を非表示のに変更しておきましょう。

アカマイ広告を非表示にする設定は、関連リストの設定と同じページの下の方にあります。

画像高速表示の設定　【利用しない】
【更新】をクリック

但し、設定変更が反映されるまで一週間ほどかかりますので、その間広告は表示され続けます。

　カスタマイズの難易度２
Novelテンプレートの個別記事ページではコメント・トラックバックを受け付けない設定にすると、コメント・トラックバック自体の表示は消えますが、コメント欄のページナビゲーションとサイトナビゲーションは残るため、記事欄の下部に、サイトナビゲーションやページナビゲーションが重複して表示されてしまいます。

ヘッダー

サイトナビゲーション①

ページナビゲーション 記事本文 ページナビゲーション

サイトナビゲーション②

ページナビゲーション （サイトナビゲーション③）

サイトナビゲーション④

フッター

その問題を改善するため、改訂版では、<head> ～</head>内の一か所をカスタマイズするだけでコメントトラックバック関連の表示全てを非表示にできるようになっています。
詳しくは【改定版　簡単カスタマイズ】コメント・トラックバックが不要な場合

しかし、これは、全ての記事ページのコメント・トラックバック欄を一括して非表示にするカスタマイズですので、カテゴリによって、あるいは記事によって、コメントやトラックバックを受付ていたり、受け付けていなかったり、その設定がまちまちなブログの場合はこの方法はつかえません。

以下は、ほとんどの記事でコメント・トラックバックを受け付けているが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けていない場合のカスタマイズです。
一括で非表示にするのではなく、コメント・トラックバックを受け付けていない、特定のカテゴリ、もしくは特定の記事ページのみ、コメント・トラックバック欄の残骸を非表示にします。

それとは反対に、ほとんどの記事でコメント・トラックバックを受け付けていないが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けている場合のカスタマイズはコチラ

　注意

このカスタマイズは表紙や記事ページのコメントトラックバック関連のソースに変更を施した改訂済みのテンプレートのみ成立するカスタマイズです。改訂以前のテンプレートに、以下の<head> ～</head>部分のソースを追加するだけでは、カスタマイズは反映されませんのでご注意ください。

　カスタマイズの難易度２
Novelテンプレートの個別記事ページではコメント・トラックバックを受け付けない設定にすると、コメント・トラックバック自体の表示は消えますが、コメント欄のページナビゲーションとサイトナビゲーションは残るため、記事欄の下部に、サイトナビゲーションやページナビゲーションが重複して表示されてしまいます。

ヘッダー

サイトナビゲーション①

ページナビゲーション 記事本文 ページナビゲーション

サイトナビゲーション②

ページナビゲーション （サイトナビゲーション③）

サイトナビゲーション④

フッター

その問題を改善するため、改訂版では、<head> ～</head>内の一か所をカスタマイズするだけでコメントトラックバック関連の表示全てを非表示にできるようになっています。
詳しくは【改定版　簡単カスタマイズ】コメント・トラックバックが不要な場合

しかし、それは、全ての記事ページのコメント・トラックバック欄を一括して非表示にするカスタマイズですので、カテゴリによって、あるいは記事によって、コメントやトラックバックを受付ていたり、受け付けていなかったり、その設定がまちまちなブログの場合、この方法はつかえません。

この記事でご紹介するのは、ほとんどの記事でコメント・トラックバックを受け付けていないが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けている場合のカスタマイズです。
一旦全てのページのコメント・トラックバック欄を非表示にした上で、特定のカテゴリ、もしくは特定の記事ページでのみ、コメント・トラックバック欄が表示されるようにカスタマイズします。

それとは反対に、ほとんどの記事でコメント・トラックバックを受け付けているが、特定の記事・カテゴリでのみコメント・トラックバックを受け付けていない場合のカスタマイズはコチラ

　注意

このカスタマイズは表紙や記事ページのコメントトラックバック関連のソースに変更を施した改訂済みのテンプレートのみ成立するカスタマイズです。改訂以前のテンプレートに、以下の<head> ～</head>部分のソースを追加するだけでは、カスタマイズは反映されませんのでご注意ください。

　カスタマイズの難易度１

記事の編集画面で、ルビを付ける漢字(赤色の部分)とふりがな(青色の部分)とカッコ()を以下のようにルビタグで囲みます。

<ruby><rb>亜米利加</rb><rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby>

亜米利加（アメリカ）
ルビをつけた漢字と前後の語句の間は改行を入れずに続けて記載します。

<ruby><rb>亜米利加</rb><rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby>合衆国の首都は<ruby><rb>華盛頓</rb><rp>（</rp><rt>ワシントン</rt><rp>）</rp></ruby>だ。

亜米利加（アメリカ）合衆国の首都は華盛頓（ワシントン）だ。
一連のルビタグは正しく間違いがないように記載します。対のタグが欠けるとルビを付けた漢字の直後に改行が入ったり、あるいは改行するべき個所で改行されなかったりなどの不具合がでてくるので注意します。

行間を広くとっているテンプレートやフォントをメイリオで指定しているテンプレートなどの場合、ルビを振ると、ルビと漢字との間が広く開いてしまいます。不自然な場合は、ルビをつけた漢字だけline-height:100%を指定すると漢字のすぐ上にルビを表示できます。

ルビタグの前後を<span style="line-height:100%;">～</span>で囲みます。

<span style="line-height:100%;"><ruby><rb>亜米利加</rb><rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby></span>合衆国の首都は<span style="line-height:100%;"><ruby><rb>華盛頓</rb><rp>（</rp><rt>ワシントン</rt><rp>）</rp></ruby></span>だ。

亜米利加（アメリカ）合衆国の首都は華盛頓（ワシントン）だ。
ルビを多用する作品の場合、テンプレートのスタイルシートで最初から指定しておけば、そのテンプレートを使う限り、編集画面で個々に行間を指定しなくとも自働的に100%,つまり漢字のすぐ上にルビを表示できます。

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

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

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

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

スタイルシートをスクロールして末尾に以下を追加します。

ruby { line-height : 100% ; }

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

ルビについて詳しくは TAG＜Index＞ -ルビ（ふりがな）を付ける