サイトの背景を変更する

背景色や画像を設定してサイトの外観をカスタマイズしましょう。方法については、このガイドの手順を参考にしてください。

このガイド内

1. 背景を選択する際のヒント
2. 方法1: サイトエディターで背景を変更する
   1. 背景色
   2. 背景画像
3. 方法 2: カスタマイザーで背景を変更する
   1. 背景色
   2. 背景画像
   3. 変更内容を保存する

背景を選択する際のヒント

背景色や画像の設定は、自分らしさを表現し、他のサイトとの差別化を図る際に効果的な方法です。サイトの背景をどのようにカスタマイズするか検討するときは、以下のヒントを参考にしてください。

• サイトのテキストと相互に引き立て合う色を選び、調和しない色や文字が読みにくくなる色は避けます。
• 使用する画像によっては、背景画像があるとその上に重なるテキストが読みにくくなることがあります。サイトのコンテンツが不明瞭にならないよう、控えめな画像や無地のパターンを選ぶのがポイントです。
• サイトの横幅いっぱいに拡大してもぼやけて見えない高品質の画像を選びます。高品質の画像が揃った無料写真ギャラリーをご活用ください。

方法1: サイトエディターで背景を変更する

サイトエディターに対応するテーマをサイトに使用している場合、この方法でサイトの背景を変更できます。サイトがサイトエディターを使用しているかどうかを簡単に判断するには、ダッシュボードの「外観」でチェックします。ここにエディターが表示されている場合、次の手順でサイトの背景を変更できます。

背景色

1. ダッシュボードで「外観」→「エディター」の順に移動します。
2. 左側の「スタイル」をクリックするか、この図中にある「スタイル」アイコンを選択します。このアイコンは黒と白の丸で表示されます。
3. 「色」オプションをクリックします。
4. 「背景」オプションをクリックします。
5. カラーピッカーを使用して任意の色を選択します。無地を選択することも、グラデーションを定義することもできます。
6. 「保存」をクリックします。

背景画像

カバーブロックを使用すると、ページのすべてのコンテンツの背後に背景画像を配置できます。次の手順に従ってカバーブロックで画像を追加し、ページのすべてのコンテンツを画像の上に配置します。

1. ダッシュボードで「外観」→「エディター」の順に移動します。
2. 左上にある3本の水平線アイコンをクリックして「リスト表示」を開きます。
3. 「リスト表示」セクションの一番上のブロックにマウスオーバーします。
4. ブロックの右側にある3つのドットをクリックします。
5. 「前に挿入」オプションをクリックします。

6. カバーブロックを他のすべてのブロックの前に挿入します。
7. 背景画像をカバーブロックにアップロードします。
8. 「リスト表示」で他のすべてのブロックを選択して移動し、「カバーブロック」の中に配置します。下の動画のようにクリック & ドラッグで操作できます。
   • ロックされているブロックがある場合、ロックを解除すると編集と移動ができるようになります。
9. 背景画像を追加した後にカバーブロックの上にあるテキストが読みにくくなった場合は、透過率の設定を使用して表示を改善できます。
10. 右上にある「保存」ボタンをクリックします。

方法 2: カスタマイザーで背景を変更する

クラシックの WordPress テーマでは、カスタマイザーに背景画像の設定があります。サイトにクラシックテーマがあるかどうかを簡単に確認するには、ダッシュボードの「外観 」→「カスタマイズ」で確認します。ここで「色・背景」が表示されている場合は、次の手順でサイトの背景を変更できます。

背景色

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「カスタマイズ」の順に移動します。
3. 「色・背景」タブをクリックします。
   • 「カスタマイズ」に「色・背景」が表示されない場合、お使いのテーマは色と背景の変更に対応していません。サイトのフルコントロールを希望する場合は、サイトエディターテーマに切り替えることをおすすめします。 
4. 次の画面で「背景」の設定を表示します。以下の説明のように、対応する番号の付いた各セクションをクリックして、サイトの背景をカスタマイズします。

1. 色付きのボックスエリアをクリックすると、テーマの背景をカスタマイズするためのオプションが表示されます。
2. 「パレット」をクリックして、サイトに使用する新しいカラーパレットを選択します。
3. 「画像を選択」をクリックして背景に使用する画像を選択します。このオプションは、テーマが背景画像に対応している場合にのみ表示されます。背景画像の詳細については以下をご覧ください。
4. 自動表示される色候補のいずれかをクリックしてサイトで使用します。
5. 「独自の色を選択」リンクをクリックしてカラーピッカーを開き、それを使って背景のカスタムカラーを設定します。
6. いずれかのパターンをクリックし、サイトの背景として使用します。
7. 「その他」ボタンをクリックするとその他のパターンが読み込まれ、そこから選択できます。「その他」ボタンを1回クリックすると、その横に「戻る」ボタンが表示されます。これを使って、現在の選択画面より前に表示されたパターンを読み込むことができます。背景パターンは COLORlovers から提供されています。

背景画像

サイトの背景に使用する画像を選択すると (上の図の3を参照) 、「オプション」ボタンがその真下に表示されます。そのボタンをクリックすると、以下で説明するように、背景画像の表示を管理するための数種類の設定が表示されます。

1. 「画像を選択」をクリックしてメディアライブラリから既存の画像を選択するか、新しい画像をアップロードします。
2. 「オプション」をクリックして背景画像の表示に関する追加設定を開きます。
3. アイコンをクリックして背景画像の位置を調整します。
   • 「位置」は背景画像の配置 (左揃え、中央揃え、右揃え) をコントロールします。
   • 「繰り返し」は画像を1回表示するか、縦に繰り返すか、横に繰り返すか、タイルとして表示するかを指定します。
   • 「固定位置」では、ページを上下にスクロールしても画像が固定されたままになります。
   • 「下色」は背景画像の後ろで読み込まれる色です。
4. 色付きのボックスをクリックしてカラーピッカーを開き、背景に別の下色を選択します。
5. 「背景画像を非表示」をクリックして現在の画像を削除し、別の画像を選択するか、代わりに無地の背景色またはパターンを使用します。

変更内容を保存する

変更が完了したら、画面上部の「変更を保存」ボタンをクリックして背景を保存します。