【SWELL】グローバルメニューのサブメニューを透過させる方法

カテゴリーが増えてくるとサブメニューを活用してグループ分けをすると便利です。

SWELLのサブメニューのデフォルトは不透明のテーマカラーです。

本記事ではcssに追記してグローバルメニューのサブメニューを透過させる方法をご紹介します。

サブメニューの背景色を変更するために追記する追加css

ダッシュボード→カスタマイズ→追加cssに進み次の内容を追記します。

/* グローバルナビサブメニュー */
.c-gnav .sub-menu {
background-color: rgba( 0, 0, 0, 0.6 )
}

追記した結果がこちらです。

背景色が黒で透明度６０％です。

これは追加cssのこの部分「rgba( 0, 0, 0, 0.6 )」で指定しています。

選択する背景色によっては文字色の変更が必要な場合もあるでしょう。

その場合は「color:#〇〇〇」を追記し〇〇〇の部分に任意のカラーを指定すれば文字色の変更も可能です。

/* グローバルナビサブメニュー */
.c-gnav .sub-menu {
color:#〇〇〇
background-color: rgba( 0, 0, 0, 0.6 )
}

このようにすれば文字色も変更できます。

今回背景色の指定に使用したrgba( )とは？

rgba()は、RGBAカラーモデルで色を指定する際に使用します。
RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。
RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定した後に、数値で透明度を指定します。 RGBの色は0-255、または、0%-100%で指定します。透明度は、0（完全に透明）～1（完全に不透明）の数値で指定します。 RGBA値の指定では、RGB値の指定とは異なり #FFFFFF のような16進表記を使用することはできません。
尚、RGBA値をサポートしていないブラウザでは、透明度だけが無視されて単なるRGB値として扱われるのではなく、色指定そのものが認識されずに無効となるので注意してください。
引用元：HTMQ

当サイトではテーマカラーを黒にしているので黒を例にサンプルとして記載します。

サンプルCSS（こちらは追加cssに記載する内容です）

p.sample1 {background-color: rgb(0,0,0);}
p.sample2 {background-color: rgba(0,0,0,1);}
p.sample3 {background-color: rgba(0,0,0,0.5);}
p.sample4 {background-color: rgba(0,0,0,0.1);}
p.sample5 {background-color: rgba(0,0,0,0);}

サンプルHTMLソース（htmlに記載する内容です）

<p class="sample1">背景色に rgb(0,0,0) を指定</p>
<p class="sample2">背景色に rgba(0,0,0,1) を指定、完全に不透明</p>
<p class="sample3">背景色に rgba(0,0,0,0.5) を指定、半透明</p
<p class="sample4">背景色に rgba(0,0,0,0.1) を指定、薄い透明</p>
<p class="sample5">背景色に rgba(0,0,0,0) を指定、完全に透明</p>

上記のようにhtmlで記載すると下記のように表示されます。

背景色に rgb(0,0,0) を指定

背景色に rgba(0,0,0,1) を指定、完全に不透明

背景色に rgba(0,0,0,0.5) を指定、半透明

背景色に rgba(0,0,0,0.1) を指定、薄い透明

背景色に rgba(0,0,0,0) を指定、完全に透明