WordPressでブログの背景画像を設定する方法！CSSで背景を設定する

アリスです。

スマホでは特に背景を設定する必要はありませんが、PC表示では薄い灰色等に変更したほうがよいです。

なぜなら、PC表示ではスペースが多いからです。

初期状態では背景が白色で表示されますが、白色だと見た目もダサいし、まぶしいからです。

そこで、今回は背景を設定する方法を紹介します。

背景画像を用意する

下記のSubtle Patternsというサイトで背景画像をダウンロードします。

Subtle Patterns | Free textures for your next web project

Subtle Patterns brought to you by Toptal, free textures for your next web project. Find out more here.

www.toptal.com

私が使っている背景と同じものを使用する場合は、左上の検索ボックスで、「sos」と入力してください。

好きな画像が決まったら、ダウンロードボタンを押します。

目立つ背景であると、記事の中身を読んでいても背景が気になってしまいます。

目立たない無難な背景を設定しましょう。

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

用意した背景画像をWordPressのダッシュボードにある「メディア」からアップします。

アップしたら、メディアから画像を選択してください。

すると添付ファイルの詳細という画面がでてきて、右側にURLが表示されます。

URLをコピーします。

背景画像を設定

WordPressのダッシュボードから、「外観」の「テーマの編集」を選択します。

style.cssというソースコードがありますので、そこの末尾に下記のコードを貼り付けてください。

/*---------------------------------
背景
--------------------------------*/
body {
    background: #fff url(ここに画像のURLを貼り付ける) repeat left top;
}

「ここに画像のURLを貼り付ける」のところを削除して、先ほどコピーした画像のURLを貼り付けます。

ちなみに、デザインテーマのSimplicityを使っている場合、WordPressダッシュボードの「外観」→「カスタマイズ」→「背景画像」で設定できます。

楽ちんですね。

キャッシュが残っていて背景画像を設定したのに反映されない場合がしょっちゅう起こります。

その場合は、キャッシュを消す必要があります。