背景カスタマイズ
公式機能「メイン画像を差し替える」を利用して、全画面背景画像を設定できます。
ここはフリーページですが、スマホで閲覧するとトップページ（マイページ）のレイアウトが再現されていると思います。（サイト名が表示されている）
【背景画像】freepikより
振り返りがてら最初から順番に説明します。
使い方にコツが必要です。以下をよく読んでください↓
以下の公式テーマはレイアウト崩れします
以下のページでは全画面背景画像は表示できません
公式テーマの種類によっては「メイン画像を表示する」設定に切り替える必要があります
【参考】公式ヘルプ（メイン画像差し替え）
マイテーマのメイン画像は一括変更できません。
マイページ、本棚、ブログ、など、それぞれの機能ごとに設定を変えていく必要があります。
逆に言うならば、同じマイテーマ内で別々の背景画像を設定できます。
今回のようにメイン画像をカスタマイズすると、ベースのテーマを入れ替える際は注意が必要です。
現在のテーマからレイアウトが大幅に異なるテーマに変えると、マイページのレイアウトが古いテーマのままになります（＝スマホ版のHTMLが変更されない）
ベースのテーマを入れ替えたときに「トップページのサイト名まわりのデザインが変だな」と感じた時は、以下を試してみてください↓
この手順でもレイアウトが正常に戻らない場合は、新しく別のマイテーマを新規作成するのがおすすめです。
縦の長さ：2,000px くらい
横の長さ：2,000px くらい
サイズ(容量)：できれば300KB以下に画質を圧縮がおすすめ
全画面背景画像は、中央がちょうどフィットするように上下左右が切り取られます。
たとえば、横長の背景画像はスマホ閲覧だと左右が切り取られます。
縦長の背景画像は、PC閲覧だと上下が切り取られます（下が多めに切り取られて、上部が表示されます）
見せたいデザインが上部〜中央に収まるような画像がおすすめです。いろいろ試してみてください。
サイズ変更せずに、画質だけを圧縮する方法
JPEG画像は「Squoosh」、
PNG画像は「TinyPNG」がおすすめ。
SquooshはGoogleが開発しました。こまかな手動設定は不要です。
JPGなら初期設定 ( MozJPEG ) でいいと思います。使い方記事を紹介しておきます
→Squoosh の使い方 - ｋ本的に無料ソフト・フリーソフト
TinyPNGは特別な操作は必要ありません。初めて使う方は1枚ずつアップロード→圧縮→ダウンロードがおすすめです。
公式テーマ「満月と猫」「natural photos」はレイアウト崩れします。それ以外はほぼ問題なく全画面背景画像を表示できるはずです。
もし「どのテーマを選べばいいか」迷ったときは、とりあえず「シンプル」シリーズを適用してみてください。
背景カスタマイズ ver 1.1 からナビゲーションバー表示に正式対応しました。
ver 1.1以降は配布CSSをコピペで完了です。特別な設定は必要ありません。
ナビゲーションカラーの選択で豊富に選べるので、配色には困らないと思います。いろんなカラーパターンを試してみてください。
おすすめ背景画像を紹介しています。画像の配布ではありません。主にfreepikの画像を利用する方法をまとめています。
→Background Image
背景画像などの探し方を詳しく、1万字かけて記事にしました
→【個人サイト向け】おしゃれな素材の探し方【2023】
CSS知識がある方はこちらもどうぞ
→背景CSS変数一覧
【公式テーマ】 アラベスク（グレー）
【ナビゲーションタイプ】 プルダウン（左）
【ナビゲーションカラー】 gray 5
【背景CSS】 パターンF2
【背景画像】 Freepik（画像上部の黒い部分をトリミングしました）
【補足】この画像だけの専用CSSはありません。ナビゲーションカラーは「ダーク背景色 + 白文字」だと、いろんな背景画像に合わせやすいと思います。おすすめ。
Demo Page
- 現在開いているこのページ
- 背景カスタマイズのナビゲーションバー：プレビュー (スクショ)
ここはフリーページですが、スマホで閲覧するとトップページ（マイページ）のレイアウトが再現されていると思います。（サイト名が表示されている）
【背景画像】freepikより
特徴
- ラテ式CSSベースが必要です
- 「ラテ式CSS拡張版」と併用OK
- 「webフォント11パターン」と併用OK
- 9割の公式テーマに対応（満月と猫、natural photosはレイアウト崩れします）
使い方
振り返りがてら最初から順番に説明します。
- ラテ式CSSベースver 2.2以降を［サイト全体設定］> ［共通HEAD］にコピペ
- マイテーマを作る
（参考→マイテーマの作り方）
- （「ラテ式CSS拡張版」をすでに利用している方は、拡張版を最新版に入れ替えてください）
- ［マイテーマ編集］>［CSSを編集］を開く
- 全画面背景CSSをコピペ
→全画面背景画像CSS配布ページへ
CSSは11パターン。背景画像の模様や色味に合わせて選んでください。
- 「デザイン用画像」に好きな画像をアップロード。
- 公式ヘルプ（メイン画像差し替え）を参考にしながら、アップロードした背景画像を選択する
- マイテーマを適用する
（参考→デザインを入れ替えるには？）
注意点
使い方にコツが必要です。以下をよく読んでください↓
① 非対応の公式テーマ
以下の公式テーマはレイアウト崩れします
② クッション画面などは画像非表示
以下のページでは全画面背景画像は表示できません
- サイト入り口（クッションページ）
- 閲覧制限入り口（パスワード入力画面）ページ
- 年齢制限入り口（年齢確認画面）ページ
③ 設定の手間が増えるテーマもある
公式テーマの種類によっては「メイン画像を表示する」設定に切り替える必要があります
【参考】公式ヘルプ（メイン画像差し替え）
④ 機能ごとに一枚ずつ画像設定
マイテーマのメイン画像は一括変更できません。
マイページ、本棚、ブログ、など、それぞれの機能ごとに設定を変えていく必要があります。
逆に言うならば、同じマイテーマ内で別々の背景画像を設定できます。
⑤ ベースのテーマを入れ替える場合
今回のようにメイン画像をカスタマイズすると、ベースのテーマを入れ替える際は注意が必要です。
現在のテーマからレイアウトが大幅に異なるテーマに変えると、マイページのレイアウトが古いテーマのままになります（＝スマホ版のHTMLが変更されない）
ベースのテーマを入れ替えたときに「トップページのサイト名まわりのデザインが変だな」と感じた時は、以下を試してみてください↓
- 今からの手順は公式ヘルプ「レイアウト設定方法」を参考にします。ひととおり読んでください
- ［マイテーマ編集］>［今回のマイテーマを選ぶ］>［機能別設定］>［マイページ］>［上級者向けレイアウトテーマ設定］ページを開く
- フォームが上下に２つ並んでいます。２つの中身が異なる場合は、［元のレイアウト］を全選択してコピー
- 上のフォームにペーストします。つまり、初期レイアウトにもどします。
この手順でもレイアウトが正常に戻らない場合は、新しく別のマイテーマを新規作成するのがおすすめです。
おすすめ画像サイズ
縦の長さ：2,000px くらい
横の長さ：2,000px くらい
サイズ(容量)：できれば300KB以下に画質を圧縮がおすすめ
背景画像の表示範囲
全画面背景画像は、中央がちょうどフィットするように上下左右が切り取られます。
たとえば、横長の背景画像はスマホ閲覧だと左右が切り取られます。
縦長の背景画像は、PC閲覧だと上下が切り取られます（下が多めに切り取られて、上部が表示されます）
見せたいデザインが上部〜中央に収まるような画像がおすすめです。いろいろ試してみてください。
画像圧縮おすすめ方法
サイズ変更せずに、画質だけを圧縮する方法
JPEG画像は「Squoosh」、
PNG画像は「TinyPNG」がおすすめ。
SquooshはGoogleが開発しました。こまかな手動設定は不要です。
JPGなら初期設定 ( MozJPEG ) でいいと思います。使い方記事を紹介しておきます
→Squoosh の使い方 - ｋ本的に無料ソフト・フリーソフト
TinyPNGは特別な操作は必要ありません。初めて使う方は1枚ずつアップロード→圧縮→ダウンロードがおすすめです。
公式テーマの選び方
公式テーマ「満月と猫」「natural photos」はレイアウト崩れします。それ以外はほぼ問題なく全画面背景画像を表示できるはずです。
もし「どのテーマを選べばいいか」迷ったときは、とりあえず「シンプル」シリーズを適用してみてください。
「シンプル」シリーズ
- シンプル
- シンプル（モノトーン）
- シンプル（黒）
- シンプル（紺）
- シンプル（グレー）
- シンプル（濃赤）
- シンプル（深緑）
- シンプル（ピンク）
- シンプル（紫）
- シンプル（青）
- シンプル（黄色）
ナビゲーションバー
背景カスタマイズ ver 1.1 からナビゲーションバー表示に正式対応しました。
ナビゲーションバーのデモ
- このページ上部
- ギャラリー「背景カスタマイズのナビゲーションバー」でオーバーレイやスライドタイプのスクショ
ナビゲーションバーの特徴
- メニュー展開エリアは背景がぼける。それ以外はすべて透過
- テキスト色は変更なし
- 展開したメニューの境界線はグレーを半透明にしています
- メニュー展開したエリアのぼかし方はパターンBと同じです。つまり、ぼかした色合いは背景画像の中間色になります。
ver 1.1以降は配布CSSをコピペで完了です。特別な設定は必要ありません。
ナビゲーションカラーの選択で豊富に選べるので、配色には困らないと思います。いろんなカラーパターンを試してみてください。
おまけ
おすすめ背景画像を紹介しています。画像の配布ではありません。主にfreepikの画像を利用する方法をまとめています。
→Background Image
背景画像などの探し方を詳しく、1万字かけて記事にしました
→【個人サイト向け】おしゃれな素材の探し方【2023】
CSS知識がある方はこちらもどうぞ
→背景CSS変数一覧
このページの作り方
【公式テーマ】 アラベスク（グレー）
【ナビゲーションタイプ】 プルダウン（左）
【ナビゲーションカラー】 gray 5
【背景CSS】 パターンF2
【背景画像】 Freepik（画像上部の黒い部分をトリミングしました）
【補足】この画像だけの専用CSSはありません。ナビゲーションカラーは「ダーク背景色 + 白文字」だと、いろんな背景画像に合わせやすいと思います。おすすめ。
