カラーボックスコードまとめ
カラーボックスは、枠あり、なし、背景色あり、なしといろんな表示法がございます
シリウス機能でも数種は読み込みできますが、時として定番以外のデザインを
演出したいこともあるでしょう。
カラーボックスを読み込む術は、ＨＴＭＬコードのみの単独、もしくはスタイルシートで
ＣＳＳ指定するの2種がございますが、ＨＴＭＬコードのみですと環境により
反映されない、もしくはずれが生じることもあるのでＣＳＳ指定を含めるコードに
まとめます。
追加として、シリウス機能で使えるユーザー定義ボックス枠の改変例を巻末に
置いています。
div コードは、class名です..
使う際は、boxナンバー数値をＣＳＳ記述で変えてください...
フォント、背景カラーは、コード書き換えで調整します...
<div class="demo-box-1"> ここにテキストを書く</div>
シンプルボックス
まずは背景色だけ書き換えれば、好みに選択できるシンプルボックスです
以下をスタイルシートに張り付けてください
.demo-box-1 {
background-color: #ddd;
margin: 2em 0;
padding: 2em;
}
囲み枠
2重の囲み枠を付けたボックス
.demo-box-2{
border: 2px double #ddd;
margin: 2em 0;
padding: 2em;
}
見出しに使えるかも？
左横に縦ボーダーを配置
.demo-box-3 {
background-color: #eee;
border-left: 8px solid #eee;
color: #eee;
margin: 2em 0;
padding: 2em;
}
外枠をもう一つ
背景に色付けして周りに下地を出して再度かくもおしゃれなデザイン
.demo-box-4 {
background-color: #cafbce;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #cafbce;
color: #0a8915;
margin: 2em 0;
padding: 2em;
}
ずれを見せる
2段表示で立体感を表す
.demo-box-5 {
background-color: #fff;
margin: 2em 0;
padding: 2em;
position: relative;
z-index: 1;
}
.demo-box-5::before,
.demo-box-5::after {
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
.demo-box-5::before {
background-color: rgba(255, 255, 255, .5);
left: 0;
top: 0;
z-index: -1;
}
.demo-box-5::after {
background-color: #a4f5c8;
top: 5px;
left: 5px;
z-index: -2;
}
.demo-box-5 {
background-color: #fff;
margin: 2em 0;
padding: 2em;
position: relative;
z-index: 1;
}
.demo-box-5::before,
.demo-box-5::after {
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
.demo-box-5::before {
background-color: rgba(255, 255, 255, .5);
left: 0;
top: 0;
z-index: -1;
}
.demo-box-5::after {
background-color: #a4f5c8;
top: 5px;
left: 5px;
z-index: -2;
}
角に丸みをつける
radius:8px; 丸みコードを付け加えております
border:1px solid #ddd; border-radius:8px;
border記載がなければ書き足す
あれば改行します
数値を小さくすると角が小さくなり、大きくすると丸みが増します
.demo-box-7 {
background-color: #ddd;
border:1px solid #ddd; border-radius:8px;
margin: 2em 0;
padding: 2em;
}
背景を透過するコード
以下は、シリウス機能で表示されるユーザー定義ボックスを改良したもので
ＣＳＳなしでも取り付けできます
ただし、単色背景（白とか）では透過はしていても認識できません
背景を画像やデザイン設定にしている場合のみ透過は認識できます
通常の角角枠
記事
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.2);;colo; padding:10px; border:1px solid #0ACCFF; ">
記事
</div>
角に丸みをつけた例
記事
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.2);;colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">
記事
</div>
ユーザー定義ボックスでの色付けは、操作画面で容易に設定できますので、
ここでの解説は省きます
サイズを指定する
上段のＣＳＳでは、横幅は記事カラムのサイズに自動で合わせられますね
ですが、サイズを指定することもできます
横サイズ width:200px;
縦サイズ height:100px;
の、サイズ指定を書き足すことで反映されます
HTMLソース例
<div class="samplea" >ボックスサイズの算出</div>
CSS
div.samplea {
width:200px;
height:100px;
margin:5px; padding:10px; border:1px solid black;
background-color:#eee;
}
反映確認
ここでの解説は、naifix.com様のサイトを一部ですが、参考にさせて
頂きました
ありがとうございました