背景カラーのCSS指定手順
ワイドヘッダーをボディスライドで上重ねするカスタマイズを施工した際のこと
何かしらの事情でデフォルトのホワイト背景を変更する必要に迫られることも
あろうかと思いますが、通常の指定と若干異なりますので参照として追記して
おります
記事を書くメインカラムは、スタイルシートで、#contents
では、サイト背の景なんですが、もう一つのレイアウト枠を拡張しているので
実際は、通常のサイト背景といわれる、backgroundはいじらないのです
で、指定は拡張したレイアウト枠、#layoutboxでカラー変更します
記事台紙、ボディを色替えする場合、
ステップ1とステップ3の記述内の2か所で
background-color: #FFF; のカラーコードを書き換えてください
記事台紙とレイアウト内の両方を同じ色で合わせてください
以下記述ですが、原本は #FFF 白指定です
background-color: #FBFAEE;
記事台紙
ここから
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: auto;
background-color: #FBFAEE;
}
/* レイアウト枠 */
#layoutbox{
background-color: #FBFAEE;
overflow: hidden;
padding: 5px 10px;
}
レスポンシブ構造なので、これだけでは足りずなので
メディアコード内も書き換えてください
@media screen and (max-width: 1000px) {
#layoutbox{
margin: 0 auto;
padding: 0px 0 50px;
position: relative;
background-color: #FBFAEE;
width: 100%;
}
}
ここまで
個別ページのカラー指定
単独で、一つの、または複数でもよいのですが、エントリーPに限りのこと
スタイルシートでCSS指定しておけばどう反映していますが、事情により
いずれかのページだけ背景カラーを変えたい、もしくは複数のページでランダムにと
する場合は、上級者設定、スタイルの割り込みにCSS指定するだけで変更が
可能です
スタイルシートに書き入れる際は、以下記述を用いてください
カラーコードだけは好みに書き換えてくださいね
ここから
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: auto;
background-color: #834EFF;
}
/* レイアウト枠 */
#layoutbox{
background-color: #834EFF;
overflow: hidden;
padding: 5px 10px;
}
@media screen and (max-width: 1000px) {
#layoutbox{
margin: 0 auto;
padding: 0px 0 50px;
position: relative;
background-color: #834EFF;
width: 100%;
}
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: 100%;
background-color: #834EFF;
}
}
ここまで,,,文字は削除してください
お叱りがございました
パソコンで確認すると、何度CSS書き換えてもサイト両サイドは色変わりするが
記事背景が変わらんと...画面を狭めれば変わるそうです
項目の/* レイアウト枠 */の記述ですが、レイアウト枠と記載していたのですね
/* */ で囲まないと読み込みがなされず反映不能
気が付きませんで大変失礼いたしました
関連ページ
- ヘッダーとボディの重なりをスライド化させる(デフォルトサイズ)
- ボディスライドでヘッダーをオーバースクロールする視差効果をシリウスのデフォルトサイズに設定する方法
- ワイドヘッダー拡張設定に視差効果を含めるカスタマイズ
- シリウスの標準規格ヘッダー画像のサイズをワイド化設定し、ボディと重なりをずらしスライド効果を指定する方法