[WordPress] 背景画像テスト、サンプル画像・サイズ・設定の記録

設定は簡単だけど、「思い通りのサイズ」に調整するのが、ちょっとむずかしい！

とにかく、いくつかのサイズとオプションを試してテストしました。

そして、テスト結果の見た目、使用した画像サイズと設定、携帯表示スピードなどを記録しました。

「もっと大きくしたい・同じくらいがいい・小さくしたい」という感想に合わせて、サイズ調整する目安にご利用ください。

「手順」をご存知のかたは、1番は飛ばしてください。

背景画像設定の手順

１．WordPress画面の[外観]メニューにある[背景]をクリック。

２．左サイドに表示された[画像を選択]をクリックして、自分の画像を指定します。

３．[プリセット]からオプションを選びます。その選択によって、更にオプションが表示されたりします。お好みで調整・選択します。

４．[公開]ボタンを押すと、ブログ上で反映されます。

背景画像設定　プリセットオプションの紹介

先ほどの手順３で登場した [プリセット]オプションは５種類あります。

[デフォルト]　このテストのときは、画像が元のサイズで（多分）繰り返されました。
選ぶ画像によって、お任せのような感じで設定されるようです。

[フルスクリーン]　画像のサイズが、画面のサイズ（フルスクリーンサイズ）に拡大されて、固定されます。画像の位置を調整できる矢印があらわれます。

[画面に合わせる]　画像のサイズがフルスクリーン程ではないけど、かなり大きく拡大されます。[画像の位置]を調整できる矢印があらわれ、[背景画像の繰り返し]も指定できます。

以下のテストでは[背景画像の繰り返し]を有効にしています。

[繰り返し]　画像が元のサイズで（多分）繰り返されます。[画像の位置]を調整できる矢印と[ページと一緒にスクロール]オプションがあらわれます。

[ページと一緒にスクロール]オプションの有効・無効を両方テストしましたが、携帯表示スピードに変化はありませんでした。

[カスタム]　今までの全ての機能が使える感じです。[画像の位置]、[画像サイズ]、[背景画像の繰り返し]、[ページと一緒にスクロール]が表示されるので、好きなように設定できます。

同じ画像を使うとこれまでのテストと重複するので、テストは省略します。さらっと、各オプションの説明を載せました。

[画像の位置]を調整する矢印の使用例を載せます。

例えば、以下のように、背景画像を設定したとしましょう。葉っぱの茎しか見えていません。

[画像の位置]の、左矢印を押すと、こんな風に画像を移動できます。

[画像サイズ]は以下から選べます。差が明らかになるように、640×422サイズの画像でテストしました。

[元のサイズ]　文字通り、元の画像サイズのまま表示されます。

[画面に合わせる]　元の画像サイズよりかなり大きく、フルスクリーンサイズよりは小さいです。

[フルスクリーン]　画像が画面（スクリーン）の大きさに拡大されます。

何も表示されないか、以下の２種類です。

できあがりサンプル・画像サイズ

１つのアイコンを繰り返し表示させて、パターン模様にしたい

サンプルに使ったのは私のファビコン画像で、正方形画像です。

でももちろん、縦長でも横長でもＯＫです。

（サンプル１は、すでに載せた結果です。）

サンプル１：細かいパターン　きっちりタイプ

サンプル２：細かいパターン　余白ありタイプ

つまりすぎ！と思ったら、元々のアイコン画像に余白を作ります。

サンプル１で取り込んだ画像は、以下の左側のイメージです。

余白がほぼありません。

右のイメージのように、元々、アイコンの周りに余白を残すと、パターンにも余裕がでます。

サンプル３：超大柄パターン　きっちりタイプ

サンプル４：ちらしパターン

上のサンプルはすべて、取り込んだアイコンが規則正しく並んでいます。

でも、花びらがヒラヒラ、果物がコロコロなど、全体にちらばっているようにしたいときもありますよね。こんな感じ。

そんなときは、イラストやアイコンを散らした画像を作成します。

私はパワーポイントで、以下のように作成しました。

自分で作るのはめんどくさいなぁと感じる場合は、元々そういうデザインのフリー素材を選べばＯＫですね。

サンプル５：左右に縦方向のラインを入れたい

私が作ったパワーポイントのイメージは以下です。

すてきな素材を背景にする・PageSpeed Insightsのデータを追加

これまでのテスト（２～23KBの画像）では、携帯表示スピードに変化がありませんでした。

あまりにも変化が無くて参考にならなかったので、ここからは、PageSpeed Insightsのデータも加えます。

何もしない状態での、当ブログの速度スコアは、モバイルが76、パソコンが94でした。
(最高スコアは100です。)

測定ページは、文字数3,350の[Cocoon] 簡単！最初の見た目設定２選を使用しました。

サンプル６：さわやかな葉っぱの画像

サンプル７：ポップでかわいい画像

サンプル８：上品でエレガントな画像

サンプル９：あったかそうなフワフワ画像

サンプル1０：ゴージャスなお花画像

サンプル６～１０のPageSpeed Insights結果まとめ

ID	画像タイプ	サイズ	大きさ	設定	モバイル	パソコン
０	なし	0	0	なし	76	94
６	JPG	85	640×422	フルスクリーン	77	96
７	JPG	57	960×1280	繰り返し	75	96
８	PNG	417	1371×1920	画面に合わせる	75	92
９	JPG	354	1920×1281	フルスクリーン	74	92
１０	JPG	90	1920×1280	フルスクリーン	75	94

おわりに

自分があまりにももう、グレーの背景に慣れてしまって、すっかり心地よいんですよね～。

「視覚」に訴えるブログは、背景があると楽しいなと思います。アートとかファッション系、ショッピングやイベント情報とかのブログ。読者層の年齢とかテンションも考慮したいところですね。

当ブログの場合は「手順」がメインなので、スッキリしているほうがいいかと思い直しました。

色だけ変えてみようかな～。（この苦労は一体・・・。）
追記：その後、「白」に決定しました！

背景がさりげなく、自然に存在しているのって、すごいですよね。

雰囲気も出せますし。

その辺のセンスが光るブログを参考に、もうしばらく勉強します！