全画面背景画像CSS
下のボックスを全選択してコピーして、
［サイト全体設定］＞［マイテーマの編集］＞［CSSを編集］にペーストしてください。
CSSは11パターン用意しました。背景画像の色味や柄によって使い分けてください。
Q. 背景画像の色合いは？
→背景画像は明るめ
→背景画像は暗め
→背景が完全透過します。ぼかし無し。グラデーション画像におすすめ。文字が読みづらい場合は他のパターンを試してください。
→iPhone/iPadでCSSコードを全選択するには
背景を一番つよくぼかします。ほぼ不透明。ぼかしの色合いは「背景画像の中間色」なります。
くっきりイラスト系は、「本文コンテンツ背景色が設定済み」の公式テーマと合わせるのもおすすめ（例: flower pattern、縞柄椿）
→【背景CSSパターンB1, B2】へ
背景画像明るめ/すこしぼかす
→【背景CSSパターンC1, C2】へ
「パターンC」でテキストが読みづらい場合は「パターンD」→「パターンB」の順に試す。
背景画像明るめ/強めにぼかす
→【背景CSSパターンD1, D2】へ
「パターンD」でテキストが読みづらい場合は「パターンB」を試す。
背景画像暗め/少しぼかす
→【背景CSSパターンE1, E2】へ
「パターンE」でテキストが読みづらい場合は「パターンF」→「パターンB」→の順に試す。
背景画像暗め/強めにぼかす
→【背景CSSパターンF1, F2】へ
「パターンF」でテキストが読みづらい場合は「パターンB」を試す。
→Release Notes：CSS更新履歴
［サイト全体設定］＞［マイテーマの編集］＞［CSSを編集］にペーストしてください。
- ラテ式CSSベースを最新版にしてください
- ラテ式CSS拡張版を使っている場合は拡張版も最新版にしてください
- マイテーマのCSS編集フォーム内に「webフォントおすすめ10パターン」を記述済みの場合は、かならずwebフォント記述より下に追記してください。
背景画像のタイプ別おすすめ
CSSは11パターン用意しました。背景画像の色味や柄によって使い分けてください。
理想のパターンを見つける
Q. 背景画像の色合いは？
→背景画像は明るめ
→背景画像は暗め
（背景明るめ）↓つづけて選んでください。
Q. テキストエリアは背景をぼかす？
①背景をすべて透過させたい→パターンAへ
②背景を少しぼかしたい
③背景を強めにぼかしたい
④背景を完全にぼかしたい
（よく分からないときは「少しぼかす」を最初に試すのがおすすめ。テキストが読みづらいなら、「強めにぼかす」→「完全にぼかす」の順で試してください）
Q. テキストエリアは背景をぼかす？
①背景をすべて透過させたい→パターンAへ
②背景を少しぼかしたい
③背景を強めにぼかしたい
④背景を完全にぼかしたい
（よく分からないときは「少しぼかす」を最初に試すのがおすすめ。テキストが読みづらいなら、「強めにぼかす」→「完全にぼかす」の順で試してください）
（背景暗め）↓つづけて選んでください
Q. テキストエリアは背景をぼかす？
①背景をすべて透過させたい→パターンAへ
②背景を少しぼかしたい
③背景を強めにぼかしたい
④背景を完全にぼかしたい
（よく分からないときは「少しぼかす」を最初に試すのがおすすめ。テキストが読みづらいなら、「強めにぼかす」→「完全にぼかす」の順で試してください）
Q. テキストエリアは背景をぼかす？
①背景をすべて透過させたい→パターンAへ
②背景を少しぼかしたい
③背景を強めにぼかしたい
④背景を完全にぼかしたい
（よく分からないときは「少しぼかす」を最初に試すのがおすすめ。テキストが読みづらいなら、「強めにぼかす」→「完全にぼかす」の順で試してください）
パターンA
→背景が完全透過します。ぼかし無し。グラデーション画像におすすめ。文字が読みづらい場合は他のパターンを試してください。
A 背景を透過
→iPhone/iPadで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)
}
body::before,.wrapper::before,.wrapper::after,.main::before,.main::after{
content:none
}
.wrapper,.site_title_bg{
background:none
}
#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;
z-index:-1;
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)))
}
:has(img)+.main{
--mg-main:min(20vmax,13em)
}
:has(img)+.main:has(.site_title){
--mg-main:min(30vmax,19em)
}
.kiriban_wrapper+.main{
--mg-main:0
}
.main:has(.novel){
--pd:1rem
}
.main{
--mg-main:min(10vmax,6em);
-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)));
padding-block:var(--pd,min(4vmax,3em));
background-image:none
}
nav :is(li,li:first-child){
border-color:hsl(0 0% 50% / 0.6) !important
}
nav,.navi_header,.nav_icon{
background-color:revert !important;
-webkit-backdrop-filter:var(--filter-nav);
backdrop-filter:var(--filter-nav);
border-color:transparent !important
}
.sidenav,.nav_icon+ul{
background-color:revert !important;
-webkit-backdrop-filter:var(--filter-sidenav,var(--filter-hidden));
backdrop-filter:var(--filter-sidenav,var(--filter-hidden));
border-color:transparent !important
}パターンB
背景を一番つよくぼかします。ほぼ不透明。ぼかしの色合いは「背景画像の中間色」なります。
くっきりイラスト系は、「本文コンテンツ背景色が設定済み」の公式テーマと合わせるのもおすすめ（例: flower pattern、縞柄椿）
→【背景CSSパターンB1, B2】へ
パターンC
背景画像明るめ/すこしぼかす
→【背景CSSパターンC1, C2】へ
「パターンC」でテキストが読みづらい場合は「パターンD」→「パターンB」の順に試す。
パターンD
背景画像明るめ/強めにぼかす
→【背景CSSパターンD1, D2】へ
「パターンD」でテキストが読みづらい場合は「パターンB」を試す。
パターンE
背景画像暗め/少しぼかす
→【背景CSSパターンE1, E2】へ
「パターンE」でテキストが読みづらい場合は「パターンF」→「パターンB」→の順に試す。
パターンF
背景画像暗め/強めにぼかす
→【背景CSSパターンF1, F2】へ
「パターンF」でテキストが読みづらい場合は「パターンB」を試す。
→Release Notes：CSS更新履歴
iPhoneで全選択する方法
- このページの任意の場所で任意のテキストを長押し（本当にどこでもOK）
- 「コピー」「選択」のようなポップアップが出る
- もう一度任意の場所をタップしてポップアップを消す
- CSSコードのボックス内をタップしてみてください
- iOS16のiPhoneではこの手順で全選択できました
