• MENU ●●●●
  • 見出しの付いたボックス枠取り付け解説


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    見出し付ボックス枠取り付け

    見出しの付いた囲い枠ボックススタイルは、一つの箱枠でしたらシリウス機能
    のテーブルを改良すれば形だけは同じようなものを作れますが、それはそれ.
    ..デフォルトの範囲....?

     

    個性を含めた趣向を入れ込むならややの自己努力?作業は必要..でしょう

     

    そこで今回は外部よりの記述コードを採用してすぐにご利用頂けるスタイルを
    用意いたしました

     

    各部スタイルDEMOにつずいて形成する記述コードを追加おります

     

    カラー変更などされる方は支持の箇所を参考にカスタマイズしてください

     


     

    記述は途中折れしておりますが シリウスに張り付ければ整列します

     

    当ページはブラック背景ですので、フォントカラーはホワイト指定
    #FFFFFFとしていますが、デフォルト背景がホワイトの場合は
    文字が同色化して認識できません
    当サイトは背景が黒なので#333では認識不能........

     

    あなたのサイト背景は白、#FFF...多分?
    ですので....
    シリウスデフォルトのフォントカラー#333に書き換えてください

     

    横サイズは記事カラムサイズに自動調整....合わされます

     

    スポンサーリンク

     

     


     

     

    以下はどちらも同じ記述です

     

    見出しの横サイズは 文字数に合わされ自動で延長するのです

     

     

    シリウスカスタマイズテキストに合わせて横延長します

    シリウステキストⅠ
    シリウステキスト2

     

     

    文字数少なめ例

    シリウステキストⅠ
    シリウステキスト2

     

     

    コピー用コード シリウスに張り付けてすぐご利用頂けます

     

    <font style="padding:6px 10px; background:#0A15FF; color:#ffffff; font-weight:bold;">シリウスカスタマイズテキストに合わせて横延長します</font><div style="border:1px solid #0A15FF; padding:10px; font-size:14px; margin-top:2px;">
    シリウステキストⅠ
    シリウステキスト2
    </div>

     

    カスタマイズ

     

    見出しの横サイズは 文字数により記事カラム幅まで自動延長します

     

    見出しの背景カラーを指定しています
    自由に書き換えてください
    background:#0A15FF

     

    見出しのフォントカラー指定
    color:#FFFFFF;

     

    枠線の幅
    border:1px

     

    枠線のカラー
    solid #0A15FF;

     

    フォントサイズ
    font-size:0.9em;

     

    見出しのフォントカラーは切り替えができますが

     

    見出し以下のテキストフォントカラーは 枠内が記事背景なので
    シリウスで指定しているフォントカラーが適用されます

     

     


     

    角丸の見出し

     

    角丸

     

    siriusタイトル


    シリウス
    カスタマイズ

     

     

    コピーコード カスタマイズは上記例参照
    <span style="padding:6px 10px; background:#0A15FF; color:#ffffff; font-weight:bold; border-radius: 10px;">siriusタイトル</span><div style="border:1px solid #0A15FF; padding:10px; font-size:0.9em; margin-top:2px; border-radius: 10px;">
    シリウス
    カスタマイズ
    </div>

     

     


     

    シャドウ

     

     

    シャドウバージョン

     

    シャドウ確認

     

    記述コードは上下2分割しています
    スペースを空けないと見出しがテキスト枠に食い込んでしまいます

     

     

    <div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#0A15FF; color:#d2b48c; font-weight:bold;border-radius:5px;"><strong>シャドウバージョン</strong></span>
    </div>

     

    <div style="border: #FF0A0A 1px double; padding: 20px; background-image:linear-gradient(#f0f8ff,#ffffe0); margin: 5px; color: #ffffff; border-radius: 10px; box-shadow: 5px 5px 5px #00C5C5">
    シャドウ確認
    </div>

     

     


     

     

    下行コード

     

    上記コードの場合 下枠内のフォントカラーは指定が可能です
    以下の箇所で変更化 シリウスデフォルトでお使いになる際は
    #333としてください
    color: #ffffff

     

     

    シャドウのカラー指定
    box-shadow: 5px 5px 5px #00C5C5>

     

    枠線のカラーと枠線の太さ
    border: #FF0A0A 1px

     

    3pxの例ですが枠線が3重となるのです

    シャドウ確認

     


     

     

     

    見出しと下枠が同一枠

     

    テキスト背景指定有り

    siriusタイトル

    シリウス
    シリウス

     

     

    コピーコード
    <div style="background-image:linear-gradient(#f7d7e4,#eca6b3,#de5c70,#d94057);background-color:#FF0AF3;border:1px solid #ffffff;padding-left:10px;font-size:14px;border-top-left-radius:6px;border-top-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 7px 7px 7px #AAA;"><font style="color:#ffffff; font-weight:bold">siriusタイトル</font></div><div style="background:#000000;border:1px solid #834EFF;padding:10px;font-size:14px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;margin-right: 10px;box-shadow: 7px 7px 7px #AAAAAA;">
    シリウス
    シリウス
    </div>

     

     

    見出し背景カラー
    ground-color:#FF0AF3;

     

    見出しの枠線
    border:1px solid #ffffff

     

    見出しシャドウ
    #AAA

     

    シャドウカラー
    #AAAAAA

     

    枠線カラー
    solid #834EFF

     

    フォントサイズ 見出し テキストとも同サイズにしてますが
    切り換えは好みに合わせてください
    font-size:14px

     

    フォントカラー
    color:#ffffff;

     


     

    テキスト背景無

     

    siriusタイトル

    シリウス
    シリウス

     

     

    コピーコード

     

    <div style="background-color:#FF0AF3;border:1px solid #FF0AF;padding-left:10px;font-size:14px;border-top-left-radius:6px;border-top-right-radius:6px;width: auto;margin-right: 8px;box-shadow: 6px 6px 6px #AAA;"><font style="color:#ffffff; font-weight:bold">siriusタイトル</font></div><div style="border:1px solid #834EFF;padding:10px;font-size:14px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;width: auto;margin-right: 10px;box-shadow: 7px 7px 7px #AAAAAA;">
    シリウス
    シリウス
    </div>

     

     

     

    ま、こんなところでしょうか?
    では、ここで終わります..さいなら.......

     


     

     

    見出しの付いたボックス枠取り付け解説記事一覧

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

    サイトはコンテンツは主要なテーマですが、訪れる読者に与えるサイトのデザインイメージも大事と筆者は理解しております。記事は読むだけ...そして理解する...でも、次いでプラスアルファがあるならそれはそれで記憶にとどめられる....後々..あのサイトどこかなと...?ま、そんな記憶植え付けができるかもし...

    ≫続きを読む

     

     

     

     

    見出しの付いたボックス枠取り付け解説
    シリウスカスタマイズトップ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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