サイトマップ
記事の背景を変更
シリウスのサイトオプションでサイト背景に、フォト及びデザイン形式を設定した場合で、
記事の背景が基本白台紙で適合しているなら問題ないのですが、
事情により色合わせが必要になることもあります
どんなことか？...ですね
ウェブ検索していると、記事背景がサイト背景含めてすべてフォト画像とか
もしくは、デザイン形式の背景画像
はたまた、背景と同じカラーではないものの、違和感のない記事背景で
構築されている、サイトを見かけることもあるかと思います
通常背景に画像を読み込むと以下のスタイルですね
サイト背景がフォト画像、でも極端なカラーが打ち出されると記事背景が
白ですと見た目センスがフィットしませんね
で、そんな場合はデフォルト以外の各種の組み合わせをスタイルシートで
ＣＳＳ指定により色合わせを適合するよう組み合わせます
まずはスタイルシートへ
組み合わせと選択の考え
最初のご注意
記事背景により、フォントカラーも変えねばならない場合
記事台紙のカラーにより、現在のフォントが認識しにくくなるという理由で
フォントのカラー変更を覚えときましょう
以下のcolor: #333333;で、フォントのカラーコード書き換え
==================================================
基本スタイル
==================================================
*/
body {
background-color: #ebebeb;
border-top: 4px solid #999999;
color: #333333;
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
}
サイト背とは景同色ではないが、準じたカラーに変更する
以下の個所に到達して
background-color: #ＦＦＦ;ここのカラーコード変更で合わせます
全体
==================================================
*/
/* レイアウト
==================================================
*/
#wrapper {
overflow: hidden;
text-align: center;
}
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: 1000px;
background-color: #ＦＦＦ;
}
#layoutbox{
background-color: #ＦＦＦ;ここのカラーコード変更
overflow: hidden;
padding: 5px 10px;
}
背景の画像そのまま表示する全体表示
記事背景を透明化すると下階層の画像が全体に表示されます
上段説明のカラーコードを透明コードに書き換えます
transparent
＃はいりません、書き換え例
background-color: transparent;
他組み合わせは、後ほど追加します
関連ページ
- サイト背景画像がＰＣ画面で寸足らずでもＣＳＳでフィットする方法
- シリウスにサイト背景を入れたものの、寸足らずでスペースが開いてしまう。画像の拡張では、画質の劣化を招く。そんな場合はＣＳＳ指定でフィットする方法がございます
- サイト背景をデバイス別に切り替える方法
- シリウスのレスポンシブサイトの背景をＰＣとスマートフォンではフォントの認識具合により切り替えることも必要。では、切り替える方法をご案内します
- 背景をノンスクロール指定
- シリウスレスポンシブテンプレートでサイト背景をノンスクロール指定、固定化するＣＳＳ追加をご案内します
