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

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←特定のカテゴリの目次ページのカスタマイズ (5)【novel-PF タイプ】背景画像を変更する →novel-PF-PlainA1
 
上記の広告は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
   
 

「テンプレートマニュアル」
目次ページ

特定のカテゴリの目次ページのカスタマイズ (6)【novel-R タイプ】背景画像を変更する

 画像のないテンプレートで記事をご覧になる場合は
 Temlplate Image : カスタマイズの難易度5 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←特定のカテゴリの目次ページのカスタマイズ (5)【novel-PF タイプ】背景画像を変更する →novel-PF-PlainA1
 
hosi5.gifカスタマイズの難易度5

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


osirase-ani02.gif2010.7.1.追記
改訂版のテンプレートのHTMLには、予め特定カテゴリ背景変更のためのカスタマイズが施されていますので、背景の変更が以前より簡単になりました。
詳しくは 【改定版 簡単カスタマイズ】特定のカテゴリの目次の背景を変更する



以下は改訂前の記事ですので折りたたんであります。
一応読んでみる方はここをクリックしてください▼

カスタマイズ


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

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


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

【novel-R タイプ】 の場合



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

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

ご参考までに   TAG<Index>さまの解説ページ
           背景画像の表示位置を指定する
           背景画像の並び方を指定する



カテゴリの番号の確認


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

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


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

最初に、[HTML編集]部分をカスタマイズします。


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

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

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


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

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


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

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

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

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


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

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


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

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

更新 】 をクリックする。


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





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

~ Comment ~

カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←特定のカテゴリの目次ページのカスタマイズ (5)【novel-PF タイプ】背景画像を変更する    →novel-PF-PlainA1

名前変換フォーム

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