スポンサー広告

元のデザインテンプレートで記事をご覧になる場合は

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
 ←novel-temp-star 銀河鉄道テンプレート →【改定版 簡単カスタマイズ】特定の個別記事ページの背景を変更する(カテゴリ別も可能)
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


総もくじ  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 スポンサーサイト
ランキングに参加中
click 素材専門検索サイトsozai-R にほんブログ村 ブログブログ ブログテンプレートへ 0574 Web Site RankingWebサイト作成支援系nnr.gif
*Edit
   
 

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

元のデザインテンプレートで記事をご覧になる場合は

【改定版 簡単カスタマイズ】特定のカテゴリの目次の背景を変更する

 Temlplate Image : カスタマイズの難易度5 
関連カスタマイズ :カスタマイズの難易度5 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
 ←novel-temp-star 銀河鉄道テンプレート →【改定版 簡単カスタマイズ】特定の個別記事ページの背景を変更する(カテゴリ別も可能)
 
hosi5.gifカスタマイズの難易度5

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

以前、特定のカテゴリの目次の背景画像を変更するカスタマイズをご紹介しましたが、ご紹介した方法では、コンテンツの容量が画面領域内におさまり、フッター下部に空白ができる場合は、その背景は変更されず、元の背景が表示されてしまうという事に最近気づきました。また、フッター下に空白がなく、ページ全域の背景が変更できた場合でも、それはカラムの外側だけであり、カラムの内側を変更するためには、ご自力でカスタマイズしていただく必要がありました。

不具合に気がついて後、色々調べてみましたが、先日、ようやく、コンテンツの容量にかかわらず、ページ全域の背景を変更できる方法がみつかりました。また、この機会に、HTML部分にも、背景を変更する場合に必要なカスタマイズを予め施して、改訂致しましたので、以前に比べて、カスタマイズがかなり簡単になったと思います。

まだ全てのタイプのテンプレートの改訂が済んだわけではないのですが、間をおくと、管理人が忘れてしまいそうなので、とりあえず、解説記事だけ先にアップします。

2010.7.1.現在、novel-10タイプ・novel-Wタイプ以外のテンプレートは、背景画像の変更のためのタグが実装済み改訂済みです。本日以前にDLなさった方で、このカスタマイズを行う場合は、ご面倒ですが、再度のDLをお願い致します。(表紙なしの一般ブログテンプレートはこのカスタマイズの需要があると思えませんので、現在も今後も実装予定はありません)

HTML部分には予め、必要なカスタマイズを施してありますから、あとは、スタイルシートに変更後の背景を設定を追加するだけです。以下の例をご参考に、お好みのスタイルに指定した上で追加してください。
スタイルシートの具体的な記述方法や、その内容についての説明は省きますが、背景画像・背景色・文字色・リンク色などは、カスタマイズの基本ですから、ハウツー系サイト様など簡単に調べられます。
ご不明な部分はご自力で御調べいただき、ご質問等ご容赦ください。

以下のカスタマイズは折りたたんでありますので、背景を変更する際の諸条件を順守してくださる場合のみご覧ください。
ここをクリックしてください▼


カテゴリの番号の確認


最初に背景画像を変更したいカテゴリの番号を確認します。カテゴリ番号は[カテゴリの編集]画面のカテゴリ一覧リストの一番左、# をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。

カスタマイズの概要


カテゴリ番号を含むクラス名で指定した、変更後のスタイルを設定し、それをスタイルシートに追加します。

例にある赤い太字の数字カテゴリ番号になります。
#category .cat_bg2 { color : #ffffff ; }

クラス名の他の部分はそのまま、赤い数字を背景を変更するカテゴリ番号に変更し、例をご参考に、個々のケースに合わせて変更したい内容でスタイルを設定してください。

テンプレートのタイプによって、また変更前と変更後の背景色の差異によって、カスタマイズする内容が違ってきますのでご注意ください。


スタイルシートに追加する際の注意点


スタイルシートに追加する際、クラス名の前のドットやID名とドットの間の半角スペース を忘れたり、、逆に、記載内容のどこかに全角スペースが入ってしまうとカスタマイズした内容がテンプレートに反映されなくなります。コロン:セミコロン;も間違えやすいので、ご注意ください!
#category .cat_bg2 { color : #ffffff ; }
#category .cat_bg2 { color : #ffffff ; }
#category .cat_bg2 { color : #ffffff ; } 

同じスペースでも、半角スペースなら問題ないのですが、全角スペースが記載内容のどこかに入ってしまうと カスタマイズした内容がテンプレートに反映されません。
#category .cat_bg2 { color : #ffffff ; }
☆ カスタマイズの前にはコピーをとりましょう!コピーのとり方は こちら  

テンプレートのカスタマイズ


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


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

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

ページ全体の設定(novel-PF・PF2・Rタイプ以外)


最初にページ全体を変更した背景で表示させるための設定を追加します。疑似フレームテンプレート(novel-PFタイプ・novel-PF2タイプ)とnovel-Rタイプは既に設定済みですので不要ですが、それ以外のテンプレート(novel-Sタイプ・novel-templateスタンダードタイプ・novel-tempタイプ)の場合は、以下をスタイルシートに追加してください。(特定の個別記事ページの背景変更のためのカスタマイズで既に以下をスタイルシートに追加した方はそれでOKです。)

html { height : 100% ; _overflow: hidden; }
body { height : 100% ; }
body > .main { height : auto; }
.main { height : 100% ; min-height : 100% ; overflow : auto ; }



但し、上の設定を追加すると、縮小画面(ボックスの指定幅以下)で閲覧した場合限定ですが、縦スクロールが二本表示され、普通であれば表示される横スクロールは、内側の縦スクロールを一番下まで下げないと現れなくなります。

少々不便ですが、追加しないと、フッターより下に空白がある場合、その部分は変更した背景が表示されず、他のカテゴリと同じ背景で表示されてしまいます。ツートンになってもいいから、縮小画面で縦スクロールが二本表示されるのを避けたいという場合は追加しなくてOKです。

以下はカテゴリ番号2 の「銀河鉄道の夜」の目次ページの背景を変更する場合の例です。
2を、それぞれ、背景を変更したい特定のカテゴリの番号に変更して、変更する設定を追加してください。

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


novel-PF・PF2タイプ以外のテンプレートでは、カラムの外側の背景だけを変更する場合と、ページ全体を同じ背景に変更する場合で追加する内容が違います。

カラムの外側の背景を変更する場合



変更前と変更後の背景色が同じ場合


/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;
}



カラムの外側の背景だけを変更する場合、変更後の背景色が変更前と同じ場合は上だけでOKですが、変更後の背景画像が、フッター部分にかぶり、著作権表示が不明瞭になった場合は、以下に述べる、著作権表示の文字とリンク色も変更してください。

変更後の背景色が違う場合

白から黒へなど、違う色に変更する場合は、上の設定に背景色の指定を追加し、なお且つ、画面下部(フッター部分)に表示されるコピーライト部分の文字色・リンク色も変更します。コピーライト部分に表示されるFC2広告が非表示、もしくは不明瞭な場合、「広告の適正な表示を阻害する規約違反行為」と判断され、最悪、ブログの一時利用停止や、アカウント(ID)削除もあり得ますので、ご注意ください。

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;

background-color: #000000; /* 背景色(黒)*/
}



/* 著作権表示広告:文字色*/
#category .cat_bg2 div.copy { color : #ffffff ; }

/* 著作権表示広告:文字色(白)・リンク色(金⇒赤・白背景)*/
#category .cat_bg2 div.copy a:link , #category .cat_bg2 div.copy a:visited {
color : #ffcc66 ; background-color : transparent ; text-decoration : none ; }
#category .cat_bg2 div.copy a:hover , #category .cat_bg2 div.copy a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }




カラムの外側の背景だけ変更した例 変更前コチラ変更後のサンプル  


novel-R-Weddingのように、目次リストがテーブル画像で囲まれている場合は、カラム外側の背景と著作権のリンク色の変更だけできれいに表示されますが、Rタイプで目次リストの背景に半透明の透過画像が設定されているテンプレートの場合、背景色をDL時と違う色に変更すると、肝心の目次に並ぶ記事タイトルが見え辛くなる場合があります。 
その場合は、リスト部分の画像を無効にするため、以下を追加します。

#category .cat_bg2 ul { background-image : none ; }



ページ全体の背景を変更する場合


カラムの外も中もページ全体の背景を変更する場合は、著作権表示も含む、カラム内全ての要素の文字色、背景色などの変更をまとめて指定します。

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;

background-color: #000000; /* 背景色(黒)*/
color: #ffffff; /* 文字色(白)*/

}

/* カラム内の要素(見出し・ブロック・段落・リスト・上下余白)の指定をまとめて変更して設定*/
#category .cat_bg2 h1,#category .cat_bg2 h2,#category .cat_bg2 h3,
#category .cat_bg2 div, #category .cat_bg2 ul, #category .cat_bg2 li, #category .cat_bg2 p{
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/

border : none ; /* 枠線の取り消し*/
padding-top : 0 ;padding-bottom : 0 ;/* 上下余白なし(novel-Rタイプは不要)*/
}

/* リンク設定:文字色(金)背景(透明)⇒文字色(赤)背景(白)*/
#category .cat_bg2 a:link , #category .cat_bg2 a:visited {
color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#category .cat_bg2 a:hover , #category .cat_bg2 a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }


上下余白をなしにする設定0はnovel-Rタイプでは不要ですが、その他のは変更画面をみながら数値を調整してください。

ページ全体の背景を変更した例 変更前コチラ変更後のサンプル  

疑似フレームテンプレート(novel-PF・PF2タイプ)の場合


疑似フレームテンプレート(novel-PF・PF2タイプ)は、カラムの外だけ背景を変更してもデザイン的に意味をもちませんので、最初から、ページ全体の背景を変更します。

/* カラムの外側*/
#category .cat_bg2 {
background-image : url("画像アドレス");
background-repeat : repeat ;
background-position : left bottom;
background-attachment : fixed;
color: #ffffff; /* 文字色(白)*/
background-color: #000000; /* 背景色(黒)*/

}

/* カラム内の要素(見出し・ブロック・段落・リスト)の設定*/
#category .cat_bg2 h1,#category .cat_bg2 h2,#category .cat_bg2 h3,
#category .cat_bg2 div, #category .cat_bg2 ul, #category .cat_bg2 li, #category .cat_bg2 p{
color : #ffffff ; /* 文字色(白)*/
background-color : transparent ; /* 背景色(透明)*/
background-image : none ; /* 背景画像(なし)*/

}

/* リンク設定:文字色(金)背景(透明)⇒文字色(赤)背景(白)*/
#category .cat_bg2 a:link , #category .cat_bg2 a:visited {
color : #C2A858 ; background-color : transparent ; text-decoration : none ; }
#category .cat_bg2 a:hover , #category .cat_bg2 a:active {
color: #900000 ; text-decoration : none ; background-color : #ffffff ; }



疑似フレームテンプレートで、ページ全体の背景を変更した例 コチラコチラ

更新 】 をクリックする。



カスタマイズを簡単にするために、例ではページ内の要素をまとめて指定していますが、個々の要素別、あるいは特定のクラス名別に設定することも可能です。

#category .cat_bg2 div.copy {color : #ffffff ;}


#category .cat_bg2 の後ろに半角スペースをあけ、ピンク色の部分に要素名、その後は今度はスペースを空けずに、ドットをおいて青色の部分にクラス名を入れて指定します。

細かく設定変更したい場合は、上を参考にご自力で調整してください。





関連記事
スポンサーサイト
総もくじ 3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
総もくじ 3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
総もくじ 3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
総もくじ  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 【改定版 簡単カスタマイズ】特定のカテゴリの目次の背景を変更する
ランキングに参加中
click 素材専門検索サイトsozai-R にほんブログ村 ブログブログ ブログテンプレートへ 0574 Web Site RankingWebサイト作成支援系nnr.gif
   

~ Trackback ~

トラックバックURL


この記事にトラックバックする(FC2ブログユーザー)

  ↑記事冒頭へ  
←novel-temp-star 銀河鉄道テンプレート    →【改定版 簡単カスタマイズ】特定の個別記事ページの背景を変更する(カテゴリ別も可能)

名前変換フォーム

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