WordPressで背景画像を設定するプラグインとは？

ウェブサイトのトップページの背景に貼られた画像は、ユーザーに大きなインパクトを与えます。たとえば、ブラウザの全画面に貼り込まれたイメージの上にテキストを乗せるレイアウトは、とてもおしゃれな雰囲気が出せるのです。サイトのイメージアップに効果的な背景画像を設定する方法を知りたいと考えるWordPressサイト運営者も多いでしょう。この記事では、このような背景画像を設定する基本的な方法をまず説明します。次に、背景画像を簡単に挿入できる、おすすめプラグインを紹介していきます。

CSSをコーディングして背景画像を設定する方法

まず、CSSを使った方法を見てみましょう。CSSはCascading Style Sheetsの略です。ウェブサイトは、HTML（Hyper Text Markup Language）とCSSの組み合わせで作られています。まず、HTMLで「枠組み」を作っておき、文字のスタイルや色や配置などの「表示形式」をCSSでコントロールするのです。CSSを使うと、全体の枠組みに手を付けずに外観イメージを微調整できます。この機能を使って背景画像を設定するわけです。HTMLやCSSはアルファベットで書かれていて、これを「プログラム」や「コード」と呼んでいます。

「タグ」と呼ばれる記号を含む命令文で記述されるのがHTMLです。一方、CSSは3つの要素から構成されています。HTMLタグの適用範囲を示す「セレクタ」、どのような表示形式を使うかという「プロパティ」、そして、プロパティの具体的な数量を示す「値」です。このようなCSSで背景を編集するためのコードには「backgroundプロパティ」と呼ばれる、background-colorやbackground-imageを使うのが基本です。background-colorは「背景色」を制御するときに使い、background-imageは「背景画像」を指定するときに使います。

background-imageの機能は、あらかじめサーバーにアップロードしている画像を、指定した範囲の背景として表示するというものです。たとえば、セレクタにbodyを使い、値には画像のパスとしてurl(“photo.jpg”)などを指定したとしましょう。このとき、サーバーにアップロードしてあるphoto.jpgという画像が、HTMLのbodyダグで指定した範囲に表示されます。画像の「パス path」とは、呼び出してくる画像ファイルの場所を示す文字列です。

この例の場合は、CSSと同じディレクトリにあるという想定なのでファイル名だけでよいのですが、違う場所にあるときにはパスを正確に指定する必要があります。パスには2種類あり、「http」から始まるものが「絶対パス」で、「../../」などで始まるものが「相対パス」です。このあたりになると、HTMLとCSSについて全般的なコーディングの知識とスキルがないと理解が難しくなってきます。コーディング不要のテーマやプラグインが提供される意味はここにあるのです。これらは、ユーザーに代わって複雑なコーディングをこなしているといえます。

テーマの編集機能から背景画像を設定する方法

WordPressでは、それぞれのテーマの編集機能から、比較的簡単に背景画像のコントロールが可能です。まず、管理画面の左コラムに表示される「外観」をクリックしましょう。すると、プルダウンメニューが表示されるので、その中の「背景」をさらにクリックします。管理画面の右側に表示される編集画面ですべての設定が可能です。メディアライブラリにアップロード済みの画像を使う場合は「画像の選択」ボタンで選びます。また、新しい画像を使いたいときには「選択…」ボタンを押して、PC上にある画像ファイルを選択します。次に、「アップロード」ボタンでメディアライブラリに取り込みましょう。画像の選択がうまく行けば「プレビュー」欄に表示されているはずです。

表示内容の調整は「表示オプション」から行います。「位置」プロパティで画面のどちらに寄せるかを選んだり、「繰り返し」プロパティでタイル状にしたり、スクロールさせるかどうかを設定できるのです。この操作は、CSSの「backgroundプロパティ」で、background-repeatの値をrepeat-xやrepeat-yに設定することと同じです。なお、使用中のテーマによっては設定方法が異なることがあります。たとえば、公式テーマである「Twenty Seventeen」などでは、「外観」のプルダウンメニューには「背景」は表示されません。

この場合は、「カスタマイズ」から「ヘッダーメディア」を選ぶことで、画像を差し替えられる管理画面が表示されます。ちなみに、このテーマでは背景画像に動画の設定も可能で、mp4形式の動画をアップロードするか、YouTubeのURLを指定します。なお、背景画像の操作に限らないのですが、複数のプラグインを有効化していると、設定がうまくいかないことがあるので注意しましょう。その場合は、似たような背景画像のコントロール機能を持つプラグインを1つずつ無効化しながら検証することで原因を特定できます。

【おすすめプラグイン】1.Elementor & Anywhere Elementor

ページビルダーのElementorを使うとWordPressの固定および投稿ページのカスタマイズをドラッグ＆ドロップで実現できます。このElementorで作成されたページや、ライブラリテンプレート、グローバルテンプレートを好みの場所に挿入できるアドオンがAnywhere Elementorです。「アドオン add-on」とは機能を追加するプログラムのことで、Anywhere ElementorはElementorを使いやすくするために提供されているアドオンといえます。アドオンは機能を追加するので、単独では動作せず、前もってメインのプログラムがインストールされている必要があります。

つまり、Anywhere Elementorを使うには、まずElementorが有効化されていることが前提条件です。Elementorは無料版でも有料版でも使えます。Anywhere Elementorの主な特徴は、ショートコードを使うため、簡略なコーディングでページデザインが実現できる点です。手軽に編集ができるようになるため、投稿ページなどへの背景画像の挿入に活用すると効率が上がるでしょう。テンプレートの画像を変更すると、それを適用したページの画像すべてがアップデートされるからです。

Anywhere Elementorの導入手順は、まずインストールして有効化します。うまく有効化されていれば、管理画面の左コラムに「AE Template」ボタンが表示されるはずです。ここで「Add New」をクリックして「Global Template」と呼ばれるテンプレートを作成します。背景画像に使うテンプレートであれば、メディアライブラリから画像を挿入しておきましょう。編集画面では、このように背景画像を挿入されたページは「AE Global Templates」というリストに表示されます。

ここで、各ページのリストにはショートコードが表示されていることを確認しましょう。ショートコードは、「INSERT_ELEMENTOR id = xxx」のように記述されます。xxxの部分には、Elementorを使用して作成されたページの投稿IDが自動的に挿入されています。これを新規作成する投稿ページなどにコピー＆ペーストすれば、テンプレートの内容が反映されるという仕組みです。

【おすすめプラグイン】2.Elementor & Anywhere Elementor Pro

ElementorにもAnywhere Elementorにも、利用できる機能が増える有料の「Proバージョン」があります。Anywhere Elementor Proは、Elementorの無料版と組み合わせて使えるため、両方をPro版にアップグレードする必要はありません。背景画像関連機能としては、まず、投稿ページのアイキャッチ画像をヘッダー画像として表示できます。また、背景画像をスライドショーとして設定可能です。

背景画像をスライドショー化するには、jQueryなどでコーディングする方法もありますが、相当のスキルが要求されます。jQueryとは「動的な」ウェブサイトを実現するために使われるコーディング言語であるJavaScriptを扱いやすくする仕組みです。「動的」というのは、ユーザーのアクションがページの表示に反映されることをいいます。たとえば、クリックすると画像が入れ替わったり、マウスオーバーした部分がアニメーションとなって動いたりすることを指します。

Anywhere Elementor Proでは、複雑なコーディングなしに、そのようなダイナミックで印象的なウェブページを作成することができるのです。その他、WooCommerceを使ったECサイトのためのページの作成も容易になります。印象的な背景画像を使ったページと組み合わせれば、売上向上に役立つことでしょう。

【おすすめプラグイン】3.Background Manager

背景画像の挿入に特化したプラグインの例として、Background Managerがあります。背景色または背景画像を選ぶことが可能で、設定も非常に簡単です。インストール後に有効化すると、各ページの編集画面に「Fully Background」という設定項目のウィジェットが表示されます。背景色を設定するには、カラータブをクリックして色を選びましょう。背景画像を挿入するには、まずウィジェット内の「Would you like layout in background」のタブを「No」にします。

すると「Set background image」というリンクが表示されるので、クリックして、メディアライブラリに保存されている画像ファイルを選択しましょう。実際のブラウザ上での表示設定は、ウィジェットに表示された「Attachment」タブで、画像を固定するか、スクロールさせるかが選べます。また、ブラウザの表示画面サイズが画像より大きいときの繰り返し表示の設定で使うのは「Repeat」タブです。たとえば、「No repeat」にすると、背景画像が繰り返されず、画像が表示されない部分には背景色で設定した色が表示されるのです。

【おすすめプラグイン】4.Responsive Full Width Background Slider

Responsive Full Width Background Sliderは、背景画像スライダーを簡単に挿入できるプラグインです。画面の表示幅に合わせた全画面表示などが可能になります。インストール後に有効化すると、管理画面の左コラムには「RFWB Slider」のメニューが表示されます。また、各ページの編集画面のウィジェットには「Responsive Full Width Background Slider」が表示され、チェックボックスにチェックを入れると、スライダーが表示されません。背景画像の選択や、表示サイズ、スライドの移行時間、アニメーションなどの詳細設定は「RFWB Slider」メニューで行いましょう。背景画像の選択には、ファイル名と保存場所までのパスを指定します。なお、インストールした時点で、数枚のサンプル画像が登録されているので、すぐ動作確認に使えるところは便利な点です。

【おすすめプラグイン】5.Smart Slider 3

Smart Slider 3を使えば、背景スライドショーにダイナミックな表現を与えることができます。主な特徴は、レスポンシブ対応、動画の自動再生、サムネイル表示、アニメーション設定、サイズ・位置指定などで、ひと通りの設定が無料で行える点です。インストール後に有効化すると、管理画面の左コラムに「SmartSlider」が表示されます。クリックすると「Create Slider」ウィンドウがポップアップするので、サイズや名前を指定して作成するか、プリセットされたものを選びましょう。

プリセットは、イメージのみの「Default」、下にサムネイルが表示される「Thumbnail」、画像の説明が表示される「Caption」から選べます。さらに、既成のスライドが多数収録されているテンプレートライブラリから選ぶことも可能です。画像の編集は、各操作に割り当てられたタブをクリックして行います。洗練されたインターフェースが、効率的な作業を可能にしているといえるでしょう。画像にエフェクトをかける機能もついているため、背景をぼかしたり、コントラストを下げることもできます。これは、画像の手前にあるテキストやボタンを強調することになり、イメージのインパクトとテキストのメッセージがバランスよく伝わるページが作成できるのです。

【おすすめプラグイン】6.jQuery.BgSwitcher

WordPressのプラグインではないのですが、コーディングの知識とスキルがあれば、背景画像表示にjQueryのプラグインを使う方法があります。ここで紹介するjQuery.BgSwitcherは、CSSのbackground-imageで引っ張ってくる画像を、スライダーとして切り替える機能を提供するプラグインです。エフェクトをつけて背景画像を切り替えたり、ファイル名を連番で自動読み込みができたり、背景画像スライダーとして十分な機能を持っています。背景を表示したい要素の画面に対する比率をコントロールできるため、インパクトの強い全画面表示も可能です。

たとえば、要素の縦横方向の比率を height : 100vh ; width: 100vw ; などで100％に指定すれば、ブラウザの全画面表示が可能になります。なお、jQueryのプラグインを利用するには、jQueryを使えるようにする操作が必要です。jsファイル形式のプラグインファイルをダウンロードするだけでは動作しません。これには、jQueryの公式サイトから、ライブラリファイルをダウンロードする方法と、Googleなどのサーバーが配信しているファイルを使う方法があります。それぞれパスのコーディングに違いがありますが、HTMLファイルとjQueryのライブラリを、scriptタグを使ったコードで「紐づけ」することで、初めてjQueryが使えるようになるのです。

【おすすめプラグイン】7.Infinite Posts

縦方向や横方向に長い画像を背景に使いたいときには、Infinite Posts プラグインがおすすめです。複数枚の画像をスライドさせるのではなく、1枚の画像をゆっくりスクロールさせる機能を持っており、パノラミックな空間の広がりを演出できます。切れ目のないスクロール表示が可能なので、垂直または水平に無限にループする背景画像を簡単に設定可能です。なお、このプラグインは「Themify」と呼ばれるWordPressテーマ用のアドオンとして提供されています。そのため、その他のテーマで使うには「Themify Builder」プラグインの事前インストールが必須です。

まとめ

背景画像は大きなインパクトがあるため、ユーザーの興味を引きつけます。画像にスライドアニメーションなどの動きが加わると、より強い印象を与えられます。従来、そのような表現を最初からコーディングするには、HTMLやCSSのスキルだけではなく、jQueryなどの扱いにも習熟しておく必要がありました。ところが、ここで紹介したWordPressやjQueryのプラグインを利用すれば、ダイナミックな効果を持った背景画像が比較的簡単に挿入できるのです。