WordPressウェブサイトの背景画像を設定する
ウェブサイトで使用する各画像または動画は、視聴者のブランドを定義します。 だから、あなたのウェブサイト上の背景画像は重要であり、あなたはあなたのブランドのスタイルとターゲットオーディエンスを表示したままにして、それらをデザインしたり選択したりする必要があります。
このチュートリアルでは、WordPressのウェブサイト上の背景画像を設定する方法の数を学びます。 あなたが簡単にそれを自分で行うことができるように、私は詳細にあなたのWordPressの背景画像を設定するプロセスをご紹介します。
あなたがあなたのWordPressサイトをホストしているかどうかWordPress.com または、自己管理サーバーを使用している、このチュートリアルはあなたのためです。 WordPressウェブサイトの背景画像を設定するには、次の方法を学習します。:
- WordPressのテーマ設定で背景画像を追加
- WordPressのプラグインを使用して背景画像を追加
- CSSを使用して背景写真を追加
オプション1。 WordPressのテーマ設定で背景画像を追加
多くの無料のWordPressのテーマを使用すると、背景画像を設定できます。 私はブログ、ポートフォリオ、および中小企業のための簡単なゴーにテーマである二十二から一のテーマを使用しています。 このテーマはまた、背景画像を持つことができます。
WordPressサイトの管理セクションにサインインします。 WordPressの設定のほとんどはここから処理できます。
- WordPressWordPressサイト管理ダッシュボードにログインする方法Adi Purdila
「外観」をクリックすると、webサイトの外観に関するすべての設定が保持されます。 あなたは、テーマを選択するように求められます。 あなたのテーマ(またはあなたが背景画像を持つことを可能にする他のテーマ)としてTwenty TwentyからOneを選択してください。
ここで、外観メニューの上にカーソルを置き、背景をクリックします。 テーマカスタマイザウィンドウが表示され、背景画像を選択できるようになります。
.png)
.png)
.png)
ここで、画像を選択し、WordPressライブラリから画像を選択するか、画像をアップロードします。
altテキスト、タイトル、キャプション、説明など、背景画像の詳細を設定できます。 あなたの焦点がSEOの場合は、常にaltテキストを追加することをお勧めします。
.png)
.png)
.png)
画像を選択して設定を保存すると、WordPressの背景画像が変更されます。 これで、さまざまなプリセットオプション(画面を埋める、画面に合わせるなど)を探索できます。あなたの背景画像は、あなたがそれをしたい正確にどのように見えるようになります)、。
-min.png)
-min.png)
-min.png)
左上の変更を保存ボタンをクリックすると、変更は保存されません。
オプション2。 WordPressのプラグインを使用して背景画像を追加
プラグインを使用してウェブサイトの外観を変更することは、自己管理のWordPressサイトを持っているか、から有料プランに投資している場合にのみお勧めしますWordPress.comプラグインを無料で使用することを選択した場合WordPress.com アカウントは、あなたのドメインから変更されます。wordpress.com へ。wpcomstaging。com、これは理想的ではありません。
プラグインは、あなたのWordPressサイトのための機能と機能の多くを提供しています。 投稿、ページ、およびカテゴリ:例えば、背景プラグインを使用すると、あなたのウェブサイトの複数の領域に異なる背景を追加することができます。 また、一つのプラグインであなたの背景としてYouTubeのビデオを設定することができます。 あなたの視聴者が簡単に自分の携帯電話からあなたのウェブサイトを楽しむことができるように、プラグインはまた、携帯電話用の画像やビ
- ワードプレスワードプレスのプラグインとは何ですか?レイチェル-マッコリン
- ワードプレス17ワードプレスノナブラックマンのための最高のビデオ背景プラグイン
このチュートリアルでは、非常に基本的な無料のプラグインを使用しています。 これは、単純なフルスクリーン背景画像プラグインと呼ばれています。
プラグインを有効にしたら、外観の上にマウスを置きます。 今、新しいオプション、フルスクリーンBG画像をクリックしてください。



次に、画像を選択をクリックし、WordPressの背景画像として必要な画像をアップロードします。 以前に好みの背景画像を追加したことがある場合は、メディアライブラリから画像を選択することもできます。



必要に応じて、画像のaltテキスト、キャプション、説明などの詳細を追加できます。 「画像を使用」をクリックし、「オプションを保存」をクリックします。
今、あなたのWordPressの背景画像がどのように見えるかを確認するためにあなたのウェブサイトに向かいます。
オプション3。 CSSを使用して背景写真を追加する
ここでも、CSSを使用して背景画像を追加するには、自己ホスト型のWordPressサイトを持っているか、有料プランを購読するWordPress.com.Custom CSSでは、背景画像を追加できるだけでなく、ウェブサイトの外観をさまざまに変更して、必要に応じて正確に見えるようにすることもできます。
WordPressダッシュボードに移動し、外観>追加CSSをクリックします。
.png)
.png)
.png)
ここで、これらのコード行をCSSフィールドに追加してWordPressの背景画像を設定します。
body { background-image: url("https://theimageurl"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
http://theimageurl
をWordPressの背景画像として使用する画像のURLに置き換えます。
また、あなたのWordPressのウェブサイト上の個々の投稿にカスタム背景や画像を追加することができます。 これを行うには、次のコードが必要です:
body.category-slug { background-image: url("http://anotherimageurl"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
前と同じように、http://anotherimageurl
を使用する画像のURLに置き換える必要があります。 また、slug
をサイト上の既存のカテゴリの名前に置き換える必要があります。
CSSの変更が完了したら、変更を保存ボタンをクリックしてすべての変更を保存することを忘れないでください。 今、あなたは新しい背景画像を表示するには、あなたのサイトを訪問することができます!
画像サイズに注意してください
WordPressサイトに画像をアップロードする前に、そのサイズに焦点を当ててください。 高品質のビジュアルを追加するのは魅力的です。 しかし、これはあなたのウェブサイトの読み込み速度を増加させる可能性があります。 それは大したことのように聞こえません; 但し、より遅いあなたの場所は、より大きい直帰率、意味するより多くの人々が内容を読むか、または見る前にあなたのウェブサイトを去る。 これは、順番に、あなたの変換に影響を与えます。 Googleは、二秒は、あなたがビジネスを実行する場合は特に、理想的なサイトの速度であると述べています。
しかし、一方で、サイズを小さくするためだけに低品質の画像を追加すると、ユーザーエクスペリエンスに悪影響を与える可能性があります。 したがって、理想的な方法は、バランスを保ち、良質の写真を追加することですが、必要な場合にのみ、つまりコンテンツに価値を追加し、必要な解像度に
概要
このチュートリアルでは、WordPressの背景画像を設定する三つの方法を示しました。
- テーマの外観設定を介して背景画像を追加する
- 背景画像を追加するプラグインを使用する
- カスタムCSSを追加する
あなたのWordPressのウェブサイ しかし、背景画像を選択した場合は、それがあなたの聴衆のためにあなたのブランドスタイルを設定する重要な要素であることを知っています。 あなたのWordPressの背景画像があなたのブランドイメージを反映していることを確認してください。
Leave a Reply