Sweets
背景画像の専用CSSと使い方
基本的な流れは「Hand drawn」を参考にしてください
Free Photo | Arrangement of delicious sweet goodies
リンク先へアクセスし、［Download］をタップ
↓
［Free download］ボタン右の［▼］をタップ
↓
［Large］をタップ
↓
（iOSは「ダウンロードしますか？」と表示される）
↓
（［表示］か［ダウンロード］を選んで保存）
写真素材なのでかならず圧縮します
→Squooshの使い方は「Hand drawn」で説明しています
ラテ式CSSベースver 1.6以降を［サイト全体設定］> ［共通HEAD］にコピペ
マイテーマの作り方を参考にしながらマイテーマを作る。
↓
（※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ新規作成をおすすめします。）
↓
ベースは【シンプル（紺）】を選ぶ
以下の条件で絞り込み検索できます↓
ナビゲーションカラーは「black 1」がおすすめ
（「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える）
［マイテーマ編集］>［CSSを編集］に以下をコピペ↓
デザイン用画像に今回の画像をアップロード
↓
詳しくは「Hand drawn」で説明しています。
サイト内にURLを貼りましょう
→詳しいリンクの貼り方は「Hand drawn」で説明しています
Sweetsの設定方法
必要条件
- この背景画像はリンクウェアです。かならずfreepikへリンクを貼ってください。
- freepikの規約を理解できる方のみ利用してください。
0. くわしい手順
基本的な流れは「Hand drawn」を参考にしてください
1. 背景画像をダウンロード
Free Photo | Arrangement of delicious sweet goodies
リンク先へアクセスし、［Download］をタップ
↓
［Free download］ボタン右の［▼］をタップ
↓
［Large］をタップ
↓
（iOSは「ダウンロードしますか？」と表示される）
↓
（［表示］か［ダウンロード］を選んで保存）
2. JPG画像を圧縮
写真素材なのでかならず圧縮します
Squoosh
→Squooshの使い方は「Hand drawn」で説明しています
3. ラテ式CSSベース
ラテ式CSSベースver 1.6以降を［サイト全体設定］> ［共通HEAD］にコピペ
4. マイテーマ新規作成
マイテーマの作り方を参考にしながらマイテーマを作る。
↓
（※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ新規作成をおすすめします。）
↓
ベースは【シンプル（紺）】を選ぶ
以下の条件で絞り込み検索できます↓
- 【メインカラー】ブルー系
- 【イメージ】シンプル
ナビゲーションカラーは「black 1」がおすすめ
5. ラテ式CSS拡張版
（「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える）
6. マイテーマCSSコピペ
［マイテーマ編集］>［CSSを編集］に以下をコピペ↓
背景カスタマイズ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
}
body {
--filter-main: var(--filter-black);
--filter-img: saturate(0.5);
--col-accent: hsl(344 22% 76%);
--col-link: hsl(240 26% 76%);
--col-bg: hsl(24 3% 37%);
--col-formbg: hsl(0 0% 0% / 0.4);
background-color: var(--col-bg);
}
.dream_settings,
.form_container,
.label_category {
background-color: revert;
border: 1px solid;
}
input:is([type="text"], [type="password"]),
textarea {
background-color: var(--col-formbg);
}
::placeholder {
color: inherit;
opacity: 0.7;
}
button, button.btn {
background-color: var(--col-accent) !important;
color: var(--col-bg) !important;
border: none !important;
text-shadow: none;
}
.btn2 {
background-color: var(--col-formbg);
border: none;
box-shadow: none;
}
.btn2.btn_like,
.required {
color: var(--col-accent);
}
.btn2.btn_bookmark {
color: var(--col-link);
}
.new,
.label_yellow {
background-color: var(--col-accent);
border-color: var(--col-accent);
}
.label_red {
background-color: revert;
color: var(--col-accent);
border-color: var(--col-accent);
}7. アップロード
デザイン用画像に今回の画像をアップロード
↓
詳しくは「Hand drawn」で説明しています。
8. freepik
サイト内にURLを貼りましょう
https://www.freepik.com/
→詳しいリンクの貼り方は「Hand drawn」で説明しています
