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

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←全テンプレの改訂が完了するまで不具合箇所、改訂済みのHTMLをサイト内配布します。 →novel-Jf-Autumn 秋の紅葉テンプレート
 
上記の広告は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
   
 

カスタマイズの備忘録

修正版ボックス背景全面表示とスクロールの覚書ver1210

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←全テンプレの改訂が完了するまで不具合箇所、改訂済みのHTMLをサイト内配布します。 →novel-Jf-Autumn 秋の紅葉テンプレート
 

body 直下のボックスを中身がなくても、画面下まで背景を表示させる(PF/PF2タイプ以外)



(1)全てのエリアでmain背景を上から下まで表示させる

最大幅を指定していない場合
dt7_novel-template, novel-S-spring, novel-S-muguet, novel-S-blue, novel-S-laceなど


html { height:100%;_overflow: hidden;_overflow-x: scroll; }

/*全てのエリアでmain背景を上から下まで表示させる場合for JGfor JG*/
html.index,html.page,html.date,html.search,html.tag,html.category,html.edit,
html.permanent,html.titlelist
{ overflow: hidden;_overflow-x: scroll ; }


html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height:100% ; overflow : hidden ; } /*for JG*/

body > .all { height:100% ;}

.main { height:100%; min-height:100%; overflow:auto ; }

body > .main { height:auto ; }


#index .all .main{/overflow:hidden;_overflow:auto ;}


ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとなる
  • body と all を height:100% で固定しているので、JGタイプもJGタイプ以外も全て背景は main の指定によって下まで表示される。
  • しかし、最大領域を指定しているテンプレートの場合、上では指定した横幅の位置にスクロールが表示されてしまう為、その場合は(4)の方法で指定する


最後の#index .all .mainの指定は不要な場合もあるが、スタイルによってはJGタイプに変更時IE7で、縮小画面の内側にダブルスクロールが出る事があるのでそれを防ぐ為に一応記述
#index .all .main { /overflow : hidden ; _overflow : auto;}/*for IE7JG*/

JGタイプの場合、mainで指定した中央表示の背景は、(スクロールの幅だけ)若干右にずれて表示される。中央部が狭い背景画像は、そのずれが目立つので注意。

(2)個別記事エリアだけでmain背景を上から下まで表示させる場合


ほとんどのテンプレートがこれ。背景をフルスクリーン表示させている時も共通。
以下は個別記事エリアのmain背景だけを上から下まで表示させる場合。


html { height : 100%; _overflow: hidden ; _overflow-x: scroll; }

/*個別記事エリアfor JG*/
html.permanent { overflow : hidden ;_overflow-x : scroll ; }

html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height : 100%; min-height:100%; overflow:auto;_overflow : hidden ;} /*for JG*/

body > .all{ height:auto; }

#permanent > .all { height : 100% ; }

.main { height:100%; min-height:100%; overflow:auto;}

body > .main{ height:auto; }


#index .all .main { /overflow : hidden ; _overflow : auto ;}



フルスクリーン表示の時はmain に position :relatvie を追加
.main{ height:100%; min-height:100%; overflow:auto;position: relative;}


(3)最大幅を指定していない個別記事以外のエリアでmain背景を左下もしくは中央下まで表示させる場合

novel-R-Papillon,novel-S-pumpkin1, novel-S-icyou, novel-S-rose, novel-S-berryなど

(2)の基本コードに 個別エリアと同じように記述して追加。以下は全記事一覧ページmain背景を左下もしくは中央表示させる例

/*背景を上から下まで表示させるエリアfor JG*/
html.permanent , html.titlelist { overflow : hidden ;_overflow-x : scroll ; }

#permanent > .all { height : 100% ; }
#titlelist > .all { height : 100% ; }



(4)最大幅を指定している個別記事以外のエリアのmain背景を上から下まで表示させる場合


novel-Rf-Jyugoyaシリーズなど右寄せのデザインなど最大横幅を指定してある場合、(3)の方法では幅広パソコンなどで閲覧した場合、最大横幅の位置に縦スクロールが表示されてしまう。
これを避けるために、最大横幅を指定してあるエリアは、(3)の方法ではなく、(2)の基本コードのまま、maine と all の指定で調整する。
main で背景を右下まで表示させており、なお且つ最大幅を指定しているエリアは main と all で重複指定し、その上で、.all .main つまり、JGタイプのの時の main 背景を非表示に指定する。

/*最大横幅を設定しているエリア用*/
#index ,#category,#tag,#page ,#date,#search ,#edit {max-width:1400px;}

#index .main,#index .all{
background-color : transparent;background-attachment: scroll;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6_700.jpg"); background-position: right top;background-repeat: repeat-y;}

#page .main,#page .all{
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6b_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#search .main,#search .all,#date .main,#date .all
{background-color : transparent;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane4_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#index .all .main,#page .all .main,#searach .all .main,#date .all .main,
{background-image :none;background-color : transparent;}




(5)最大幅を指定している全記事一覧ページのmain背景を右下まで表示させる場合


(2)と(3)のコードに加え、以下を追加


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


#titlelist .sub_block {
margin:0; padding:0; width : 180px ; height:100%;
right : 620px ; top : 0;
position:absolute; z-index : 4 ;overflow:auto;text-align : center;
}


最大横幅を指定した上で、sub_block を コンテナのすぐ左に表示させるには、position:fixed ではなく
absolute で指定する必用がある。しかし、absolute で指定すると、sub_block が固定されず、画面に連動して上下してしまう。それを避けるために、ボディのスクロールを非表示にした上で、main と sub_block の高さを100%で固定し、それぞれ別個にスクロールさせる。但し、全記事一覧ページはサブボックスがあるため、最大幅の位置にどうしても縦スクロールが表示される。
ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとして背景は下まで表示される。
  • mainを左下もしくは中央下まで表示させる場合、個別記事や全記事一覧・目次ページなど、
    sub_blockがあるエリアでは、all での代替え指定はできないため、
    他のエリアとはコードが違ってくる。



補足



JGタイプの時IE6で、縮小画面がダブルスクロールになる場合は、以下を追加
html.index{_overflow-x:hidden;}/*for IE6JG*/
JGタイプの時IE7で、縮小画面に横スクロールが出る場合は、以下を追加
html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

Jタイプの時IE6で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加
.all .main{_position: relative;}/*for IE6JGスクロール固定防止の為*/
Jタイプの時IE6 と IE7 で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加

.all .main{/position: relative;}/*for IE6&IE7JGスクロール固定防止の為*/


s2_popup_sample.jpg


サイド(右)カラム固定メイン(左)カラム可変の場合のポップアップ表示サンプルコード



/*layout_mainで背景を指定しない時は領域を確保する必用がないので非表示*/
hr.bg_line {display:none;}

/*IE6&IE7でボックスが固定されスクロールが無視されるのを防ぐ為*/
#index .all .main{_position: relative;}

/*幅指定はIE6用、高さ指定はサイドカラム表示内容が少ない場合の為*/
.all #wrapper{position:relative;_width:600px;min-height:400px;_height:400px;} 

.popupcard {
width:100%;left:0;top:50px;_right:200px;
visibility:hidden;position:absolute;
text-align:center;
color : #f5f5f5;}

.layout_side .popupcard {_left:auto;_right:200px;}

/*ポップアップ領域と重なるメニューボタンがIE以外では無効になるのを防ぐため(IE6.7はボタンの間隔が崩れるのでそのまま)*/
#index .all .layout_side .side_menu h3{position: relative;z-index:1;/position:static;}

.popupin {
max-width:300px;_width:300px;margin:40px 200px 0 auto ; _margin-right:0;padding:5px 10px;
line-height:200%;background-color : #393939;border:3px double #C2A858;text-align : center ;}

.popupin2 {
max-width:300px;_width:300px;max-height:200px;_height:200px;overflow: auto;
margin:20px 200px 0 auto ;_margin-right:0;padding:0 1em 0 1.5em;
line-height: 150%;background-color : #393939; border:3px double #C2A858;text-align : left ;
}

.pop_free {
max-width:350px;_width:350px;margin-top:20px;max-height:350px;_height:auto;
line-height:150%;overflow: auto;text-align : left ;
}
#step2 .popupin {margin-top:20px;max-width:350px;_width:350px;}/*MAIN*/
#index #step0 h3,#index #step2 h3{max-width:350px;_width:350px;}

#index .popupcard h3{
color : #fff;background-color :transparent ; font-weight: bold;
max-width:300px;_width:300px;margin:0 200px 0 auto;_margin-right:0;padding : 0px 10px ;
background-image : none; border :none ;text-align : center ;
}

#index .side_menu .popupcard h3{
max-width:300px;_width:300px;margin:0 200px 0 auto;_margin-right:0;padding :0 10px;
background-image : none; border :none ;}


.layout_side .popupin2{_margin-right:0;padding:1em ;}/*上下パディングはカウンター画像の時不要なスクロールを防ぐ為*/

/*以下はポップアップ表示内の画像サイズ調整の為*/
.layout_side .popupin2 img{max-width:90%;height: auto;}
* html body .layout_side .popupin2 img {
_width : expression( this.clientWidth > 280 ? '280px' : 'auto' );/*IE6用*/}


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

名前変換フォーム

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