TOP

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は導入以降 他のスクリプトの増加に伴い 不作動となることもございます その際の対処法は