作品一覧

• 

  12

  背景カスタマイズのナビゲーションバー

  背景カスタマイズCSSのナビゲーションバー <a href="/my/site/navigation/type">ナビゲーションタイプの選択</a>では全7パターンあります。そのうちの3つをプレビュー。 デモページは→【背景カスタマイズ】 <a href="/my/site/navigation/color">ナビゲーションカラーの選択</a>は「black 1」

• 

  18

  Hand drawn

  背景画像の設定方法を紹介します。 <details><summary>Hand drawnの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。 </li><li>どうしてもリンクしたくない場合は、freepikではなく、ライセンスフリーの画像を使いましょう。「CC0 画像 おすすめ」などでGoogle検索すれば、たくさんサービスが見つかります。</li></ol> <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-vector/organic-flat-abstract-element-pattern_13756441.htm"> Free Vector | Organic flat abstract element pattern</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［JPG］をタップ（画像①参照↓） ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 今回はまあまあKBがコンパクトですが、念のため圧縮します。 <code>1MB</code>や<code>2MB</code>を「デザイン用画像」としてアップロードするのはあまりおすすめしません。KBが大きい場合はぜひ圧縮を試してみてください。 <h6>Squoosh</h6> <ol><li><a href="https://squoosh.app/">Squoosh</a>へアクセス </li><li>中央のアイコンをタップ（画像②参照↓） </li><li>圧縮プレビュー画面になる </li><li>JPGなら特別な操作は不要です。「MozJPG」で圧縮された画像をダウンロード（画像③参照↓）</li></ol> <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【グラデーションボーダー（ピンク/イエロー）】を選ぶ 以下の条件で絞り込み検索できます↓ <ul class="la-ul"><li>【メインカラー】グレー系 </li><li>【イメージ】ビビッド </li><li>【キーワード】グラデーション</li></ul> <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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,0))); backdrop-filter:var(--filter-h1,contrast(var(--contrast-h1,1)) brightness(var(--bright-h1,100%)) blur(var(--blur-h1,0))) } :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,0))); backdrop-filter:var(--filter-main,contrast(var(--contrast-main,1)) brightness(var(--bright-main,100%)) blur(var(--blur-main,0))); padding-block:var(--pd,min(4vmax,3em)); background-image:none } nav :is(li,li:first-child){ border-color:hsl(0 0% 50% / .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,.main{ background-color:hsl(300, 14%, 96%) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">デザインを着せ替えるには？</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> サイト全体で画像を利用する場合は<a href="/my/site/link">ナビゲーションメニュー</a>に「image by freepik」と↑のURLを貼るのもおすすめです。 各機能のリンク設定方法 →<a href="/support/faq/detail?id=20">マイページに表示されるリンクの変更</a> リンクタグの書き方 →<a href="/support/faq/detail?id=84">他サイトにリンクさせるタグ</a></details>

• 

  15

  Sweets

  背景画像の専用CSSと使い方 <details><summary>Sweetsの設定方法</summary> <h6>必要条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-photo/arrangement-delicious-sweet-goodies_13182392.htm">Free Photo | Arrangement of delicious sweet goodies</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［Large］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 写真素材なのでかならず圧縮します <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル（紺）】を選ぶ 以下の条件で絞り込み検索できます↓ <ul class="la-ul"><li>【メインカラー】ブルー系 </li><li>【イメージ】シンプル</li></ul> ナビゲーションカラーは「black 1」がおすすめ <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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); }</pre></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ 詳しくは「Hand drawn」で説明しています。 <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> →詳しいリンクの貼り方は「Hand drawn」で説明しています</details>

• 

  15

  Dahlia

  背景画像の設定方法を紹介します。 <details><summary>Dahliaの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。 </li><li>どうしてもリンクしたくない場合は、freepikではなく、ライセンスフリーの画像を使いましょう。「CC0 画像 おすすめ」などでGoogle検索すれば、たくさんサービスが見つかります。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-photo/flat-lay-flowers-with-copyspace_4723536.htm">Free Photo | Flat lay of flowers with copyspace</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［Large］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 写真素材なのでかならず圧縮します。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル】を選ぶ 公式テーマ検索の一番古いページにあります。 <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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,0))); backdrop-filter:var(--filter-h1,contrast(var(--contrast-h1,1)) brightness(var(--bright-h1,100%)) blur(var(--blur-h1,0))) } :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,0))); backdrop-filter:var(--filter-main,contrast(var(--contrast-main,1)) brightness(var(--bright-main,100%)) blur(var(--blur-main,0))); padding-block:var(--pd,min(4vmax,3em)); background-image:none } nav :is(li,li:first-child){ border-color:hsl(0 0% 50% / .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-light); --position-img:bottom; --col-link:hsl(276 27% 58%); --col-accent:hsl(6 100% 84%); --col-formbg:hsl(0 0% 100% / .45); background-color:hsl(240 3% 88%) } .dream_settings,.form_container{ background-color:revert } h5{ color:hsl(173 6% 48%) } a,.dream_settings h3,.label_red,.required{ color:var(--col-link) } input:is([type="text"],[type="password"]),textarea{ background-color:var(--col-formbg) } select{ border-color:hsl(173 6% 68%) !important } button.btn,.btn,.search button.btn{ background-color:hsl(180 7% 51% / .4); border-color:hsl(180 7% 51% / .5); box-shadow:none } .btn2{ background-color:var(--col-formbg); box-shadow:none } .label_yellow{ background-color:hsl(46 50% 90%) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">公式ヘルプ</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> 詳しい説明は「Hand drawn」にあります </details>

• 

  15

  Grainy gradient

  背景画像の設定方法を紹介します。 <details><summary>Grainy gradientの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-vector/grainy-gradient-texture_14668596.htm">Free Vector | Grainy gradient texture</a> リンク先へアクセスし、［Download］をタップ ↓ 詳しい説明は「Hand drawn」にあります <h3>2. JPG画像を圧縮</h3> すこしサイズが大きいので圧縮しましょう。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル】を選ぶ <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> 今回はサイトトップのサイト名がアルファベットが小文字になるよう設定しています <pre>@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&amp;family=Sorts+Mill+Goudy&amp;family=Zen+Old+Mincho&amp;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) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください</li></ol></details> <h3>7. アップロード</h3> 詳しい説明は「Hand drawn」にあります <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> 詳しい説明は「Hand drawn」にあります</details>

• 

  15

  Dried flowers

  背景画像の設定方法を紹介します。 <details><summary>Dried flowerの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」の説明と同じです。「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-photo/breakfast-composition_4123523.htm">Free Photo | Breakfast composition</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［Large］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 写真素材なのでかならず圧縮します。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【Starry Lights(昼)】を選ぶ 以下の条件で絞り込み検索できます <ul class="la-ul"><li>【メインカラー】イエロー </li><li>【イメージ】パステル </li><li>【キーワード】きらきら</li></ul> <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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-h1:var(--filter-white); --filter-main:var(--filter-white); --filter-img:saturate(0.8) contrast(0.8) brightness(115%); background-color:#F6EBD5 } #header h1.site_title,.main{ background-color:hsl(39 55% 50% / .25) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">公式ヘルプ</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> サイト全体で画像を利用する場合は<a href="/my/site/link">ナビゲーションメニュー</a>に「image by freepik」と↑のURLを貼るのもおすすめです。 各機能のリンク設定方法 →<a href="/support/faq/detail?id=20">マイページに表示されるリンクの変更</a> リンクタグの書き方 →<a href="/support/faq/detail?id=84">他サイトにリンクさせるタグ</a> </details>

• 

  15

  Ornaments

  背景画像の設定方法を紹介します。 <details><summary>Ornamentsの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。 </li><li>どうしてもリンクしたくない場合は、freepikではなく、ライセンスフリーの画像を使いましょう。「CC0 画像 おすすめ」などでGoogle検索すれば、たくさんサービスが見つかります。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」の説明と同じです。「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-photo/close-up-leaves-decorations-coronet_5896268.htm">Free Photo | Close-up leaves and decorations for coronet</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［Large］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 写真素材なのでかならず圧縮します。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【Starry Lights(昼)】を選ぶ 以下の条件で絞り込み検索できます <ul class="la-ul"><li>【メインカラー】イエロー </li><li>【イメージ】パステル </li><li>【キーワード】きらきら</li></ul> <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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-img:saturate(.85) opacity(.7) sepia(15%); --blur-main:10px; --position-img:9%; background-color:#D4CAB6 } #header h1.site_title { margin-block:2.3em !important } .main{ background-color:hsl(39 40% 85% / 0.7) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">公式ヘルプ</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> サイト全体で画像を利用する場合は<a href="/my/site/link">ナビゲーションメニュー</a>に「image by freepik」と↑のURLを貼るのもおすすめです。 各機能のリンク設定方法 →<a href="https://plus.fm-p.jp/support/faq/detail?id=20">マイページに表示されるリンクの変更</a> リンクタグの書き方 →<a href="https://plus.fm-p.jp/support/faq/detail?id=84">他サイトにリンクさせるタグ</a> </details>

• 

  15

  Mirror

  背景画像の設定方法を紹介します。 <details><summary>Mirrorの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-photo/arrangement-with-mirror-perfume-wooden-table_6137373.htm">Free Photo | Arrangement with mirror and perfume on wooden table</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［Large］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 写真素材なのでかならず圧縮します。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル（黄）】を選ぶ 以下の条件で絞り込み検索できます <ul class="la-ul"><li>【メインカラー】イエロー </li><li>【イメージ】シンプル</li></ul> <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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,0))); backdrop-filter:var(--filter-h1,contrast(var(--contrast-h1,1)) brightness(var(--bright-h1,100%)) blur(var(--blur-h1,0))) } :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,0))); backdrop-filter:var(--filter-main,contrast(var(--contrast-main,1)) brightness(var(--bright-main,100%)) blur(var(--blur-main,0))); 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:#F1EBE8; --filter-img:saturate(.5) contrast(.5) brightness(140%) grayscale(10%); --filter-main:var(--filter-light); --col-btn:hsl(48 25% 70% / .8); --col-border:hsl(48 100% 29%) } .dream_settings,.form_container{ background-color:revert; border:solid 1px var(--col-border) } .accordion-section-title{ color:inherit } input:is([type="text"],[type="password"]),textarea { background-color:hsl(48 0% 100% / .35); border-color:currentColor } ::placeholder{ color:inherit; opacity:.7 } select{ border-color:var(--col-border) !important } button.btn,.btn,.search button.btn{ background-color:var(--col-btn); border:none } .btn2{ background-color:hsl(48 0% 100% / .6); border:none; box-shadow: none } .btn2.btn_like{ color:hsl(0 20% 70%) } .btn2.btn_bookmark{ color:hsl(210 15% 65%) } .new{ background-color: hsl(48 25% 100% / .8) } .label_red,.label_yellow,.label_category{ background-color: revert; color:var(--col-border) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> 詳しくは「Hand drawn」で説明しています <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> 詳しくは「Hand drawn」で説明しています </details>

• 

  15

  Pressed flowers

  背景画像の設定方法を紹介します。 <details><summary>Pressed flowersの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-vector/hand-drawn-pressed-flowers-pattern_13398340.htm">Free Vector | Hand drawn pressed flowers pattern</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［JPG］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> 今回は比較的コンパクトですが、念のため圧縮しましょう。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル】を選ぶ 公式テーマ検索の一番古いページにあります。 <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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,0))); backdrop-filter:var(--filter-h1,contrast(var(--contrast-h1,1)) brightness(var(--bright-h1,100%)) blur(var(--blur-h1,0))) } :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,0))); backdrop-filter:var(--filter-main,contrast(var(--contrast-main,1)) brightness(var(--bright-main,100%)) blur(var(--blur-main,0))); padding-block:var(--pd,min(4vmax,3em)); background-image:none } nav :is(li,li:first-child){ border-color:hsl(0 0% 50% / .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:#FDFEF9; --filter-h1:var(--filter-hidden); --filter-main:var(--filter-hidden); --col-link:hsl(164 30% 52%); --col-formbg:hsl(180 7% 100% / .45) } h5,small{ color:hsl(173 6% 50%) } a,.dream_settings h3{ color:var(--col-link) !important } .dream_settings,.form_container{ background-color:revert } button.btn,.btn,.search button.btn{ background-color:hsl(164 26% 70%); border-color: var(--col-link) } .btn2{ background-color:var(--col-formbg); color:hsl(164 20% 60%) !important } select{ border-color:var(--col-link) !important } input:is([type="text"],[type="password"]),textarea{ background-color:var(--col-formbg) } ::placeholder{ color:inherit; opacity:.5 } .label_yellow,.label_red,.label_category{ background-color:revert; color:var(--col-link); border-color:var(--col-link) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">デザインを着せ替えるには？</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> 詳しくは「Hand drawn」で説明しています</details>

• 

  15

  Watercolor floral pattern

  背景画像の設定方法を紹介します。 <details><summary>Watercolor floral patternの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-vector/watercolor-floral-pattern_20282212.htm">Free Vector | Watercolor floral pattern</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［JPG］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> とても大きいので、かならず圧縮しましょう。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル】を選ぶ 公式テーマ検索の一番古いページにあります。 <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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,0))); backdrop-filter:var(--filter-h1,contrast(var(--contrast-h1,1)) brightness(var(--bright-h1,100%)) blur(var(--blur-h1,0))) } :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,0))); backdrop-filter:var(--filter-main,contrast(var(--contrast-main,1)) brightness(var(--bright-main,100%)) blur(var(--blur-main,0))); padding-block:var(--pd,min(4vmax,3em)); background-image:none } nav :is(li,li:first-child){ border-color:hsl(0 0% 50% / .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{ --col-border:hsl(164 21% 50%) } #header h1.site_title,.main{ background-color:white } h5,small{ color:hsl(173 6% 50%) } a,.dream_settings h3{ color:hsl(164 31% 55%) !important } .dream_settings,.form_container{ background-color:revert } button.btn,.btn,.search button.btn{ background-color:hsl(164 26% 70%); border-color:var(--col-border) } .btn2{ color:hsl(164 21% 60%) !important } select{ border-color:var(--col-border) !important } .label_yellow,.label_red,.label_category{ --col-gray:hsl(173 6% 68%); background-color:revert; color:var(--col-gray); border-color:var(--col-gray) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">デザインを着せ替えるには？</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> サイト全体で画像を利用する場合は<a href="/my/site/link">ナビゲーションメニュー</a>に「image by freepik」と↑のURLを貼るのもおすすめです。 各機能のリンク設定方法 →<a href="/support/faq/detail?id=20">マイページに表示されるリンクの変更</a> リンクタグの書き方 →<a href="/support/faq/detail?id=84">他サイトにリンクさせるタグ</a></details>

• 

  15

  Doodle

  背景画像の設定方法を紹介します。 <details><summary>Doodleの設定方法</summary> <h6>必要な条件</h6> <ol><li>この背景画像はリンクウェアです。かならず<a href="https://www.freepik.com/">freepik</a>へリンクを貼ってください。 </li><li><a href="https://www.freepikcompany.com/legal#nav-freepik">freepikの規約</a>を理解できる方のみ利用してください。</li></ol> <h3>0. くわしい手順</h3> 基本的な流れは「Hand drawn」の説明と同じです。「Hand drawn」を参考にしてください <h3>1. 背景画像をダウンロード</h3> <a href="https://www.freepik.com/free-vector/flat-minimal-double-sided-horizontal-business-card-template_22596741.htm">Free Vector | Flat minimal double-sided horizontal business card template</a> リンク先へアクセスし、［Download］をタップ ↓ ［Free download］ボタン右の［▼］をタップ ↓ ［JPG］をタップ ↓ （iOSは「ダウンロードしますか？」と表示される） ↓ （［表示］か［ダウンロード］を選んで保存） <h3>2. JPG画像を圧縮</h3> とても大きいので、かならず圧縮しましょう。 <h6>Squoosh</h6> →Squooshの使い方は「Hand drawn」で説明しています <h3>3. ラテ式CSSベース</h3> ラテ式CSSベース<u>ver 1.6以降</u>を［サイト全体設定］&gt; ［<a href="/my/site/part">共通HEAD</a>］にコピペ <h3>4. マイテーマ新規作成</h3> <a href="/support/faq/detail?id=190">マイテーマの作り方</a>を参考にしながらマイテーマを作る。 ↓ （※すでに作ってあるマイテーマを流用すると、サイトトップがレイアウト崩れしやすいです。今回はマイテーマ<u>新規作成</u>をおすすめします。） ↓ ベースは【シンプル】を選ぶ 公式テーマ検索の一番古いページにあります。 <h3>5. ラテ式CSS拡張版</h3> （「ラテ式CSS拡張版」をすでに利用している場合は、拡張版CSSを最新版に入れ替える） <h3>6. マイテーマCSSコピペ</h3> ［<a href="/my/theme">マイテーマ編集</a>］&gt;［<u>CSS</u>を編集］に以下をコピペ↓ <details><summary>背景カスタマイズCSSを見る</summary> <pre>: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,0))); backdrop-filter:var(--filter-h1,contrast(var(--contrast-h1,1)) brightness(var(--bright-h1,100%)) blur(var(--blur-h1,0))) } :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,0))); backdrop-filter:var(--filter-main,contrast(var(--contrast-main,1)) brightness(var(--bright-main,100%)) blur(var(--blur-main,0))); padding-block:var(--pd,min(4vmax,3em)); background-image:none } nav :is(li,li:first-child){ border-color:hsl(0 0% 50% / .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,#header h1.site_title,.main{ background-color:hsl(27 33% 95%); --col-border:hsl(27 6% 68%) } a,.dream_settings h3{ color:hsl(27 20% 60%) !important } .dream_settings,.form_container{ background-color:revert } h5,small{ color:hsl(27 6% 50%) } input:is([type="text"],[type="password"]),textarea{ background-color:hsl(27 7% 100% / 0.45) } ::placeholder{ color:inherit; opacity:.5 } button.btn,.btn,.search button.btn{ background-color:hsl(27 7% 66%); border-color:var(--col-border) } select{ border-color:var(--col-border) !important } .new,.label_yellow,.label_red,.label_category{ --col-gray:hsl(27 6% 68%); background-color:revert; color:var(--col-gray); border:solid 1px var(--col-gray) }</pre> <h6 id="ios-select">iPhoneで全選択する方法</h6> <ol><li>このページの任意の場所で任意のテキストを長押し（本当にどこでもOK） </li><li>「コピー」「選択」のようなポップアップが出る </li><li>もう一度任意の場所をタップしてポップアップを消す </li><li>CSSコードのボックス内をタップしてみてください </li><li>iOS16のiPhoneではこの手順で全選択できました</li></ol></details> <h3>7. アップロード</h3> <a href="/my/material/image">デザイン用画像</a>に今回の画像をアップロード ↓ <a href="/support/faq/detail?id=68">メイン画像差し替え</a>を参考にしながら、アップロードした背景画像を選択する ↓ ※今回は「メイン画像を表示する」設定に切り替える必要があります ↓ <a href="/support/faq/detail?id=66">デザインを着せ替えるには？</a>を参考にしながらマイテーマを適用する <h3>8. freepik</h3> サイト内にURLを貼りましょう <pre>https://www.freepik.com/</pre> 詳しくは「Hand drawn」で説明しています</details>

• 

  2

  画像まとめ

  【背景画像】<a href="https://www.freepik.com/">freepik</a> 並べて1枚にまとめました。 縦長画面はiPhoneのスクショ、 横長画面はiPadのスクショです。 PCでも確認しましたが、見え方はiPadと同じでした。