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

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←ブログを月ごとに違う背景(テンプレート)で表示させる →通常ブログ画面で特定のカテゴリORカテゴリごとに違うランキングバナーや定型文を表示する
 
上記の広告は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
   
 

カスタマイズの備忘録

背景色ランダム表示ソース/タイプ変更他

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←ブログを月ごとに違う背景(テンプレート)で表示させる →通常ブログ画面で特定のカテゴリORカテゴリごとに違うランキングバナーや定型文を表示する
 

<!--背景色ランダム表示のスクリプト(1)ここから-->
<!--not_index_area-->
<script type="text/javascript">
<!--

function randomColor() {
// ランダムに背景色を変更する
var bgc = ["#900000","#000","#008000"];
var n = Math.floor(Math.random() * bgc.length );
document.body.style.backgroundColor = bgc[n];
}
//-->
</script>
<!--/not_index_area-->
<!--背景色ランダム表示のスクリプト(1)ここまで-->

</head>

<body <!--index_area-->onload="hidethem()"<!--/index_area--> id="~">

<!--背景色ランダム表示のスクリプト(2)ここから-->
<!--not_index_area-->
<script type="text/javascript">
<!--
randomColor();
//-->
</script>
<!--/not_index_area-->
<!--背景色ランダム表示のスクリプト(2)ここまで-->



IE6で横スクロールが出ないものは追加

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



横スクロールが消えない場合.naviにwhite-space: nowrap;の指定があれば削除

.navi { white-space: nowrap; }






/* Cタイプのための設定 */
#index .layout_side .side_menu ul
{margin:0;padding:0;list-style-type:none;list-style-image:none;}
#index div.layout_side .side_text ul
{margin:0 0 0 1em;list-style-type:disc;}


entry_text7 small_box IE6用にハックでwidth/height要指定

Gタイプallに第二クラス名追加
<div class="all all-G">

G/Jタイプの設定:
IE6用の背景は#wrapperで画像と高さを指定し表示域(高さ)を拡大
IE6以外はlayout_mainで背景・min-heightを指定し表示域(横幅)を制限

#index #wrapper{
_height:画像の高さ;_overflow:visible;
_background-image : url("アドレス");}

#index div.layout_main{
min-height:画像の高さ;_height:auto;overflow:hidden;
background-image : url("アドレス");
_background-image : none;
}


サイドカラム
表紙以外(通常ブログ・検索・月別ページ)は表示域を制限

表紙はJタイプのみ表示域の制限を解除するために
一旦G/Jタイプの表示域の制限を解除(表示域を拡大)してしから、
改めてIE6のGタイプのみ表示域を指定(IE6以外は画像は自動縮小されるので必用なし)

.layout_side {overflow:hidden;}
#index .all.layout_side {_overflow:visible;}
#index div.all-G .layout_side {_overflow:hidden;}






/*Gタイプ折りたたみ対応用*/
#index .side_menu .side_text2{overflow: auto; height:100px;}

.rireki {text-align:right;}
p.back-top{margin:0;text-align:right;font-size:90%;font-style:italic;}
#titlelist p.back-top{margin:0;}

/* Cタイプのための設定 */
#index .layout_side .side_menu ul{list-style-type:none;margin:0;padding:0;}
#index div.layout_side .side_text ul{list-style-type:disc;margin:0 0 0 1em;}
#index div.layout_side,#index div.layout_main{_overflow:hidden;}

/* Jタイプのための設定 */
#index .all .layout_side,#index .all .layout_main{_overflow:visible;}

/* G タイプのための設定 */
#index div.all-G .layout_side {_overflow:hidden;}


Gタイプlayout_mainで背景を指定して不具合がある場合は#wrapperに設定変更


.plugin_menu{
margin : 10px ;
padding : 0 0 0 0px;width : 180px;_width : 175px;
float : left;overflow: hidden;
}

Cタイプ、コンテナに縦線画像を背景にした場合index_area_boxの背景色を要指定
.index_area_box { clear : both;background-color:#ffffff;border-top:1px solid #900;}

.index_area_box {
overflow: hidden;
}

.index_area_box :after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html .index_area_box {
height: 1em;
overflow: visible;
}
/**/

Sタイプ修正内容


2012.2.22.より作業開始 
① ver1203変更
.small_box {_height:150px;} 追加

② タグエリアの <!--topentry-->~<!--/topentry--> を他タイプと同じソースに差し替え

③ 2/23 ワイド表示設定を変更 1600overのワイド画面パソコンでは右に寄らずほぼ中央表示

#permanent .container {
margin :0 auto 0 15% ;padding : 0 1% 10px 1%; width : 80%;max-width:1000px;}
#permanent .layout_footer {
margin :0 auto 0 15% ;text-align:center;width:80%;max-width:1000px;}

④ 別タイプ変更時の設定を追加

/* Cタイプのための設定 */
#index .layout_side .side_menu ul{list-style-type:none;list-style-image:none;margin:0;padding:0;}
#index div.layout_side .side_text ul{list-style-type:disc;margin:0 0 0 1em;}
#index div.layout_side,#index div.layout_main{_overflow:hidden;}

/* Jタイプのための設定 */
#index .all .layout_side,#index .all .layout_main{_overflow:visible;}

/* G タイプのための設定 */
#index div.all-G .layout_side {_overflow:hidden;}


2012.2.22./2.23. Cタイプ修正内容


① 2/22 サイトナビをRタイプと同じソースに戻す
② 2/23 ワイド表示設定を変更 1600overのワイド画面パソコンでは右に寄らずほぼ中央表示
#permanent .container {
margin :0 auto 0 15% ;padding : 0 1% 10px 1%; width : 80%;max-width:1000px;}
#permanent .layout_footer {
margin :0 auto 0 15% ;text-align:center;width:80%;max-width:1000px;}


2012.2.28. Rタイプ修正内容


ワイド表示設定を変更 1600overのワイド画面パソコンでは右に寄らずほぼ中央表示

① #permanent .container {
margin :0 auto 0 15% ;padding : 0 1% 10px 1%; width : 80%;max-width:1000px;}
#permanent .layout_footer {
margin :0 auto 0 15% ;text-align:center;width:80%;max-width:1000px;}

② #index ,#category ,#tag ,#page ,#date,#search ,#edit {max-width:1400px;}

③ ヘッダー内
#category li.ccc_cat<%cno> a{font-weight:bold;color:#ff0000;}

④ #category div.sub_block {width:180px;}

/*Gタイプ折りたたみ対応用*/
#index .side_menu .side_text2{overflow: auto; height:100px;}


/* Cタイプのための設定 */
#index .layout_side .side_menu ul{list-style-type:none;list-style-image:none;margin:0;padding:0;}
#index div.layout_side .side_text ul{list-style-type:disc;margin:0 0 0 1em;}

#index div.layout_side,#index div.layout_main{overflow:hidden;}

/* Jタイプのための設定 */
#index .all .layout_side,#index .all .layout_main{overflow:visible;}

/* G タイプのための設定 */
#index div.all-G .layout_side {overflow:hidden;}


Jタイプのプラグイン以外のポップアップ領域が阻害されるため、IE6に限らず設定。



スタンダード・J・Sタイプ 記事内リスト設定修正/2012.3.6.


.entry_text2 ul,#page .entry_text ul{margin:20px ;padding-left:20px;}
.entry_text2 ol,#page .entry_text ol{margin:20px ;padding-left:20px;}


  • リストマーク_サンプル
  • リストマーク_サンプル
  • リストマーク_サンプル
  • リストマーク_サンプル

  1. 連番リスト_サンプル
  2. 連番リスト_サンプル
  3. 連番リスト_サンプル
  4. 連番リスト_サンプル


勝手に文字コードが挿入されたせいで、関連エントリーが表示されない
<!--ソース改変が可能であれば、src内のURLを自分でアップロードしたjkl-parsexml.jsのURLに変更してみてください。負荷が分散します。-- charset="euc-jp">




2012.4.28. フルスクリーン仕様のテンプレ修正内容


IE6で背景を固定させる設定
html { _overflow-y: hidden;_overflow-x: scroll;}
body { _height:100%;}
.main { _height : 100% ; _min-height : 100% ; _overflow : auto ; position: relative;}


2012.4.28. スタンダードタイプtempタイプ修正内容


トップページプラグイン3で改行せずに被リンクテキスト類を表示させる。
#index .side_menu a { display : block;}
#index .side_menu .side_text a { display : inline;}
#index .side_menu .popupin2 a { display : inline;}
.side_menu2 a { display : block;}



2012.5.21. スタンダードタイプtempタイプ修正


tempタイプ navi_3 でNovelListが消えてる 
navi_3 と navi_4 のad<%topentry_no> を要削除
<li class="ad<%topentry_no> go-novel delete">

/* G/Jタイプのための設定 */2012.5.11.RevisingNow
hr.bg_line {visibility: hidden;}



IE9以上で消えるfirst-letter背景画像のための設定2012.5.11.RevisingNow2012.6.1.
<meta http-equiv="X-UA-Compatible" content="IE=9" />



/* IE6 小説ページ疑似フレームfタイプのための設定 */2012.5.11.RevisingNow
#permanent div.main2 {margin-left:180px;background-position: 180px top;
_background-position: left top;}
#permanent div.en2_cat0 { background-position: 180px top;
_background-position: left top; }



Rタイプ 通常ブログ画面 アンカーの半角スペースを削除更
<a name="e_end<%topentry_no>" id="e_end<%topentry_no>">&nbsp;</a>
<a name="e_end<%topentry_no>" id="e_end<%topentry_no>"></a>
補足↓



/*コメント&トラックバック:記事*/
.comment-body ,.trackback-body { margin : 0px 0px ;}

/*コメント&トラックバック:テキスト*/
.co_text ,.tb_text { margin : 0px; padding : 10px 20px 0px 20px;}

/*コメント&トラックバック:ステータス*/
ul.co_state ,ul.tb_state {padding : 10px 20px 15px 0px;}




多言語変数対策
月 を 冃 
タグの タ を 夕 (ユウ)へ
日 を 曰く の 曰
ト を 卜占 の 卜

Gタイプ・Cタイプに変更時、コメント・トラックバック一覧の無駄な改行を防ぐため
#index .side_menu .side_text2 a{display: inline;}


ページトップへジャンプするとサイトナビが消える2012.5.31.
検索バーを利用している場合、JGタイプでページ上部にサイトナビが表示されるテンプレでは、ページトップへジャンプするとサイトナビが消える。

原因:消えるのではなく、allをheight:100%に、サイトナビは表示位置をtop:0に設定しているため、ページjを開いた時には検索バーの直下に表示されていても、改めてページトップへジャンプすると、検索バーの下に隠れてしまう

対策:検索バーを利用しない、もしくは、サイトナビ上部に余白を設定する
余白はcontainerもしくはサイトナビにマージンで設定する。但し、テンプレートの背景画像によっては微調整が必要。

.all .container {margin-top:20px;_margin-top:0px;}
.all .navi_1,.all .navi_3{top:20px;}


メタタグ content="IE=9" 設定すると一部のテンプレートの一部のエリアで画面がフリーズする2012.5.30.
原因h1にfirst-letterを設定していたため
対策:IE7~8に適応させるためfirst-letterをh1ではなくlayout_headに設定する
IE以外のブラウザやIE6はハックで調整する


通常ブログ画面で記事下部へのアンカーが効かない場合2012.5.31.

原因:半角スペースを削除したせいか、ブラウザ(IE8)によってはアンカーが無視されてしまう
対策:paddingを設定することで着地点の領域を確保し、認識させる
#page ul.entry_state + a {width:10px;padding:2px;}


リキッドレイアウト覚書


右寄せ、右メニューの一般的なRタイプテンプレをサイドカラム固定、メインカラム可変のリキッドレイアウトに変更する



html{ height:100%;_overflow: hidden;}

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

/*左カラム部分*/
.layout_main {
float : left;width:66%;max-width : 400px;_width : 400px;}

/*サイド部分*/
div.layout_side {
float : right;
width:30%;max-width : 180px;_width : 180px; overflow: hidden;}



/*左カラム部分*/
.layout_main{
float : left;
width:100%;max-width : 600px;_width : 400px;margin-right:-200px;_margin-right:0px;}

.layout_main>* { margin-right:200px;_margin-right:0px;}
#index .topindex ,.entry-body ,.layout_main .entry_text5
{ margin-right:200px;_margin-right:0px;}

/*サイド部分*/
.layout_side {width:180px;float : right;overflow:hidden;}




/*エントリー:1ブロック*/
.entry-body { margin : 0px 0px 30px 0px; }

.entry-body { margin : 0px 200px 30px 0px;_margin-right : 0px ;}


#date .entry-body,#search .entry-body{ margin : 20px 0px 0px 0px;}

#date .entry-body,#search .entry-body{ margin : 20px 200px 0px 0px;_margin-right : 0px ;}


※上以外にも.entry-bodyでマージン0を指定している個所がないかCSSを検索して確認。

※アーカイブページ上部の二つのスタイルを確認。必用に応じて、.entry_text5 と h2 の表示を調整。


※IE=9にしたせいか、横カレンダーが折り返してしまうので、フォントサイズを変更
.line_calendar { font-size:10pt; }⇒.line_calendar { font-size:13px; }

※全ての更新がぶれている場合
.small_box ul {padding-left:2em;}
.small_box ul li{padding-left:0;}

/* =============================================
以下はポップアップ表示のための設定(ver1205)
============================================= */

/*layout_mainや#wrapperで背景を指定しない時*/
hr.bg_line {display:none;}

/*layout_mainや#wrapperで背景を指定する時*/
hr.bg_line {visibility:hidden;}

.popupcard {
width:50%;max-width:400px;_width:400px;right:0;_right:200px;top:250px;
z-index:1; visibility:hidden;position:absolute;
text-align:center;
}

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

.popupin2 {
max-width:300px;_width:300px;max-height:200px;_height:200px;overflow: auto;
margin:20px auto 0 auto ;padding:0 1em 0 1.5em;
line-height: 150%;background-color:#ffffff; 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 .popupcard h3{
color : #900;background-color :transparent ; font-weight: bold;
margin:0 auto ;padding : 0px 20px ;
background-image : none; border :none ;text-align : center ;
}

.layout_side .popupcard { right: 0;background-image :none;margin:0 200px 0 auto;}

.layout_side .popupin2{;padding:1em ;}
.layout_side .popupin2 img{max-width:90%;height: auto;}
* html body .layout_side .popupin2 img {
_width : expression( this.clientWidth > 280 ? '280px' : 'auto' );}


#index .side_menu .popupcard h3{
max-width:300px;_width:300px;margin : 0px auto;padding :0 10px;}

#index .layout_side .side_menu h3{margin-bottom:1px;}

/* =============================================
ポップアップ表示のための基本設定ここまで
============================================= */

.entry_text2 ul,#page .entry_text ul{margin:20px ;padding-left:20px;}
.entry_text2 ol,#page .entry_text ol{margin:20px ;padding-left:20px;}

.normal .未分類{display:block;}

/*GタイプCタイプサイドメニュー折りたたみ対応用*/
#index .side_menu .side_text2{overflow: auto; height:100px;}
#index .side_menu .side_text2 a{display: inline;}

/* Cタイプのための設定 */
#index .layout_side .side_menu ul{list-style-type:none;list-style-image:none;margin:0;padding:0;}
#index div.layout_side .side_text ul{list-style-type:disc;margin:0 0 0 1em;}


/****** 以下は記述順に注意 ****/
/* JGタイプ以外のための設定 */
div.layout_side,div.layout_main{overflow:hidden;}

/* Jタイプのための設定 */
#index .all .layout_side,#index .all .layout_main{overflow:visible;}

/*Gタイプのための設定*/
#index div.all-G .layout_side {overflow:hidden;}

/*IE6用通常ブログ画面画像の自動調整の設定*/
* #page .entry_text img { _width : expression( this.clientWidth > 380 ? '380px' : 'auto' );}



/*一般用サイトマップリンクボタンの設定*/
.layout_side > h2 + div.side_menu > h3.side_menu2 { padding: 0px;line-height : 180%;}

PFタイプ 全ページリキッドレイアウトのための変更個所


HTMLの変更

<!--▽最近の更新履歴-->
<b>+最近の更新+</b>
<div class="block_5 non-java"style="padding : 0 10px;max-width: 380px;_width: 400px;">



スタイルシート


.entry2 { width:auto;max-width:700px; }

#tag .entry { padding : 0;}

.entry5 {max-width:600px;_width:70%;}

#edit .entry5 {
max-width:800px;_width:100%;text-align: left;padding:0 2em;}

textarea#comment{width:100%;_width:95%;height:15em;}


/* 最大幅の指定を .main_frm から .main_box へ変更 */


#permanent .main_box { overflow: hidden; max-width:1200px; }

#index .main_box{ max-width:1200px; }

#page .main_box { max-width:800px;_width : 80% ; overflow: hidden;}

#date .main_box{ max-width:800px;_width : 80% ; }

#search .main_box{ max-width:800px;_width : 80% }

#titlelist .main_box { max-width:1024px;_width:80%;}


/* メインボックス内レイアウト*/

#category .entry_body,#tag .entry_body
{max-width:800px;_width: 80% ;margin : 0 auto; }

#edit .entry_body {max-width:800px;_width: 80% ;margin : 0 auto; text-align: center; }

表紙縮小画面でポップアップ表示部の最小領域を確保
#index .entry_body {min-height: 400px;}

スタイルシートの記述順序に注意!
#index .entryの設定を一つにまとめ、.entryのスペースに記載。

#index .entry {
margin: 0 ;margin-right :1em;
padding: 0 0 10px 0px;font-size:90%;
color:#000000;background-color: transparent;text-align: left;
position:relative;}


/* 表紙ポップアップ*/

.popupcard {width:100%;max-width: 400px;_width: 400px;margin-bottom:2em;}

.pop_free {max-height:180px;_height:180px;
padding:10px;margin:20px 15px 20px 25px;
_padding-bottom:40px;}



/* JavaScript無効時の表示*/

.java-off_intro { max-width:600px;_width:600px;}

.non-java ,.non-java2 { max-width: 380px;_width: 400px;}


#index .navi_bottom {_bottom:1em; }



注意!
PFタイプ、IE6では右寄せにすると、縮小した時、横スクロールが表示されず、領域外を閲覧できなくなるため、IE6はハックで左寄せ仕様にする。


アニメ顔文字はてななぜかIE8では position right が効かない模様。right:0;で指定しも左寄せになってしまう。

親ボックス #index .entry {position:relative;}
祖先ボックス #index .main_frm{position:relative;}

親ボックスの#index .entry を position:absolute; で指定しても変化なし。
以前は右によっていたので追加したメタタグのせいかも。

PFタイプノーマル仕様変更


  1. 全記事一覧ページ左フレーム内HTMLを変更
  2. ページIDを変更。date_area と search_areaをそのまま使う。
  3. 矢印画像を変更


一般用
<!--not_date_area--><!--not_search_area--><body id="<!--not_edit_area--><!--not_permanent_area--><!--not_titlelist_area-->page<!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_edit_area--><!--permanent_area-->permanent<!--/permanent_area--><!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area-->"><!--/not_search_area--><!--/not_date_area-->
<!--date_area--><body id="date"class="date1 date2"><!--/date_area-->
<!--search_area--><body id="search"class="search1 search2"><!--/search_area-->


一般用仕様変更に合わせ、小説用のボディIDとスタイルシートの一部修正追加
小説用
<!--not_date_area--><!--not_search_area--><body id="<!--index_area-->index<!--/index_area--><!--permanent_area-->permanent<!--/permanent_area--><!--category_area-->category<!--/category_area--><!--tag_area-->tag<!--/tag_area--><!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area--><!--page_area--><!--not_index_area-->page<!--/not_index_area--><!--/page_area-->"><!--/not_search_area--><!--/not_date_area-->
<!--date_area--><body id="date" class="date1"><!--/date_area-->
<!--search_area--><body id="search" class="search1"><!--/search_area-->


矢印アイコン
img.arrow{vertical-align: text-bottom;}


背景色によっては画像に影を追加設定
#page .introduction img.arrow{
box-shadow:3px 0px 5px -1px #000,inset 0px 3px 3px #000,inset 0px -3px 3px -1px #000;}
#date .introduction img.arrow,#search .introduction img.arrow
{box-shadow:3px 0px 3px -1px #0000aa;}
div.ori{white-space: nowrap;}


一般用に変更した際、date_area と search_areaをそのまま生かすため、
コメントボックスの表示指定を変更。

#page .entry の設定に #page h2+.entry7を追加

/* 通常ブログ画面エントリーと一般用変更時カテゴリ・タグページ上部リスト*/

#page .entry ,#page h2+.entry7 {
margin : 0 0 20px 0 ;
padding : 0 2em 2em 2em ;
color: #fff;background-color: transparent;
font-size : 90% ;
line-height : 180% ;letter-spacing: normal;background-image: url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/black40.png");
_background-color: #505050;_background-image:none;}



#date .entry7,#date .entry7 を h2+.entry に変更

.entry7{
color: #000;background-color: #F5F5F5;
padding: 0 1em ;
line-height: 160%;font-size : 90%;
margin: 0 0 2em 0 ;
font-weight : normal;background-image:none;
}

h2+.entry7 {
color: #fff;_color: #333;
padding: 2em ;
line-height: 160%;font-size : 90%;
margin: 0 0 2em 0 ;
font-weight : normal;
background-color: transparent;
background-image: url("http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/silver40.png");
_background-color: #DCDCDC;_background-image:none;
}



左フレーム・スクロールバーの透明化


.left_frm {
scrollbar-base-color: #000099;
scrollbar-face-color:#000099;
scrollbar-darkshadow-color:#000099;
scrollbar-track-color:#000099;
scrollbar-arrow-color:#C2A858;

filter: chroma(color=#000099);

/*IE6用*/
_scrollbar-base-color: #000;
_scrollbar-face-color:#000;
_scrollbar-darkshadow-color:#000;
_scrollbar-shadow-color: #C2A858;
_scrollbar-arrow-color: #C2A858; }



フィルターを左フレーム内で使用している場合、併用するとトラブルので、.left_box にposition:relativeを追加
.left_box {position:relative}

Rタイプ表紙ページテキストの影付け



Rタイプはフリースペースなし

<!-- ▽ メインカラム表紙ページ -->
<!--index_area-->

<div class="topindex">

<!-- ▼ ▼フリースペース▼▼ -->
<div class="entry_free">
<h2>ご案内</h2>
<p class="free entry_text"><%introduction>
<br /><br /></p>
</div>
<!-- ▲ ▲フリースペース ▲▲-->


<h3 class="top">最近の更新</h3><br />
<div class="entry_text7">
~ 中略 ~
</div>


<div class="rireki">全ての更新履歴(月別)▼</div><div class="js_close small_box">
~ 中略 ~
</div>

<!--rcomment--><!--not_edit_area--><!--/rcomment-->
<h4 class="top">  ▼ 最近のコメン卜 ▼</h4>
<div class="js_close">
<div class="entry_text7 cotr">
~ 中略 ~</div></div>
<!--rcomment--><!--/not_edit_area--><!--/rcomment-->

<!--rtrackback--><!--not_edit_area--><!--/rtrackback-->
<h4 class="top">  ▼ 最近の卜ラックバック ▼</h4>
<div class="js_close">
<div class="entry_text7 cotr">~ 中略 ~</div></div>
<!--rtrackback--><!--/not_edit_area--><!--/rtrackback-->

</div>
<!--/index_area-->



縮小画面で左背景とテキストがかぶる場合を想定して以下のセレクタに影を付ける.
IEはフィルタを使うので幅を指定する必用あり。

#index .introduction, .entry_free, h3.top,.rireki
白背景の場合
{filter: glow(color=#ffffff, strength=3);
text-shadow: 0px 0px 1px #fff,
0px 0px 3px #fff,
0px 0px 6px #fff,
0px 0px 9px #fff; }

黒背景の場合
{filter: glow(color=#000000, strength=3);
text-shadow: 0px 0px 1px #000,
0px 0px 3px #000,
0px 0px 6px #000,
0px 0px 9px #000; }


h3.top と .small_box は背景色を指定

IE8正式版のみ適用するCSSハック

html>/**/body p { color /*\**/: blue\9 }

複数のプロパティ指定は以下

html>/**/body p { color /*\**/: blue\9; font-size: 20px\9;}



2012.9.4.



IE6 tempタイプ JGタイプ変更時の設定
画像に合わせてカラムの最小の高さを指定する場合、#index .all #warpper{_height:〇〇px;}で指定してもIE6では効かないため、IE6用に.layout_side で指定する
#index .all .layout_side {_height:600px!important;}

IE6 JS無効時のための設定
#index .all div.layout_side .side_text {_overflow:hidden;_width:200px;}
#index .all .entry_text7,#index .all .small_box {background-color : #fff;}
関連記事
スポンサーサイト
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
   
  ↑記事冒頭へ  
←ブログを月ごとに違う背景(テンプレート)で表示させる    →通常ブログ画面で特定のカテゴリORカテゴリごとに違うランキングバナーや定型文を表示する

名前変換フォーム

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