WordPressでサイトの背景に画像を設定する方法

WordPress
スポンサーリンク

WordPressでは簡単な操作で背景画像を設定することができる。

背景に画像を設定することでサイトデザインの幅が広がり、より理想に近いサイトを構築することが出来るようになるだろう。

今回はテーマ”Twenty Twelve”を使い、その方法を解説していこうと思う。

なお、この解説に使用しているWordPresのバージョンは4.7.1であり、他のバージョンで同じことが出来るかどうかはわからないので注意してほしい。

スポンサーリンク

設定ページを開く

ダッシュボードから”外観”→”背景”の順にクリック。
bg001

bg002

するとこのようなページが表示される。
bg003

貼り付ける画像を選択する

画面左側にある”画像を選択”をクリック。
bg004

メディアライブラリが開くので、設定したい画像がすでにアップロードされている場合はそれを選択。無い場合はドラッグ&ドロップで追加するか、”ファイルをアップロード”タブからファイルを追加しよう。
bg005

ファイルを選択したら右下の”画像を選択”ボタンをクリック。
bg006

これでとりあえず背景画像が設定された。
bg007

配置の詳細設定

詳細を設定をするために各項目の説明をしよう。
bg008

  • 削除・画像の変更:画像の削除と変更が行える。
  • プリセット:予め用意されている設定のセットを呼び出すことが出来る。
  • 画像の位置:背景の表示位置の設定。中央・四隅と上下左右(画面端、中央寄せ)のどれかを選択できる。画像繰り返しの起点にもなるので色々動かしてみよう。
    • 配置サンプル

      配置サンプル

  • 画像サイズ:画像の拡大縮小を設定する。
    • 元のサイズ:画像をオリジナルサイズで表示する。
    • 画面に合わせる:画面の縦横どちらかにフィットするまで画像を拡大or縮小する。縦横比を維持するので基本的には余白ができる。
    • フルスクリーン:画面に余白ができないように拡大or縮小する。こちらも縦横比は維持される。
  • 背景画像の繰り返し:背景画像を貼り付けた時に余白が発生する場合、同じ画像でその余白を埋めるかどうかを設定する。
  • ページと一緒にスクロール:ページをスクロールした時に背景画像を追従させるかどうかの設定。

これらを踏まえて自由に設定しよう。設定が終わったら上にある”保存して公開”をクリックして変更を適用すれば終了だ。
bg009

画像のサイズをここの設定で拡大するとボケてしまう場合があるので、最初からなるべく大きな画像を用意しておくのがいい。

コメント

タイトルとURLをコピーしました