見出しの付いた囲い枠ボックススタイルは、一つの箱枠でしたらシリウス機能
のテーブルを改良すれば形だけは同じようなものを作れますが、それはそれ.
..デフォルトの範囲....?

 

個性を含めた趣向を入れ込むならややの自己努力？作業は必要..でしょう

 

そこで今回は外部よりの記述コードを採用してすぐにご利用頂けるスタイルを
用意いたしました

 

各部スタイルＤＥＭＯにつずいて形成する記述コードを追加おります

 

カラー変更などされる方は支持の箇所を参考にカスタマイズしてください

 

---

 

記述は途中折れしておりますが　シリウスに張り付ければ整列します

 

当ページはブラック背景ですので、フォントカラーはホワイト指定
#FFFFFFとしていますが、デフォルト背景がホワイトの場合は
文字が同色化して認識できません
当サイトは背景が黒なので＃３３３では認識不能........

あなたのサイト背景は白、#FFF...多分？
ですので....
シリウスデフォルトのフォントカラー＃３３３に書き換えてください

 

横サイズは記事カラムサイズに自動調整....合わされます

 

スポンサーリンク

 

 

---

 

 

以下はどちらも同じ記述です

 

見出しの横サイズは　文字数に合わされ自動で延長するのです

 

 

シリウスカスタマイズテキストに合わせて横延長します

 

 

文字数少なめ例

 

 

コピー用コード　シリウスに張り付けてすぐご利用頂けます

 

<font style="padding:6px 10px; background:#0A15FF; color:#ffffff; font-weight:bold;">シリウスカスタマイズテキストに合わせて横延長します</font><div style="border:1px solid #0A15FF; padding:10px; font-size:14px; margin-top:2px;">
シリウステキストⅠ
シリウステキスト２
</div>

 

カスタマイズ

 

見出しの横サイズは　文字数により記事カラム幅まで自動延長します

 

見出しの背景カラーを指定しています
自由に書き換えてください
background:#0A15FF

 

見出しのフォントカラー指定
color:#FFFFFF;

 

枠線の幅
border:1px

 

枠線のカラー
solid #0A15FF;

 

フォントサイズ
font-size:0.9em;

 

見出しのフォントカラーは切り替えができますが

 

見出し以下のテキストフォントカラーは　枠内が記事背景なので
シリウスで指定しているフォントカラーが適用されます

 

 

---

 

角丸の見出し

 

角丸

 

siriusタイトル

 

 

コピーコード　カスタマイズは上記例参照
<span style="padding:6px 10px; background:#0A15FF; color:#ffffff; font-weight:bold; border-radius: 10px;">siriusタイトル</span><div style="border:1px solid #0A15FF; padding:10px; font-size:0.9em; margin-top:2px; border-radius: 10px;">
シリウス
カスタマイズ
</div>

 

 

---

 

シャドウ

 

 

 

 

記述コードは上下2分割しています
スペースを空けないと見出しがテキスト枠に食い込んでしまいます

 

 

<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#0A15FF; color:#d2b48c; font-weight:bold;border-radius:5px;"><strong>シャドウバージョン</strong></span>
</div>

 

<div style="border: #FF0A0A 1px double; padding: 20px; background-image:linear-gradient(#f0f8ff,#ffffe0); margin: 5px; color: #ffffff; border-radius: 10px; box-shadow: 5px 5px 5px #00C5C5">
シャドウ確認
</div>

 

 

---

 

 

下行コード

 

上記コードの場合　下枠内のフォントカラーは指定が可能です
以下の箇所で変更化　シリウスデフォルトでお使いになる際は
#３３３としてください
color: #ffffff

 

 

シャドウのカラー指定
box-shadow: 5px 5px 5px #00C5C5>

 

枠線のカラーと枠線の太さ
border: #FF0A0A 1px

 

3ｐｘの例ですが枠線が3重となるのです

 

---

 

 

 

見出しと下枠が同一枠

 

テキスト背景指定有り

 

 

コピーコード
<div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);background-color:#FF0AF3;border:1px solid #ffffff;padding-left:10px;font-size:14px;border-top-left-radius:6px;border-top-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 7px 7px 7px #AAA;"><font style="color:#ffffff; font-weight:bold">siriusタイトル</font></div><div style="background:#000000;border:1px solid #834EFF;padding:10px;font-size:14px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;margin-right: 10px;box-shadow: 7px 7px 7px #AAAAAA;">
シリウス
シリウス
</div>

 

 

見出し背景カラー
ground-color:#FF0AF3;

 

見出しの枠線
border:1px solid #ffffff

 

見出しシャドウ
#AAA

 

シャドウカラー
#AAAAAA

 

枠線カラー
solid #834EFF

 

フォントサイズ　見出し　テキストとも同サイズにしてますが
切り換えは好みに合わせてください
font-size:14px

 

フォントカラー
color:#ffffff;

 

---

 

テキスト背景無

 

 

 

コピーコード

 

<div style="background-color:#FF0AF3;border:1px solid #FF0AF;padding-left:10px;font-size:14px;border-top-left-radius:6px;border-top-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold">siriusタイトル</font></div><div style="border:1px solid #834EFF;padding:10px;font-size:14px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;margin-right: 10px;box-shadow: 7px 7px 7px #AAAAAA;">
シリウス
シリウス
</div>

 

 

 

ま、こんなところでしょうか？
では、ここで終わります..さいなら.......

 

 

 

見出しの付いたボックス枠取り付け解説
シリウスカスタマイズトップ