WordPressで背景画像を追加する方法

WordPressサイトに背景画像を追加しますか?背景画像を使用して、Webサイトをより魅力的で美的に心地よく見せることができます。この記事では、WordPressサイトに背景画像を簡単に追加する方法を紹介します.


WordPressで背景画像を追加する方法

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない、またはさらに説明が必要な場合は、読み続けてください.

方法1. WordPressテーマ設定を使用して背景画像を追加する

ほとんどの無料およびプレミアムのWordPressテーマには、カスタムバックグラウンドサポートが付属しています。この機能により、WordPressサイトに背景画像を簡単に設定できます.

テーマがカスタム背景機能をサポートしている場合は、この方法を使用してWordPressサイトに背景画像を追加することをお勧めします。ただし、テーマがカスタム背景機能をサポートしていない場合は、この記事の他の方法を使用できます.

最初にあなたが訪問する必要があります 外観»カスタマイズ WordPress管理者のページ。これにより、WordPressテーマカスタマイザが起動し、Webサイトのライブプレビューを表示しながらさまざまなテーマ設定を変更できます.

WordPressテーマカスタマイザの背景画像オプション

次に、「背景画像」オプションをクリックする必要があります。パネルがスライドインして、ウェブサイトの背景画像をアップロードまたは選択するオプションを表示します.

背景画像を選択

[画像を選択]ボタンをクリックして続行します.

これにより、WordPressメディアアップローダーポップアップが表示され、コンピューターから画像をアップロードできます。メディアライブラリから以前にアップロードした画像を選択することもできます.

背景画像をアップロード

次に、背景として使用する画像をアップロードまたは選択した後、画像の選択ボタンをクリックする必要があります.

これにより、メディアアップローダーのポップアップが閉じ、テーマカスタマイザに選択した画像のプレビューが表示されます.

背景画像の設定

画像の下には、背景画像のオプションも表示されます。プリセットでは、背景画像の表示方法を選択できます:フルスクリーン、画面に合わせる、リピート、カスタム.

下の矢印をクリックして背景画像の位置を選択することもできます。中央をクリックすると、画像が画面の中央に配置されます.

「保存」をクリックすることを忘れないでください & 上部にある[公開]ボタンをクリックして、設定を保存します。以上で、WordPressサイトに背景画像を追加しました.

先に進み、ウェブサイトにアクセスして実際の動作を確認してください.

方法2.プラグインを使用してWordPressにカスタム背景画像を追加する

この方法は、はるかに柔軟です。任意のWordPressテーマで動作し、複数の背景画像を設定できます。 WordPressサイトの投稿、ページ、カテゴリ、またはその他のセクションに異なる背景を設定することもできます.

すべての背景画像が自動的にフルスクリーンになり、モバイルレスポンシブになります。これは、小さいデバイスでは背景画像が自動的にサイズ変更されることを意味します.

まず、フルスクリーンバックグラウンドプロプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

アクティベーション時に、あなたは訪問する必要があります 外観»全画面BG画像 プラグイン設定を構成するページ.

全画面の背景

ライセンスキーを追加するよう求められます。この情報は、プラグインの購入後に受信したメール、またはプラグインのWebサイトのアカウントから取得できます.

次に、変更を保存するには、[設定を保存]ボタンをクリックする必要があります。これで、WordPressサイトに背景画像を追加する準備ができました。.

先に進んで、プラグインの設定ページで[新しい画像を追加]ボタンをクリックします。背景画像のアップロード画面が表示されます.

新しい背景画像を追加する

[画像を選択]ボタンをクリックして、画像をアップロードまたは選択します。画像を選択するとすぐに、画面に画像のライブプレビューが表示されます.

次に、この画像の名前を指定する必要があります。この名前は内部で使用されるため、ここでは何でも使用できます.

最後に、この画像を背景ページとして使用する場所を選択する必要があります。フルスクリーンバックグラウンドプロでは、画像をグローバルに背景として設定できます。または、カテゴリ、アーカイブ、フロントページ、ブログページなど、Webサイトのさまざまなセクションから選択できます。.

背景画像を保存するには、必ず[画像を保存]ボタンをクリックしてください.

にアクセスして、好きなだけ画像を追加できます 外観»全画面BG画像 ページ.

グローバルに使用する複数の画像を設定すると、プラグインは自動的に背景画像をスライドショーとして表示し始めます.

画像がフェードアウトするまでの時間と、新しい背景画像がフェードインし始めるまでの時間を調整できます.

背景のフェードインとフェードアウトの設定

ここに入力する時間はミリ秒単位です。 20秒後に背景画像をフェードアウトさせる場合は、20000と入力する必要があります。.

変更を保存するには、必ず[設定を保存]ボタンをクリックしてください.

個々の投稿、ページ、カテゴリなどの背景画像の設定

Full Screen Background Proでは、単一の投稿、ページ、カテゴリ、タグなどの背景画像を設定することもできます.

別の背景画像を表示する投稿/ページを編集するだけです。投稿の編集画面で、投稿エディタの下に新しい[全画面の背景画像]ボックスが表示されます。.

単一の投稿またはページの背景画像を追加する

特定のカテゴリの背景画像を使用するには、以下にアクセスする必要があります 外観»全画面BG画像 ページをクリックし、[Add New Image]ボタンをクリックします.

画像をアップロードした後、背景画像を表示するコンテキストとして「カテゴリ」を選択できます.

特定のカテゴリの背景画像を設定する

次に、画像を表示する特定のカテゴリIDまたはスラッグを入力します。 WordPressでカテゴリIDを見つける方法に関するガイドをご覧ください.

設定を保存するために画像を保存することを忘れないでください.

方法3. CSSを使用してWordPressのどこにでもカスタム背景画像を追加する

デフォルトでは、WordPressはWordPressサイト全体のさまざまなHTML要素にいくつかのCSSクラスを追加します。これらのWordPressで生成されたCSSクラスを使用して、個別の投稿、カテゴリ、作成者、およびその他のページにカスタム背景画像を簡単に追加できます.

たとえば、WebサイトにTVというカテゴリがある場合、誰かがTVカテゴリページを表示すると、WordPressはこれらのCSSクラスをbodyタグに自動的に追加します.

検査ツールを使用して、WordPressによってbodyタグに追加されたCSSクラスを正確に確認できます.

検査ツールを使用して、WordPressによって追加されたクラスを確認する

category-tvまたはcategory-4 CSSクラスのいずれかを使用して、このカテゴリページのみに異なるスタイルを設定できます.

カスタムの背景画像をカテゴリアーカイブページに追加しましょう。このカスタムCSSをテーマに追加する必要があります.

body.category-tv {
background-image:url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
背景の位置:センターセンター;
背景サイズ:カバー;
background-repeat:no-repeat;
背景添付ファイル:修正。
}

背景画像のURLとカテゴリクラスを独自のカテゴリに置き換えることを忘れないでください.

個々の投稿やページにカスタムの背景を追加することもできます。 WordPressは、bodyタグに投稿またはページIDを含むCSSクラスを追加します。同じCSSコードを使用できます。.category-tvを投稿固有のCSSクラスに置き換えるだけです。.

この記事が、WordPressで背景画像を追加する方法の学習に役立つことを願っています。 WordPress関数ファイルの非常に便利なトリックのリストもご覧ください.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me