シリウス機能ではボックス枠が操作指定で簡単に設置できますね
その項目の中には角丸枠もございます

 

シリウスのスタイルは直線的が多い中での角丸枠は　イメージを
柔らかく優しさを打ち出せるので　読者の受け止めるサイトの評価も
向上するのではないか？と

 

ネット検索するとそんな構築のウェブサイトお見かけします

 

 

シリウス記事内　もしくはフリースペース内で　角丸の囲い　枠を
表現することは　CSS指定のため　サイト全体で同じスタイルになって
しまい　異なるイメージを同サイト内で大幅に表すにはやや不便ですが

 

手動で単独でスタイルを個別に表現すれば　様々な角丸の囲い枠が
サイト内で表現できます

 

手動は面倒？とはお考えにならないでくださいね

 

記載するコードは用意してありますので　コピーして記事内に張り付けるだけ

 

変化を指定するカスタマイズ説明も含めています

 

 

ＤＥＭＯ

 

 

 

コピーする記載コード

 

---

 

<div style="background:#000000; padding:10px; border:1pxsolid #4ECCFF; border-radius:10px;">

 

記事本文テキスト

 

</div>

 

---

 

枠内背景カラー

 

当サイトは黒背景なので認識しやすいよう枠内背景も　　カラーコードで
指定しております

 

記述
background:#000000;

 

記事背景がデフォルトの白の方は

 

#000000を

 

スタイルシートで指定されている #F5F5F5;か

 

もしくは　好みのカラーに書き換えてください

 

 

 

フォントカラー

 

フォントカラー　文字色はシリウスのスタイルシートで指定カラーが
適用されます

 

 

 

枠線の太さ

 

枠線の太さを指定します
border:1px

 

 

 

枠線の色

 

枠線の色を指定します
solid #4ECCFF;

 

 

 

 

丸み度合い

 

角丸の鋭角度　数値を大きくすると丸みが増す
border-radius:10px

 

 

すぐ使える角丸コードまとめ

 

シリウスですぐ作用が確認できる　その他の記述例で加工可能な
枠記述コードをまとめています

 

コードは折れていますが　コピーしてシリウス記事内に張り付ければ
整列します

 

 

枠のみ表示　背景はなし

 

 

記述コード
<div style="padding:10px;border-radius: 5px;border: 1px solid #ff0000;">枠内の記事テキスト
コピーして貼り付け　すぐ使えます
</div>

 

 

---

 

 

 

 

二重枠

 

コピー記述コード

 

<div style="padding:10px;border-radius: 10px; border: 5px double #4ECCFF;">コピーして
シリウスに張り付け
</div>

 

 

枠線の色は　#4ECCFFの箇所を変更すれば切り換えられます

 

シリウスのデフォルト指定は＃３３３で　黒に近い色の枠線です

 

---

 

 

 

点線枠

 

 

コピーコード
<div style=" padding:10px; border-radius: 10px; border: 2px dotted #4ECCFF;">
枠内の記事テキスト
シリウス
</div>

 

---

 

 

点線枠内背景を色彩表示する

 

背景色指定
background:#FF93FA
を追加します

 

 

コピーコード
<div style="background:#FF93FA;padding:15px;border:3px dotted #4ECCFF;border-radius:10px;">枠内テキスト</div>

 

---

 

 

 

シャドウ枠

 

 

コピーコード
<div style="background-image:linear-gradient(#dd4a5c,#e4707e,white,#e4707e,#dd4a5c); padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #4ECCFF;">枠外にシャドウ枠プラス</div>

 

---

 

 

シャドウ枠　背景色彩表示プラス

 

上記コードに以下コードを追加します
background-color:#840AFF;

 

 

コピーコード
<div style="background-image:linear-gradient(#dd4a5c,#e4707e,white,#e4707e,#dd4a5c);background-color:#840AFF; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">シリウス点線背景</div>

 

 

---

 

角丸を指定しているのは以下のコードです
border-radius:10px

 

角角枠にborder-radius:10pxコードを入れ込むことで角丸へ切り替える
事もできます

 

記述は　カラーコードや数値を変えると変化が確認できます

 

色々と切り換えてどのように変わるかをお試しください

 

何度も試して見ることでいろんなことが知恵となるのですね

 

また　知恵は次なるステップの応用ともなりえます

 

 

 

横サイズは記事カラムに合わせ自動調整ですが　特定に指定する場合
はこちらを参考に改良してください
メニューテキストボックス枠の横幅を変更指定する｜シリウスカスタマイズ

 

関連する情報としてサイドバー見出しを角丸に切り替える
ご案内もあるので　興味がございましたらご参考にしてください
シリウスサイトメニュー見出しをやさしくする角丸カスタマイズ

 

スポンサーリンク

 

 

 

 

シリウスに角丸の囲い枠を組み込み優しさを演出するカスタマイズ
シリウスカスタマイズトップ