サイトマップ
ボックス枠のカラー変更はＣＳＳで指定します
2015 0121 2018 0207更新
シリウス機能カスタマイズ デフォルトボックス枠
シリウスに備えある記事や画像を特に主張したいなどの例で印象付ける際に
ボックス枠で囲む...という記事構成は頻繁に使われることと理解しますが、
時にサイトイメージ順応カラーも必要なことでしょうか？
ま、頻繁に行うことでもございませんが、記事レイアウト構築のスキルの
一つとして変更手順を参照ください。
おさらい...(初心者向け..少々）
呼び出しは、記事挿入ウィンドウ上.操作一番左...ボックス枠ボタンポチ...
一番上の通常枠を選択しました。
....見本
....ボックス枠とは記事や画像を事情により囲む枠
....当サイトは、背景が黒なので枠を白にしていますが、通常は白背景
....なので、薄黒...#333です。
ボックス枠は、その他、点線枠とか、灰色背景、黄色背景なども用意され
、それらはすべてスタイルシートで指定された効果を表しています。
それは、ＣＳＳ指定を書き換えればで簡単に変えられるということなんですね
カスタマイズはスタイルシートのお隣commonstyles.cssり行います。
ボックスの項目で表示される指定値一覧...
/* ボックス */
.nmlbox,.dottbox,.ylwbox,.graybg{
padding:15px;
margin-top: 10px;
margin-bottom: 10px;
clear:both;
}
.graybg{
background-color:#EBEBEB;
}
.dottbox{
border:dotted 1px #666;
}
.nmlbox {
border: 2px solid #CCCCCC;
}
.ylwbox {
background-color: #FFFFD2;
border: 2px solid #CC0000;
}
各スタイル別に記載されておりますが....
通常ボックス枠の場合、枠線を細くか太くする程度..
border: 2px solid #CCCCCC;
数値は、枠線の太さ...0.5(細い）でも読み込まれます..
色替えはカラーコード
灰色背景も同じくカスタム
backgroundのカラー変更で背景は変わります
例
今回は、余り使われないと思われる黄色背景のカスタマイズを
してみることにします
黄色背景は以下の記載が指定しています
.ylwbox {
background-color: #FFFFD2;
border: 2px solid #CC0000;
}
以下スタイル
こちらを簡単カスタマイズしてみましょう..
背景ピンクにしてみます..
カラーコードを#FF93FA
background-color: #FFFFD2;
枠線をなしにしてみます..
border: 0px solid #CC0000;
枠を削除しないで..細線にする場合は
1pxとしてください
変更後記述コード（ピンク背景）
.ylwbox {
background-color: #FF93FA;
border: 0px solid #CC0000;
}
カスタム画像
色替えしたり線を細くしたり...色々お試しください...ね
ここでご注意...
スタイルを変更以降、操作画面でボックス枠を選択しても
黄色背景というメニューの文字は変わりませんので忘れずに！
変更が作用されるのは、ＣＳＳを編集したサイトのみで他サイトに
影響はしません。
スポンサーリンク