• MENU●●●●
  • reba値カラーコード半透明化メニューで文字を見やすくする方法


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

    関連記事


     スポンサーリンク

    reba値カラーコードで半透明化メニュー背景を指定する

    2014 1225 2107 0704更新
    シリウススライドカスタマイズテーマ 記事内に透明背景ボックスを配置

     

    当該コンテンツは上部ページ....
    背景画像のスライドショー 自動ループ フェードイン設定方法に付随する
    延長解説となります

     

    お隣の関連ページでも解説しておりますが、サイト背景をスライド化など
    画像化仕様に設定しますと場合、画像の色彩事情によりますが、
    文字カラーと背景カラーが混同して文字が見ずらくなる事がございます..

     

    その際は、文字色変更で済むことでしょうともお隣で解説済みなんですが、
    背景カラーに影響されない...文字を認識しやすいようにするために
    半透明背景のボックス枠を配置して見やすくするという方法がございます

     

    半透明背景としてreba値カラーコードを使い半透明化背景を記事内で
    表示させます

     

    reba値のカラーコード背景の良いところは背景のみが半透明化しても 
    文字や画像には影響しないということです

     

    reba値のカラーコード背景の表示方法としては半透明化しないという
    指定方法もございますので含めて説明します

     


     

    表現方法はスタイルシートで表現スタイルを指定して...
    記事内にdiv要素で記事枠を囲うという手順です

     

    スタイルシートで指定しておけばシリウスの記事内、各ページとも
    どこでも反映することが出来ます

     

     

    最初にスタイルシートに記述するコードですが意味をご理解ください

     

    #sirius {
    width: 550px;
    margin: 0 auto;
    padding: 20px 10px 20px 10px;
    background: #FFF;
    background: rgba(255, 255, 255, 0.85);
    }

     

     

     

    こちらのコードは半透明指定しております
    background: rgba(255, 255, 255, 0.85);

     

    0.85を除けば メニュー枠は半透明化しません

     

    0.85は 透過度調整指定で 数値を低くすれば 
    さらに透過度を増します

     


     

    取り付けるには二つの工程があります
    詳細をご確認ください

     

    以下コードを取り付けるページに貼り付けます

     

     

     

    <div id="sirius">
    文字を書く
    文字を書く
    </div>

     

    IDはsiriusにしておりますが 替えることは可能です
    その際は スタイルシート呼び出し指定も同じに変えてください

     

     

    つぎに
    以下コードをスタイルシートの一番下あたりに貼り付けてください

     

    #sirius {
    width: 550px;
    margin: 0 auto;
    padding: 20px 10px 20px 10px;
    background: #FFF;
    background: rgba(255, 255, 255, 0.85);
    }

     

     

    以上で反映は確認いただけます
    背景が単色では認識できないので、後ろに女の子のフォトがある位置まで
    スクロールするとご理解いただけます

     

    文字を書く
    文字を書く
    siriusukasutamaizu
    シリウスカスタマイズ テキスト   テキスト    テキスト  
    シリウスカスタマイズ
    画像もOK

     

     

     

    カスタムをご覧ください

     

    フォントカラーはスタイルシートで指定されておりますが 
    シリウス文字装飾機能で好みのカラーを選択してください

     

    width: 550px 横幅です
    サイトの記事カラムサイズに合わせて変更してください
    3カラムなら 中央幅を意味します

     

    padding: 20px 10px 20px 10px;は文字位置ですが
    当サイトの掲載の例に合わせています

     

    background: #FFF; カラーコードです

     

    background: rgba(255, 255, 255, 0.85);
    rgbaのカラー指定です

     

    0.85画透過度指定

     

     

    複数のカラーをサイト内で配置することが出来ます

     

    文字を書く
    文字を書く

     

     

     

     

     

    以下の記述ではidを指定しています
    div id=sirius

     

    スタイルシートでも同じく指定しておりますね
    #sirius

     

    個別にカラーを使い分ける場合は....

     

    ID別に複数の指定コードを作成してスタイルシート内に配置します

     

    呼び出しはサイトのどこかのページで 好みのカラーで指定したidで
    <div id="sirius">
    文字を書く
    文字を書く
    </div>
    記述すれば良いだけです

     

     

     

    他のカラーを使用したい方はrgbaのカラーコードをご覧ください

     

    RGB値カラーコード表

     

     

    スポンサーリンク

     

     

    reba値カラーコード半透明化指定方法
    サイト背景をスライド化にした場合のカスタム例
    背景画像のスライドショー 自動ループ フェードイン設定方法
    シリウスカスタマイズ

    reba値カラーコード半透明化メニューで文字を見やすくする方法関連解説
    サイト背景をスライド化カスタム例と文字認識をし易くするフィルター
    シリウスのサイト背景を全体表示とする際の工程と次なる障害、文字が認識ずらくなるへの対処法をフィルター仕様を含め複数まとめ解説しています
    シリウスに背景画像スライドsupersized導入の際の障害
    シリウスに背景画像をスライド出来るsupersizedを導入致しますと シリウス機能が一部使えなくなりす ご報告と対処法
    シリウスにスクリプトを多く導入するとsupersizedが不作動
    シリウスにサイト背景スライドスクリプトsupersizedは導入以降 他のスクリプトの増加に伴い 不作動となることもございます その際の対処法は

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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