TOP

可愛いを演出する見出し囲い枠を配置する

サイトはコンテンツは主要なテーマですが、訪れる読者に与えるサイトの
デザインイメージも大事と筆者は理解しております。

 

記事は読むだけ...そして理解する...でも、次いでプラスアルファがあるなら
それはそれで記憶にとどめられる....後々..あのサイトどこかなと...?

 

ま、そんな記憶植え付けができるかもしれない...

 

そんなわけでの....演出効果例...

 

サイト内に可愛いを演出する見出し囲い枠を配置してみる...
ほんわか?とした暖かさを読者に受け止めていただけるかもしれません

 

 

以下例ですが コードをコピーすればすぐ使えます

 

今回はお勉強です
カスタマイズの方法は解説しません

 

なぜですかって?

 

たまには自力でやりましょうよ

 

とは言うものの....今回は然程の面倒もございません

 

 

以下こーピーをシリウス操作画面に張り付けてカラーコードや数値を
書き換えると即座にスタイル変更が確認できるからです

 

色々とお試しになって、どこをいじると...?
どこがどう変わるかをお試しになられてください

 

以下コードは基本はすべて同じ...
カラーコードと数値が違うだけ

 

さあ...弄り回してください

 

 

見出し角丸率8%

 

枠のタイトル見出し?????
テキスト
テキスト

 

 

コピーコード
<fieldset style="padding:5px; font-size:1em;border:2px solid #FF0AF3;width: auto; margin-right: 1px; box-shadow: 5px 5px 5px #0AFFFF;"><legend style="margin-left:0px; padding:6px 10px;background-image:linear-gradient(to right,#ff1493,#ff1493,white);background-color: #FF0AF3; color:#ffffff; font-weight:bold;box-shadow: 5px 5px 5px #0AFFFF;text-shadow:1px 1px 3px #000;border-radius:8px;"><strong>枠のタイトル見出し?????</strong></legend>
テキスト
テキスト

 

</fieldset>

 


 

見出し角丸率10%

 

枠のタイトル見出し?

 

テキスト
テキスト

 

 

コピーコード
<fieldset style="padding:10px; font-size:1em;border:2px solid #0AFFCC;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #FF0AF3;"><legend style="margin-left:8px; padding:6px 10px;background-image:linear-gradient(to right,#ff1493,#ff1493,white);background-color: #0AFFCC; color:#ffffff; font-weight:bold;box-shadow: 5px 5px 5px #FF0AF3;text-shadow:1px 1px 3px #000;border-radius:10px;"><strong>枠のタイトル見出し?</strong></legend>

 

テキスト
テキスト
</fieldset>

 

 


 

 

 

角丸角度率100%スタイル

 

枠のタイトル見出し?

 

テキスト
テキスト

 

 

 

 

角丸角度率100%スタイル

 

コピーコード

 

<fieldset style="padding:10px; font-size:1em;border:2px solid #FF0AF3; C;width: auto; margin-right: 6px; box-shadow: 10px 10px 10px #0A4FFF;"><legend style="margin-left:8px; padding:6px 10px;background-image:linear-gradient(to right,#ff1493,#ff1493,white);background-color: #FF0AF3; color:#ffffff; font-weight:bold;box-shadow: 10px 10px 10px #0A4FFF;text-shadow:1px 1px 10px #000;border-radius:100px;"><strong>枠のタイトル見出し?</strong></legend>

 

テキスト
テキスト
</fieldset>

 

 

角丸角度率は以下コードです
border-radius:100px

 

 

お勉強頑張って下さい

 

スポンサーリンク

 

 

 

可愛いを演出する見出し囲い枠を配置して楽しもう!
見出しの付いたボックス枠取り付け解説
シリウスカスタマイズトップ