ナビの背景カラーをrgbaコードで半透明にする
今回のナビ導入解説では、ナビ背景を単色及び半透明フィルターでもと
記載しておりますが、ネット上からrgbaコード取り寄せても単色のまま
フィルター化しない...とお便りがございましての補足記事です
rgbaコードの所得は、シリウスのカラーコード選定画面で、色の選択メニューでも
取り寄せできるのですが、基本単色ですね
で、どうするかというと一部改行するのです
例 青の16進法コード
0A15FF
rgbaでは以下の記載になりますが、これでは単色のまま
rgba(10,21,255,1);
青色 単色
半透明にする場合、数値を書き換えるのです
最後尾の一つ手前の1を0に
最後尾の数値は色の透明度合い 1から9までのいずれかを付け加えます
すると、以下になりますのでこの公式を覚えてください
rgba(0,0,255,0.5)
記事背景が単色なので透明化に見えませんが、フィルター化しています
青色フィルター
透明度合いは、当サイトのナビをご覧ください
rgbaコードをどのように所得するかですが、上文でシリウス機能でも所得は可能と
言っておりますが、説明が面倒なので変換ツールをご利用ください
16進法のコードを張り付ければ所得できますが、単色なので上に習い
改行してください
http://j-press.info/16torgba/
以下に参照コードおいてます
フォントはCSSで指定してますので、ここでは黒
枠線はご自由に改行してください
透明度合いは最後尾の数値で調整
黒色フィルター
<div style="border:solid 1px #000000;background: rgba(0, 0, 0, 0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
黒色フィルター
</div>
藍色フィルター
<div style="border:solid 1px #000000;background: rgba(0,51,102,0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
藍色フィルター
</div>
青色フィルター
<div style="border:solid 1px #000000;background: rgba(0,0,255,0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
青色フィルター
</div>
ベージュ色フィルター
<div style="border:solid 1px #000000;background: rgba(222,219,160,0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
ベージュ色フィルター
</div>
トロピカル系フィルター
<div style="border:solid 1px #000000;background: rgba(0,165,197,0.5);;colo; padding:2px; border:1px solid #000000; border-radius:1px;:0px 1px 0px 0px;">
トロピカル系フィルター
</div>
rgbaの半透明カラー変換ツールがあれば簡単なのですが、見当たりませんね
ベージュ色フィルターは、あのWP販売サイトTCDでよく使っていますね
結構いいテンプレートに..うまく合わせて格好良く...
高級感..女性向けサイトのイメージ演出に良いかな....
しかし、シリウスでも使えるんやと追加した次第
ナビ背景を透明化するカラーコードの書き方
CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
トップページ
関連ページ
- HTML、CSSのみでプルダウン形式を組み込む方法
- HTML、CSSのみで作る容易に組み込みできるスタンダートレベルの子メニューがプルダウン形式のスライドメニュー導入方法...
- プルダウンスタイルシート指定記述追加編
- プルダウンHTMLをスタイルシートでCSS指定し作動させる記述の追加です
- ナビの位置を変更するHTML指定
- シリウス標準のグローバルナビの出現位置の変更は、HTML改行で簡単に指定が可能です
- スクロールで上に隠れたナビが再度出現するWスライド表示
- サイトをスクロールで上に移動して隠れたはずのナビが、再度コンテンツエリアに出現するWスライド表示ヲ指示するCSS記述
- Gナビ、再出現時、カラー切り替え2重構造指定方法
- シリウスに取り付けた、スクロールで隠れたGナビの再出現で、カラーを衣替え、次いでテキストまでも切り替えてしまう2重構造の設定手順。