背景CSS変数一覧
「背景カスタマイズ」で紹介したコピペCSSの解説です。CSS知識がある人向け。
「全画面背景画像CSS」のパターンAが規定値です。オプション設定なしの、一番ノーマル。ぼかしなし。
おすすめ背景画像「Grainy gradient」は、このパターンAと「webフォント11パターン」のフォントセット「Noble」に加えて、サイト名の字間と小文字変換も調整しています。
一番上のCSSはこうなっています↓
これらの変数を組み合わせたのがパターンB〜Jの9パターンです。
パターンBは↑の基本セットに加えて、以下を記述
タイトルと本文コンテンツの背景をきつめにぼかしています。ぼかしただけなので、色変更はしていません。なんとなく背景画像の色味に添ったぼかしになります。
おすすめ背景画像「Pressed flowers」は、このパターンBです。
パターンC1/C2は↑の基本セットに加えて、以下を記述
かなり背景画像が透けます。公式テーマ側で
パターンC1のほうには以下が追記してあります
サイトトップのサイト名は変にぼかさず、あえて背景画像に馴染ませたい場合があると思ったので、パターンC1とC2に分けています。
パターンDは↑の基本セットに加えて、以下を記述
コントラスト高めのくっきりはっきりした写真などを想定しています。サイト名まわりのぼかし有無でD1とD2に分けています。
おすすめ背景画像「Dried flowers」はパターンDです。
パターンEは↑の基本セットに加えて、以下を記述
かなり背景画像が透けます。公式テーマ側で
サイト名まわりのぼかし有無でE1とE2に分けています。
パターンFは↑の基本セットに加えて、以下を記述
高コントラストな写真を想定しています。
サイト名まわりのぼかし有無でF1とF2に分けています。
おすすめ背景画像「Sweets」はパターンKです。
明るく透明感のある写真は
そのうえで
おすすめ背景画像「Mirror」はこのパターンで調整しました。
調整がうまくいくと、すごくおしゃれな全画面背景画像になると思います。
同じ理屈で、ほんのり落ち着いた色合いの写真は
背景画像側にフィルターをかけられるような変数も用意しています。
実際のフィルター例を見せるのが分かりやすいかと思います↓
「Sweets」は彩度を下げています
「Dried flowers」はコントラストを下げて、ドライフラワーの陰影をほんのり明るくしています。写真全体の色合いに統一感があり、窓から差し込む光の加減をできるだけ残したかったので、フィルターは控えめにしてあります。
「Ornaments」はしっかりフィルターをかけています。今回はコントラストは下げない方向で、全体を薄くして赤みを足しています。オリジナルよりもやわらかい色合いになったと思います。
「Mirror」はガチガチにフィルターをかけまくりました。
こんな感じで、CSSフィルターだけで、写真の印象を思い通りに調整できます。
最後に参考URLを置いておきます↓
filter - CSS: カスケーディングスタイルシート | MDN
基本セット
「全画面背景画像CSS」のパターンAが規定値です。オプション設定なしの、一番ノーマル。ぼかしなし。
おすすめ背景画像「Grainy gradient」は、このパターンAと「webフォント11パターン」のフォントセット「Noble」に加えて、サイト名の字間と小文字変換も調整しています。
A 背景を透過させる
:root {
--filter-white: contrast(0.3) brightness(160%) blur(10px);
--filter-light: contrast(0.4) brightness(140%) blur(5px);
--filter-dark: contrast(0.55) blur(5px);
--filter-black: contrast(0.3) brightness(80%) blur(10px);
--filter-hidden: blur(100px);
}
body::before,
.wrapper::before, .wrapper::after,
.main::before, .main::after {
content: none;
}
.wrapper,
.site_title_bg {
background: none;
}
.wrapper nav:first-child {
z-index: 999;
}
#header:has(img) {
position: static !important;
}
.header_image,
.slim {
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: auto !important;
}
:is(.header_image.slim, .header_image) img {
position: fixed;
inset: 0 auto auto auto;
width: 100% !important;
max-width: none !important;
height: 100vh !important;
object-fit: cover;
object-position: center var(--position-img, 13%);
margin: 0 !important;
padding: 0 !important;
filter: var(--filter-img, none);
}
#header h1.site_title {
-webkit-backdrop-filter: var(--filter-h1,
contrast(var(--contrast-h1, 1))
brightness(var(--bright-h1, 100%))
blur(var(--blur-h1, 0px))
);
backdrop-filter: var(--filter-h1,
contrast(var(--contrast-h1, 1))
brightness(var(--bright-h1, 100%))
blur(var(--blur-h1, 0px))
);}
:is(#header:has(img), .header_image) + .main {
--mg-main: min(20vmax, 13em);
}
#header:has(img) + .main:has(.site_title) {
--mg-main: min(30vmax, 19em);
}
.kiriban_wrapper + .main {
--mg-main: 0;
}
.main {
-webkit-backdrop-filter: var(--filter-main,
contrast(var(--contrast-main, 1))
brightness(var(--bright-main, 100%))
blur(var(--blur-main, 0px))
);
backdrop-filter: var(--filter-main,
contrast(var(--contrast-main, 1))
brightness(var(--bright-main, 100%))
blur(var(--blur-main, 0px))
);
margin-top: var(--mg-main, min(10vmax, 6em));
background-image: none;
}一番上のCSSはこうなっています↓
:root {
--filter-white: contrast(0.3) brightness(160%) blur(10px);
--filter-light: contrast(0.4) brightness(140%) blur(5px);
--filter-dark: contrast(0.55) blur(5px);
--filter-black: contrast(0.3) brightness(80%) blur(10px);
--filter-hidden: blur(100px);
}これらの変数を組み合わせたのがパターンB〜Jの9パターンです。
パターン別オプション
B. ぼかし強め
パターンBは↑の基本セットに加えて、以下を記述
body {
--filter-h1: var(--filter-hidden);
--filter-main: var(--filter-hidden);
}タイトルと本文コンテンツの背景をきつめにぼかしています。ぼかしただけなので、色変更はしていません。なんとなく背景画像の色味に添ったぼかしになります。
.mainの背景色をカスタマイズするのが難しい場合を想定しています。おすすめ背景画像「Pressed flowers」は、このパターンBです。
C. 少し明るめにぼかす
パターンC1/C2は↑の基本セットに加えて、以下を記述
body {
--filter-main: var(--filter-light);
}かなり背景画像が透けます。公式テーマ側で
.mainのbackground-colorがrgba()系で半透明で色付けされている場合は、このCがおすすめ。パターンC1のほうには以下が追記してあります
--filter-h1: var(--filter-light);
サイトトップのサイト名は変にぼかさず、あえて背景画像に馴染ませたい場合があると思ったので、パターンC1とC2に分けています。
D. 強く明るめにぼかす
パターンDは↑の基本セットに加えて、以下を記述
body {
--filter-main: var(--filter-white);
}コントラスト高めのくっきりはっきりした写真などを想定しています。サイト名まわりのぼかし有無でD1とD2に分けています。
--filter-h1: var(--filter-white);
おすすめ背景画像「Dried flowers」はパターンDです。
E. 少し暗めにぼかす
パターンEは↑の基本セットに加えて、以下を記述
body {
--filter-main: var(--filter-dark);
}かなり背景画像が透けます。公式テーマ側で
.mainのbackground-colorがrgba()系で半透明で色付けされている場合は、このEがおすすめ。サイト名まわりのぼかし有無でE1とE2に分けています。
--filter-h1: var(--filter-dark);
F. 強く暗めにぼかす
パターンFは↑の基本セットに加えて、以下を記述
body {
--filter-main: var(--filter-black);
}高コントラストな写真を想定しています。
サイト名まわりのぼかし有無でF1とF2に分けています。
--filter-h1: var(--filter-black);
おすすめ背景画像「Sweets」はパターンKです。
使い分けのポイント
明るく透明感のある写真は
var(--filter-light)でほんのりぼかす。そのうえで
.mainのbackground-colorをrgba()系で色付けすると、背景画像の雰囲気をより演出できると思います。おすすめ背景画像「Mirror」はこのパターンで調整しました。
調整がうまくいくと、すごくおしゃれな全画面背景画像になると思います。
同じ理屈で、ほんのり落ち着いた色合いの写真は
var(--filter-dark)で軽くぼかして、.mainのbackground-colorをrgba()系で色付けがおすすめ。画像にフィルター
背景画像側にフィルターをかけられるような変数も用意しています。
is(.header_image.slim, .header_image) img {
filter: var(--filter-img, none);
}実際のフィルター例を見せるのが分かりやすいかと思います↓
「Sweets」は彩度を下げています
body {
--filter-img: saturate(0.5);
}「Dried flowers」はコントラストを下げて、ドライフラワーの陰影をほんのり明るくしています。写真全体の色合いに統一感があり、窓から差し込む光の加減をできるだけ残したかったので、フィルターは控えめにしてあります。
body {
--filter-img: saturate(0.8) contrast(0.8) brightness(115%);
}「Ornaments」はしっかりフィルターをかけています。今回はコントラストは下げない方向で、全体を薄くして赤みを足しています。オリジナルよりもやわらかい色合いになったと思います。
body {
--filter-img: saturate(0.85) opacity(0.7) sepia(15%);
}「Mirror」はガチガチにフィルターをかけまくりました。
brightness()を上げすぎると白飛びしてしまい、壁の綺麗な模様が見えなくなってしまいます。壁の模様を維持しつつ、暗い部分をできるだけ明るくしています。body {
--filter-img: saturate(0.5) contrast(0.5) brightness(140%) grayscale(10%);
}こんな感じで、CSSフィルターだけで、写真の印象を思い通りに調整できます。
最後に参考URLを置いておきます↓
filter - CSS: カスケーディングスタイルシート | MDN
