• MENU●●●●
  • 可愛いを演出する見出し囲い枠を配置して楽しもう


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


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

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

     

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

     

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

     

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

     

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

     

     

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

     

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

     

    なぜですかって?

     

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

     

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

     

     

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

     

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

     

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

     

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

     

     

    見出し角丸率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

     

     

    お勉強頑張って下さい

     

    スポンサーリンク

     

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト