このカテゴリは 横ならび目次サンプル(2) で表示させ、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
このカテゴリの記事ページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
 

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ① →同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ③
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit
   
 

「テンプレートマニュアル」
小説本文(個別記事)ページ

同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②

 画像のないテンプレートで記事をご覧になる場合は
 Temlplate Image : ナビゲーション 
 Image : ナビゲーション 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ① →同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ③
 

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

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


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

カスタマイズの方法



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


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編集]部分をカスタマイズします。
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です。
詳しくは、ハウツー系サイトさまなどをご参考に。尚、上以外のデザインに変更なさる場合のご質問はご遠慮ください。

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

関連記事
スポンサーサイト


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
携帯用Novelテンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
表紙ページ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
Novel List 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
目次ページ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
小説本文(個別記事)ページ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
イラストリスト 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
その他・共通ページ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
携帯用テンプレートのカスタマイズ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
テンプレート別のカスタマイズ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
サイト内配布テンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
テンプレートの衣替え 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
裏技カスタマイズ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-tempタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-Sタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-Rタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-Gタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-Jタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-Cタイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
素材屋風テンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
疑似フレームテンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
novel-PF2タイプ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
夢小説用テンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
イラストリスト付きテンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
携帯用テンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
一般ブログ用テンプレート 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
不具合の修正 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
その他お知らせなど 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
管理人のおススメ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
雪の女王 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
銀河鉄道の夜 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
坊っちゃん 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
幸福の王子(夢小説サンプル)  3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png 同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ②
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit ▽TB[0]▽CO[0]
関連カスタマイズ記事一覧 ナビゲーション 
   

~ Comment ~

カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ①    →同一カテゴリ一覧リスト「関連エントリーメーカー」のカスタマイズ③

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。