トライアーチ

ノウハウ

HOME > ノウハウ > WordPressの記事背景に画像を設定するにはどうすれば良いのか

WordPressで作成した記事やコンテンツに、背景画像は設定できるのでしょうか。

ここではWordPressのデフォルト機能を利用して、背景画像を設定する方法を図解を用いて紹介します。

※ トライアーチではWordPressの制作やカスタマイズなどを承っています。ぜひお気軽にお問い合わせください。

ご相談はこちら

WordPressに背景画像を設定する3ステップ

WordPressに背景画像を設定するには、ダッシュボードから以下手順ですぐに設定できます。

  1. 背景画像の設定画面を開く
  2. 背景に設定する画像を選択する
  3. WordPressに背景画像を設定する

今回はサンプルとして「Bg-Patterns」というサイトからダウンロードした、以下の背景画像(500 × 500px)を設定していきます。

設定する背景画像

ステップ1. 背景画像の設定画面を開く

WordPressに背景画像を設定するには、まずダッシュボードにログインして「外観」から「背景」を選択します。

外観から背景を選択する画像

ステップ2. 背景に設定する画像を設定する

次にWordPressの編集画面に繊維するので、「画像を選択」をクリック。

背景画像の画像を選択画面

WordPressのメディア画面に遷移するので、

メディアライブラリの画面

「Bg-Patterns」でダウンロードしておいた、背景に設定する画像をアップロードします。

背景画像をアップロードする

アップロードしたら画面右下にある「画像を選択」をクリック。

画像を選択をクリックする画像

背景画像が設定されました。

サイト背景画像が設定されたイメージ

ステップ3. 設定した背景画像のサイズや位置を調整する

最後に設定した背景画像のサイズや位置を調整します。

設定で調整できるのは以下のとおりです。

背景画像で調整できる設定内容
プリセット 画像の位置
(デフォルト以外で表示)
画像サイズ
(カスタムのみ表示)
  • デフォルト:縦横に画像を繰り返し表示する
  • フルスクリーン:スクリーンいっぱいに画像を表示する
  • 画面に合わせる:表示する画像サイズに合わせて背景画像もリサイズ
  • 繰り返し:縦横に画像を繰り返し表示(デフォルト同)
  • フルスクリーン:画像サイズやページと一緒にスクロールなどを調整できる
  • 縦横斜め9方向に画像位置を調整

画像の位置を調整する画像

  • 元のサイズ:背景画像素材の元の大きさで表示する
  • 画面に合わせる:スクリーンサイズに合わせて表示
  • フルスクリーン:スクリーンいっぱいに画像を表示

各設定が完了したら、「公開」ボタンをクリックすることで、

公開ボタンをクリックする画像

任意で設定した背景画像が表示されます。

プリセットで設定できる画像の表示イメージを、以下に示しておきます。

デフォルトで表示される背景画像のイメージ

「デフォルト」で表示される背景画像のイメージです。

デフォルトの背景画像イメージ

同じパターンとなる背景画像であれば、デフォルトの設定でも綺麗に表示されます。

フルスクリーンで表示される背景画像のイメージ

「フルスクリーン」で表示される背景画像のイメージです。

フルスクリーンの背景画像イメージ

フルスクリーン表示にすると、背景画像の元の素材サイズによっては、かなり伸長され解像度が荒くなります。

画像パターンを伸長させたくない場合は、縦と横幅をフルスクリーンに合わせた画像サイズのものを準備することで、パターンが伸長されなくなります。

画面に合わせるで表示される背景画像のイメージ

「画面に合わせる」で表示される背景画像のイメージです。

画面に合わせるの背景画像イメージ

画面の大きさによりますが、こちらもパターンが引き伸ばされています。

解像度が高い背景画像であれば、素材の元のサイズを大きくして設定を行います。

繰り返しで表示される背景画像のイメージ

「繰り返し」で表示される背景画像のイメージです。

繰り返しの背景画像イメージ

こちらは元の画像サイズのまま表示されます。

ただし、パターンが同じものでない画像では、画像の継ぎ目が識別しやすくなってしまいます。

カスタムで表示される背景画像のイメージ

「カスタム」で表示される背景画像のイメージです。

カスタムの背景画像イメージ

カスタムでは、「デフォルト」と同様サイズで背景画像が表示されていますが、「画像サイズ」の設定箇所で

  • 画面に合わせる
  • フルスクリーン

どちらかを任意で設定することができます。

画像サイズを選択するメニュー画面

また「画像の位置」も変更できるため、一度カスタムで公開設定して細かい修正は別途行うことも可能です。

CSSで背景画像を設定する方法

WordPressでは、CSSでも背景画像を設定することが可能です。

CSSの追加と言ってもstyle.cssでなく、カスタマイズの追加CSSに追記していく方法を紹介します。

背景に設定する画像のURLを取得

WordPressのダッシュボードに入り「メディア」から「ライブラリ」を選択。

メディアからライブラリを選択する画像

背景に設定する画像をアップロード。

背景画像をアップロードする

アップロードした画像をクリックしてURLをコピーしておきます。

背景画像のURLをコピーする箇所

カスタマイズ画面を開く

WordPressのダッシュボードに入って「外観」から「カスタマイズ」を選択。

外観からカスタマイズを選択する画像

以下のようなメニュー画面が、画面左側に開きます。

カスタマイズの画面

追加CSS箇所に背景画像のCSSを追記

「追加CSS」のメニュークリックすると、

追加CSSをクリックする画像

CSSを追加できる編集画面が開きます。

CSSを編集できる編集画面

背景画像をCSSで追記して設定する

CSSの編集画面が開けたら、以下CSSを記述して、

body {
  background-image: url();
}

先にコピーしたURLを「url();」のカッコ内に貼付けます。

画像のURLを貼り付けたイメージ

完了したら「公開」をクリックすれば、背景画像の設定は完了です。

公開ボタンをクリックする画像

WordPressの背景画像を設定する方法 まとめ

WordPressで背景画像を設定するのは、

  • デフォルト機能でも
  • CSSの機能でも

簡単に設定することができます。

背景画像のサイズや位置を調整することで、同じ画像でも雰囲気を変えることができるため、ぜひ試してみて下さい。

トライアーチでは、WordPressの背景に動画を埋め込んでみたい、アニメーションをつけてみたい…といったご要望も承っています。

お気軽にお問い合わせください。

ご相談はこちら

WordPressサイト制作・構築はトライアーチ。静的HTMLをWordPress化は格安料金39,800円!初回限定総額10%OFFキャンペーン実施中!制作会社様向けサービスあり。保守・管理・更新代行も承ります。

ページトップへ