角丸の枠スペースがごろ介出来たなら　次はシリウスデフォルトスタイルの
記事背景以外　
背景を色彩化しているか　またはオール画像に指定している場合は
角丸枠の記事背景をやや半透明として表現するという手順に進みます

 

角丸枠内を半透明とするとスクロールしても背景の画像が認識でき
せっかく取り込んだ背景画像を読者に違和感なく見て盛られます

 

スポンサーリンク

 

 

---

 

角丸枠内背景を投下する際は　16進法のカラーコードでは
文字や画像まで半透明となり　綺麗な表現になりｍ戦の出
rgbaのカラーコードを使います

 

今回はダークカラー指定で進めておりますが
rgbaのカラーコードをご理解したい方は　ページ巻末で移動サイトを
ご案内しております

 

 

記述コードは二つご案内します

 

こちらは　フォントカラーを背景により指定できるコードです

 

コピー用コード
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);color:#FF0A0A;font-size:14px; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">

 

半透明状態が確認できますか？

 

</div>

 

カスタム

 

枠線のカラー指定記述
border:solid 1px #0ACCFF
1px は枠線の太さ

 

 

 

背景の透明化度合
rgba(0, 0, 0, 0.4)
数値変更で調整

 

 

フォントカラーとフォントサイズを指定します
#FF0A0A;font-size:14px

 

 

角の丸み度合いの調整
border-radius:6px

 

 

---

 

 

二つ目

 

シリウススタイルシートでフォントカラーが指定されている場合

 

こちらにはフォントカラーの指定がありません

 

 

 

こちらのコードをコピー&ペースト
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);;colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">

 

コピーコード

 

</div>

 

 

---

 

背景をグレーにした例

 

背景をグレーにした例を参考にカスタムを覚えましょう

 

 

 

rgbaのグレーコードは
rgba(153, 153, 153, .4);です

 

 

コピーコード
<div style="border:solid 1px #0ACCFF;background: rgba(153, 153, 153, .4);colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">

 

 

灰色半透明状態が確認できますか？

 

</div>

 

---

 

16進法をrgbaコードに変換

 

16進法のカラーコードはネット上に多くの情報があり
解り易いのですが　rgbaのカラーコードというと　何やら記述が
面倒そうで情報も少な目ですが

 

便利なウェブサービスがございますのでご確認ください

 

16進法のカラーコードをrgbaコードに変換するサービス
こちらで
http://j-press.info/16torgba/

 

 

こちらでも変換可能です
http://hp-html.jp/rgba/
使いやすいサービスを利用しましょう

 

 

 

縦サイズは　スペースを空ければ　記事を追加すれば広がります

 

横サイズは　記事カラムに合わせて自動調整

 

フリースペースでも同様で　メニュー枠内で収まります

 

フリースペースでは　スタイル無しを選択してください

 

 

 

 

背景に色彩画像表示している場合は枠内を透過して認識可能にする
シリウスに角丸の囲い枠を組み込み優しさを演出するカスタマイズ
シリウスカスタマイズトップ