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>

 

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

 

 

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

 

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

 

 

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

 

 

 

 

カスタムをご覧ください

 

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

 

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で
<div id="sirius">
文字を書く
文字を書く
</div>
記述すれば良いだけです

 

 

 

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

 

RGB値カラーコード表

 

 

スポンサーリンク

 

 

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