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


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

    スポンサー広告

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

    角丸の囲い枠を組み込み優しさを演出する手順

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

     

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

     

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

     

     

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

     

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

     

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

     

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

     

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

     

     

    DEMO

     

     

    記事本文テキスト

     

     

     

    コピーする記載コード

     


     

    <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の箇所を変更すれば切り換えられます

     

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

     


     

     

     

    点線枠

     

    枠内の記事テキスト
    シリウス

     

    コピーコード
    <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コードを入れ込むことで角丸へ切り替える
    事もできます

     

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

     

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

     

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

     

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

     

     

     

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

     

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

     

    スポンサーリンク

     

     

     

    シリウスに角丸の囲い枠を組み込み優しさを演出するカスタマイズ記事一覧

    背景に色彩画像表示している場合は枠内を透過して認識可能にする

    角丸の枠スペースがごろ介出来たなら 次はシリウスデフォルトスタイルの記事背景以外 背景を色彩化しているか またはオール画像に指定している場合は角丸枠の記事背景をやや半透明として表現するという手順に進みます角丸枠内を半透明とするとスクロールしても背景の画像が認識できせっかく取り込んだ背景画像を読者に違...

    ≫続きを読む

     

     

     

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

     

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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