今回のナビ導入解説では、ナビ背景を単色及び半透明フィルターでもと
記載しておりますが、ネット上からrgbaコード取り寄せても単色のまま
フィルター化しない...とお便りがございましての補足記事です

 

rgbaコードの所得は、シリウスのカラーコード選定画面で、色の選択メニューでも
取り寄せできるのですが、基本単色ですね

 

で、どうするかというと一部改行するのです

 

例　青の16進法コード
0A15FF

 

rgbaでは以下の記載になりますが、これでは単色のまま

 

rgba(10,21,255,1);

 

半透明にする場合、数値を書き換えるのです

 

最後尾の一つ手前の1を0に

 

最後尾の数値は色の透明度合い　1から９までのいずれかを付け加えます

 

すると、以下になりますのでこの公式を覚えてください
rgba(0,0,255,0.5)

 

記事背景が単色なので透明化に見えませんが、フィルター化しています

 

透明度合いは、当サイトのナビをご覧ください

 

rgbaコードをどのように所得するかですが、上文でシリウス機能でも所得は可能と
言っておりますが、説明が面倒なので変換ツールをご利用ください

 

16進法のコードを張り付ければ所得できますが、単色なので上に習い
改行してください
http://j-press.info/16torgba/

 

 

以下に参照コードおいてます
フォントはＣＳＳで指定してますので、ここでは黒
枠線はご自由に改行してください
透明度合いは最後尾の数値で調整

 

 

 

<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の半透明カラー変換ツールがあれば簡単なのですが、見当たりませんね

 

ベージュ色フィルターは、あのＷＰ販売サイトＴＣＤでよく使っていますね
結構いいテンプレートに..うまく合わせて格好良く...
高級感..女性向けサイトのイメージ演出に良いかな....
しかし、シリウスでも使えるんやと追加した次第

 

ナビ背景を透明化するカラーコードの書き方
CSSで作るスタンダートレベルプルダウンメニュー設定まとめ
トップページ

 

関連ページ

HTML、CSSのみでプルダウン形式を組み込む方法

HTML、CSSのみで作る容易に組み込みできるスタンダートレベルの子メニューがプルダウン形式のスライドメニュー導入方法...

プルダウンスタイルシート指定記述追加編

プルダウンHTMLをスタイルシートでCSS指定し作動させる記述の追加です

ナビの位置を変更するHTML指定

シリウス標準のグローバルナビの出現位置の変更は、HTML改行で簡単に指定が可能です

スクロールで上に隠れたナビが再度出現するＷスライド表示

サイトをスクロールで上に移動して隠れたはずのナビが、再度コンテンツエリアに出現するＷスライド表示ヲ指示するＣＳＳ記述

Gナビ、再出現時、カラー切り替え2重構造指定方法

シリウスに取り付けた、スクロールで隠れたGナビの再出現で、カラーを衣替え、次いでテキストまでも切り替えてしまう2重構造の設定手順。