サイトマップ
可愛いを演出する見出し囲い枠を配置する
サイトはコンテンツは主要なテーマですが、訪れる読者に与えるサイトの
デザインイメージも大事と筆者は理解しております。
記事は読むだけ...そして理解する...でも、次いでプラスアルファがあるなら
それはそれで記憶にとどめられる....後々..あのサイトどこかなと...?
ま、そんな記憶植え付けができるかもしれない...
そんなわけでの....演出効果例...
サイト内に可愛いを演出する見出し囲い枠を配置してみる...
ほんわか？とした暖かさを読者に受け止めていただけるかもしれません
以下例ですが コードをコピーすればすぐ使えます
今回はお勉強です
カスタマイズの方法は解説しません
なぜですかって？
たまには自力でやりましょうよ
とは言うものの....今回は然程の面倒もございません
以下こーピーをシリウス操作画面に張り付けてカラーコードや数値を
書き換えると即座にスタイル変更が確認できるからです
色々とお試しになって、どこをいじると...?
どこがどう変わるかをお試しになられてください
以下コードは基本はすべて同じ...
カラーコードと数値が違うだけ
さあ...弄り回してください
見出し角丸率８％
コピーコード
<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>
見出し角丸率１０％
コピーコード
<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>
角丸角度率１００％スタイル
角丸角度率１００％スタイル
コピーコード
<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
お勉強頑張って下さい
スポンサーリンク
