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

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←novel-R-Angel 天使のテンプレート →first-letter 記事・追記・最初の文字の設定について
 
上記の広告は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 : カスタマイズの難易度2 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←novel-R-Angel 天使のテンプレート →first-letter 記事・追記・最初の文字の設定について
 
カスタマイズの難易度2(変更箇所は一箇所だけ) カスタマイズの難易度2

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

2012.8.11.改訂


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

カスタマイズの方法



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


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

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

novel-PFタイプ・PF2タイプのテンプレート


カスタマイズ以前のメインフレーム(ページ右側部分)が単色の場合は、#permanent .main_box を、メインフレーム上部のヘッダー部と本文スペースの色が違う場合は、それに加えて #permanent .entry_bodyと #permanent .headerと記されている箇所をスタイルシートの中から 探します。
そこに背景色 background-color : #カラーコード; と必要に応じて文字色 color: #カラーコード; の設定を追加もしくは変更します。
以下は文字色を黒、背景色を白に設定した場合です。

#permanent .main_box {
color: #000000;
background-color : #ffffff;
}



#permanent .entry_body {
color: #000000;
background-color : #ffffff;
}


#permanent .header {
color: #000000;
background-color : #ffffff;
}



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


novel-PFタイプ・PF2タイプ以外のテンプレートでは、個別記事ページの表示を、固定幅の中央表示にする場合と、可変性の全面表示にする場合、変更可能な二種類の設定が、スタイルシートには予め記述されています。

(表示を変更する場合は、スタイルシートから、(A)と(B)の二行を削除するだけで簡単に変更できます。詳しくはコチラ

便宜上、ここでは、固定幅の中央表示をコンパクト版、可変性の全面表示をワイド版としてご説明します。
小説本文の表示がコンパクト版か、ワイド版か、また、それがDL時の設定によるものか、あるいは変更後の設定によるものかによって、カスタマイズする箇所が違いますのでご注意ください。

コンパクト版の場合


スタイルシートの中から .p_main-body もしくは #permanent .p_main-body と記されている箇所を探します。
そこに背景色 background-color : #カラーコード; と必要に応じて文字色 color: #カラーコード; の設定を追加もしくは変更します。
以下は文字色を黒、背景色を白に設定した場合です。

.p_main-body {
color: #000000;
background-color : #ffffff;
}



#permanent .p_main-body {
color: #000000;
background-color : #ffffff;
}



ワイド版の場合


スタイルシートの中から、#permanent .main Rfタイプ・Jfタイプなど記事面サイドに目次が表示される疑似フレームスタイルの場合は、 #permanent .main2 と記されている箇所を探します。
そこに背景色 background-color : #カラーコード; と必要に応じて文字色 color: #カラーコード; の設定を追加もしくは変更します。
以下は文字色を黒、背景色を白に設定した場合です。

#permanent .main {
color: #000000;
background-color : #ffffff;
}



#permanent .entry_main2 {
color: #000000;
background-color : #ffffff;
}



テンプレートによっては、本文の背景を半透明の設定にしているため、

背景色を透明にし、background-color : transparent;

背景に透過画像を設定し、background-image : url("png透過画像のアドレス");

その上で、透過が無効のIE6以下のブラウザのためにハック(_)で調整していますが、_background-color : #ffffff;

そうした記述も削除します。(赤字の部分)

.entry_text2 {
background-color : transparent;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/white60.png");
_background-color : #ffffff;

color: #000000;
background-color : #ffffff; }



#permanent .entry_text2 {
background-color : transparent;
background-image : url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/white60.png");
_background-color : #ffffff;

color: #000000;
background-color : #ffffff; }



DL時はコンパクト版で、スタイルシートから(A)(B)二行を削除してワイド版に変更した場合、.entry_text2の記述が二か所ある場合がありますが、どちらも同じように追加変更します。

更新 】 をクリックする。


テキスト・フォント関連のスタイルシートの記述方法の詳細などは「TAG INDEX」様のこちらのページがおススメ

関連記事
スポンサーサイト
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 ▽TB[0]▽CO[5]
関連カスタマイズ記事一覧 カスタマイズの難易度2 
   

~ Comment ~

ありがとうございます

管理人様

お礼の言葉が遅くなりまして誠に申し訳ございません。
迅速な対応と、分かりやすい説明をして頂き本当にありがとうございました。
早速、ご教授頂いた方法で背景色を変更してみたところ、小説本文の背景を自分の指定したかった色に変えることが出来ました!!これで文を読む方の目が疲れることが軽減出来ると思います。
ただ、自分のやり方がおかしかったのか、記事本文を囲むように白い部分が随分と残ってしまいました。
恐らく、枠を構成するスタイルシートの箇所に背景のコードを入力すればいいのでしょうが、コレだと思う場所を変更すると全く違う場所の色が変わるという情けない話に・・・・・・
もう少し自力で頑張って見たいとは思いますが、出来なかった場合はまたご教授頂けると幸いです。

それと、アドバイス頂いたイラスト付きのテンプレートの場合ですが、当方のページ構成ですとイラストリストを開いた時に上手く表示されなかったので断念しました。
表示するイラストのサイズが大きすぎるのが原因だと分かっていますので、折角の機能なのに当方のブログで生かすことが出来ずに申し訳ありません。

最後に、
私の図々しいお願いを聞き届けてくださり、本当にありがとうございました。

To:DON様

少々気になることがありましたので、勝手ながら補足サポート。
ご不要であれば、さらっとスルーなさってくださいませ…(^^ゞ

> ただ、自分のやり方がおかしかったのか、記事本文を囲むように白い部分が随分と残ってしまいました。

サイトを確認させていただきましたが、小説本文の背景色の変更がパンダ状態になってしまったのは、おそらく、スタイルシートの変更箇所をお間違えになったせいではないかと。

DON様が現在ご利用のテンプレートの小説本文ページは、固定幅中央表示(コンパクト版)でレイアウトされておりますので、.entry_text2ではなく、.p_main-bodyの設定をカスタマイズしていただければ、余白なく、背景色が変更されるはずです。

> 恐らく、枠を構成するスタイルシートの箇所に背景のコードを入力すればいいのでしょうが、コレだと思う場所を変更すると全く違う場所の色が変わるという情けない話に・・・・・・

上の方法で再度カスタマイズなさる場合は、一旦元の状態に戻してからの方が間違いがないのですが、カスタマイズ以前のテンプレートのコピーはございますか?
コピーがない場合、現在適用中のテンプレートの名前を変更なされば、再度、同じテンプレートをDLすることができます。
とりあえず、再DLなさり、そのまっさらな状態のテンプレートで、気になる部分のカスタマイズをお試しになってはいかがでしょうか?

> それと、アドバイス頂いたイラスト付きのテンプレートの場合ですが、当方のページ構成ですとイラストリストを開いた時に上手く表示されなかったので断念しました。
> 表示するイラストのサイズが大きすぎるのが原因だと分かっていますので、折角の機能なのに当方のブログで生かすことが出来ずに申し訳ありません。

ご興味があればと、おススメ申し上げただけですので、どうぞお気になさらずに。
ただ、イラストリストは、画像のサイズには影響されないはずだったので、それが気になります。
イラストリストに画像を表示させる場合、投稿画像は本文記事冒頭にアップし、イメージタグの中のサイズ指定は、削除する必要があったのですが、もしかして、その設定をお忘れとか、いかがでしょう?

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To:シークレットL様

DLとコメントありがとうございます。
ご返答が遅れて申しわけありません。
先ほど、上の記事を改訂し、novel-PFタイプの場合の解説を追加しましたので、ご参照ください。
  • #1238 Novelテンプレート管理人 
  • URL 
  • 2012.08/11 05:57 
  •  ▲EntryTop 

お返事のお礼です。

管理人様

こんばんは。
お返事ありがとうございました。
無事にカスタマイズできました!

背景色変更の質問を致しまして申し訳ありませんでした。
お答えくださってありがとうございます(>_<)
助かりました(/_;)
カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←novel-R-Angel 天使のテンプレート    →first-letter 記事・追記・最初の文字の設定について

名前変換フォーム

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