私はつもりこのイントロは本当に短いままにしておきます。
ここでは、この記事で議論するつもりです:
- 背景画像とは何ですか
- 視差の背景を持つものは何ですか？
- WordPressウェブサイトに背景画像を追加する方法
- WordPressで画像サイズにアプローチする方法
準備ができて、安定していますか？ 行くぞ!
背景画像とは何ですか？
背景画像は、ウェブサイトや電子メールなどの要素の背景に適用される画像です。 主人公の画像は、ウェブサイトや電子メールの主な焦点であるが、背景画像は、より微妙です。 彼らは第二の層として、他のウェブサイトの要素をサポートしています：行動への呼びかけ、他の画像、サイトのさまざまなセクションなど。
このような背景画像の例を見てみましょう：
IKEA
IKEAのウェブサイトのホームページでは、背景画像が彼らの感動的な物語を提示するために使用されます。 ストーリーのタイトルとカテゴリは、画像の上に配置されます。 実際の画像の不透明度を低下させるために使用されるグラデーションオーバーレイがあります。 このアプローチは、テキストをより見やすくするのに役立ちますが、デザインの一貫性を作成するため、別の色よりも目立つ色はありません。
愛するヴィンセント
私のお気に入りの映画の一つ、これ。
背景画像は、ヴィンセント-ファン-ゴッホと映画の背後にある物語を提示するカルーセルの後ろに横たわっていた。 背景画像は、物語に力を与え、強い感情を提供するように見えます。
緑豊かな
私は緑豊かなウェブサイトがどのように見えるかが大好きです：製品自体のようにカラフルで活気に満ちています。
今、背景画像は、このニュースレターのサインアップページの例のように、パターンや形状を使用することができます。 これらのパターンは、潜在的に鈍いものを陽気なものに変えることができます。
視差の背景画像
大英博物館のウェブサイトを見ると、ページ全体に画像があり、前景コンテンツが下にスクロー これらは視差の背景画像です。
パララックススクロールは、正しく統合されていればウェブサイトに華麗な効果を加えることができるwebデザインの傾向の一つです。
WordPressでもそんな効果が得られるので、少し後にその方法をお見せします。
WordPressのウェブサイトに背景画像を追加する方法
WordPressのウェブサイトに背景画像を追加するには、主に三つの方法があります。 調べてみようか?
-
あなたのWordPressのテーマカスタマイザを介して背景画像を追加
最も人気のあるWordPressのテーマは、このオプションが利用可能です。 私はこの例の目的のためにColibriテーマを使用するつもりです。 他のテーマはColibriテーマと同様に動作します。
選択したテーマがこの機能をサポートしていない場合は、方法2と3にスキップします。
さて、WordPressのダッシュボードから外観->カスタマイズに向かうことから始めましょう。 左側にはテーマのカスタマイザ編集オプションが表示され、右側にはウェブサイトのライブプレビューが表示されます。
テーマは、あなたがのための背景画像を配置することができます:
- 行
- 列
- ブロック（私について、ポートフォリオ、チーム、連絡先などのウェブサイト全体のセクション）)
- コンポーネント(見出し、カルーセル、価格表、カルーセルなど)
- コンポーネント(見出し、カルーセル、価格表、カルーセルなど))
これを行う方法は、背景画像が必要な場所に関係なく同じです。
サービスのウェブサイトのブロックに背景画像を追加したいとしましょう。 セクションを選択して開始します。 左側には、以下のように構成されたメニュー全体の編集オプションが表示されます:
- レイアウト
- スタイル
- 高度な
スタイル->背景タイプに移動します。
“画像”を選択します。 これで、自分の画像に置き換えることができる画像が表示されます。 
画像をクリックすると、WordPressのメディアギャラリーから画像を選択するか、別の画像をアップロードする画面が表示されます。
すでにお気付きのように、背景としてビデオを追加することもできます。
そして、視差効果のためのトグルオプションもあります！
今、この背景画像の変更を行うための別のショートカットがあります。 右からブロックを選択すると、設定アイコンが表示されます。 それをクリックすると、いくつかの編集オプションが表示されます。
“背景を変更”を選択すると、上記のように”スタイル”の中に誘導されます。
これはすべての人々でした。 かなり簡単ですよね？
さて、あなたのテーマに背景画像オプションがない場合、WordPressのデフォルトエディタでこれを行う方法があります。
-
WordPressのブロックを使用して背景画像を追加する
WordPressのダッシュボードから、”ページ”に向かいます。 次に、目的のページの下から「編集」を選択します。 以下に示すように、インターフェイスが表示されます。
デフォルトのWordPressエディタはブロックベースで、各webサイトのセクションはブロックで構成されています。 これらのブロックは、インターフェイスに表示される任意の”+”記号からアクセスできます。 左上のものをクリックしてみましょう。
今、”カバー”ブロックを選択します。 あなたはそれがあなたのページにすぐに表示されますが表示されます。
コンピュータにローカルに保存されている画像をアップロードするか、メディアライブラリ内の既存の画像から選択することができます。
メディアライブラリから画像を選択しました。 今私はそれにいくつかのテキストを追加することができます。 編集オプションはここでは非常に限られています。
カバーを選択すると、上にメニューが表示され、画像を整列させたり、ブロック全体を複製したりすることができます。 ブロックを再利用可能なものとして保存して、他のデザインで再び使用することもできます。
さて、画面の右側に、いくつかの追加の編集オプションがあります。
メディア設定の中で、固定背景オプションをオンにすると、視差効果が有効になります。
トグルがオフのときは、焦点を調整できます。
この焦点調整は、幅と高さを考慮して、パーセンテージベースでも行うことができます。
次に、オーバーレイを追加できます。 あなたは、その色と不透明度を選択することができます。
そして、あなたはちょっと完了です。
-
WordPressのプラグインを介して背景画像を追加する
ここでは、背景画像のプラグインとしてタグ付けされたいくつかのWordPressのプラグインです。 私はそれが最もインストールされ、これまでのところ最高のレビューを持っているので、単純なフルスクリーンの背景画像プラグインで少し再生する
ここで、WordPressプラグインをインストールする方法についてのチュートリアルです。
このプラグインでは、画像はブラウザで自動的に拡大縮小されるため、ブラウザのサイズに関係なく、画像は常に画面をいっぱいにします。
あなたがしなければならないのは、外観->フルスクリーンBG画像に行くことだけです。 ここから画像を選択します。
“保存オプション”を押すと、背景のないサイト上のすべてのセクションがこの画像を背景とし
今、これは無料版で何が起こっているのかです。 それはかなり基本的で、まったく柔軟ではありません。 有料プランには、次のような追加オプションが付属しています:
- 無制限の背景画像
- 投稿/ページ固有の背景画像
- ページ上のフェードトランジションを持つ複数の画像
そして、私たちは終わった、あなただけのあなたのWordPressサイトに背景画像を追加するために使用できる3つの方法を発見しました。
一日と呼ぶ前にもう一つ知ってほしいことがあります。
画像サイズ
サイトに画像をアップロードする前に、そのサイズに注意してください。 私たちは皆メガピクセルを見て知っていますが、ウェブ上ではキャッチがあります。 高解像度の画像は、その読み込み時間に影響を与えることによって、あなたのサイトを傷つけることができます。 長期的には、余分な読み込み秒はあなたのウェブサイトの訪問者とコンバージョンを失う可能性があります。 また、年齢の速度が重要なランキングの要因であるのでかなり調査エンジンでランク付けするあなたのチャンスを減らす。
一方、小さすぎる画像を使用すると、ユーザーエクスペリエンスも損なう可能性があります。 だから、我々はやりくりする必要があります。
これを行う一つの方法は、適切な明快さを確保しながら、あなたの画像のサイズを変更することができます外部のアプリを使用することです。
しかし、WordPressでは、あなたがすでに推測しているかもしれないように、…プラグインを使用して簡単にこれを行うことができます。
ここでは、Colibriで、私たちはSmushファンです。 Smushは、品質の目に見える低下なしに画像を圧縮することができます。
proバージョンでは、画像をwebp、明らかな品質の損失なしに、画像ファイルサイズを最大35％圧縮できる次世代画像形式に変換します。
そして、それはラップです、人々！
この記事が気に入っていて、WordPressウェブサイトのデザイン方法についてもっと知りたい場合は、ColibriのYoutubeチャンネルを購読し、TwitterやFacebookでフォローしてくださ