• MENU ●●●●
  • シリウス機能 ボックス枠カラーのCSS指定変更手順


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

    スポンサー広告

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

    ボックス枠のカラー変更はCSSで指定します

    2015 0121 2018 0207更新
    シリウス機能カスタマイズ  デフォルトボックス枠

     

    シリウスに備えある記事や画像を特に主張したいなどの例で印象付ける際に
    ボックス枠で囲む...という記事構成は頻繁に使われることと理解しますが、
    時にサイトイメージ順応カラーも必要なことでしょうか?

     

    ま、頻繁に行うことでもございませんが、記事レイアウト構築のスキルの
    一つとして変更手順を参照ください。

     

    おさらい...(初心者向け..少々)

     

    呼び出しは、記事挿入ウィンドウ上.操作一番左...ボックス枠ボタンポチ...
    一番上の通常枠を選択しました。

     

     

    ....見本
    ....ボックス枠とは記事や画像を事情により囲む枠

     

    ....当サイトは、背景が黒なので枠を白にしていますが、通常は白背景
    ....なので、薄黒...#333です。

     

     

    ボックス枠は、その他、点線枠とか、灰色背景、黄色背景なども用意され
    、それらはすべてスタイルシートで指定された効果を表しています。

     

    それは、CSS指定を書き換えればで簡単に変えられるということなんですね

     

    カスタマイズはスタイルシートのお隣commonstyles.cssり行います。

     

    ボックスの項目で表示される指定値一覧...

     

    /* ボックス */

     

    .nmlbox,.dottbox,.ylwbox,.graybg{
    padding:15px;
    margin-top: 10px;
    margin-bottom: 10px;
    clear:both;
    }

     

    .graybg{
    background-color:#EBEBEB;
    }

     

    .dottbox{
    border:dotted 1px #666;
    }
    .nmlbox {
    border: 2px solid #CCCCCC;
    }
    .ylwbox {
    background-color: #FFFFD2;
    border: 2px solid #CC0000;
    }

     

     

    各スタイル別に記載されておりますが....
    通常ボックス枠の場合、枠線を細くか太くする程度..

     

    border: 2px solid #CCCCCC;
    数値は、枠線の太さ...0.5(細い)でも読み込まれます..
    色替えはカラーコード

     

     

    灰色背景も同じくカスタム
    backgroundのカラー変更で背景は変わります

     


    今回は、余り使われないと思われる黄色背景のカスタマイズを
    してみることにします

     

     

    黄色背景は以下の記載が指定しています

     

     

    .ylwbox {
    background-color: #FFFFD2;
    border: 2px solid #CC0000;
    }

     

    以下スタイル

     

    こちらを簡単カスタマイズしてみましょう..

     

    背景ピンクにしてみます..
    カラーコードを#FF93FA
    background-color: #FFFFD2;

     

     

    枠線をなしにしてみます..
    border: 0px solid #CC0000;

     

    枠を削除しないで..細線にする場合は
    1pxとしてください

     

     

    変更後記述コード(ピンク背景)

     

    .ylwbox {
    background-color: #FF93FA;
    border: 0px solid #CC0000;
    }

     

    カスタム画像

     

     

    色替えしたり線を細くしたり...色々お試しください...ね

     

     

    ここでご注意...

     

    スタイルを変更以降、操作画面でボックス枠を選択しても
    黄色背景というメニューの文字は変わりませんので忘れずに!

     

    変更が作用されるのは、CSSを編集したサイトのみで他サイトに
    影響はしません。

     

    スポンサーリンク

     

     

    シリウス機能BOX枠のカラースタイルCSS変更カスタマイズ
    シリウスカスタマイズトップ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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