Grainy gradient [フォレストページ＋] 夢小説対応・簡単オシャレな創作サイト作成サービス

Grainy gradient

背景画像の設定方法を紹介します。

Grainy gradientの設定方法

必要な条件

この背景画像はリンクウェアです。かならずfreepikへリンクを貼ってください。
freepikの規約を理解できる方のみ利用してください。

0. くわしい手順

基本的な流れは「Hand drawn」を参考にしてください

1. 背景画像をダウンロード

Free Vector | Grainy gradient texture
リンク先へアクセスし、［Download］をタップ
↓
詳しい説明は「Hand drawn」にあります

2. JPG画像を圧縮

すこしサイズが大きいので圧縮しましょう。

Squoosh

→Squooshの使い方は「Hand drawn」で説明しています

3. ラテ式CSSベース

ラテ式CSSベースver 1.6以降を［サイト全体設定］> ［共通HEAD］にコピペ

4. マイテーマ新規作成

マイテーマの作り方を参考にしながらマイテーマを作る。
↓
（※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ新規作成をおすすめします。）
↓
ベースは【シンプル】を選ぶ

5. ラテ式CSS拡張版

（「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える）

6. マイテーマCSSコピペ

［マイテーマ編集］>［CSSを編集］に以下をコピペ↓

背景カスタマイズCSSを見る

今回はサイトトップのサイト名がアルファベットが小文字になるよう設定しています

@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Sorts+Mill+Goudy&family=Zen+Old+Mincho&display=swap');

body{

--logo-alphabet:'Marcellus SC';

--logo-kanji:'Kaisei Opti',ui-serif,serif;

--sub-alphabet:'Sorts Mill Goudy';

--font-base:'Zen Old Mincho','Hiragino Mincho ProN',ui-serif,serif;

--size-base:1.08rem;

--ls-h1:.33em;

font-feature-settings:'lnum'

}

h1{

--logo-alphabet:'Sorts Mill Goudy';

text-transform:lowercase

}

:root{

--filter-white:contrast(.3) brightness(160%) blur(10px);

--filter-light:contrast(.4) brightness(140%) blur(5px);

--filter-dark:contrast(.55) blur(5px);

--filter-black:contrast(.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{

background-color:#DACBE5;

--col-border:hsl(173 6% 68%);

--col-formbg:hsl(180 7% 100% / 0.35)

}

a,.dream_settings h3,.label_red,.required{

color:PaleVioletRed !important

}

.dream_settings,.form_container{

background-color:revert

}

h5,small{

color:hsl(173 6% 40%)

}

input:is([type="text"],[type="password"]),textarea{

background-color:var(--col-formbg)

}

::placeholder{

color: inherit;

opacity: .7

}

button.btn,.btn,.search button.btn {

background-color:hsl(180 7% 51% / .5);

border-color:var(--col-border);

}

select{

border-color:var(--col-border) !important

}

.btn2{

background-color:var(--col-formbg);

box-shadow:none

}

.label_yellow{

background-color:hsl(50 65% 88% / .6)

}