TOP

カラーボックスコードまとめ

カラーボックスは、枠あり、なし、背景色あり、なしといろんな表示法がございます
シリウス機能でも数種は読み込みできますが、時として定番以外のデザインを
演出したいこともあるでしょう

 

カラーボックスを読み込む術は、HTMLコードのみの単独、もしくはスタイルシートで
CSS指定するの2種がございますが、HTMLコードのみですと環境により
反映されない、もしくはずれが生じることもあるのでCSS指定を含めるコードに
まとめます

 

追加として、シリウス機能で使えるユーザー定義ボックス枠の改変例を巻末に
置いています


 

 

 

div コードは、class名です

 

使う際は、数値のみCSS記述に変えてください

 

<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;
}

 


 

背景を透過するコード

 

以下は、シリウス機能で表示されるユーザー定義ボックスを改良したもので
CSSなしでも取り付けできます
ただし、単色背景(白とか)では透過はしていても認識できません

 

背景を画像やデザイン設定にしている場合のみ透過は認識できます

 

 

通常の角角枠

記事

 

<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>

 

 

ユーザー定義ボックスでの色付けは、操作画面で容易に設定できますので、
ここでの解説は省きます

 

 


 

サイズを指定する

 

上段のCSSでは、横幅は記事カラムのサイズに自動で合わせられますね
ですが、サイズを指定することもできます

 

横サイズ 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様のサイトを一部ですが、参考にさせて
頂きました
ありがとうございました

 

 

カラーボックスCSSコード
トップページ