Stinger7：サイト全体の背景をカスタマイズする方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は無料WordPressテーマ：Stinger7の背景をカスタマイズする方法を紹介したいと思います。

でも背景をカスタマイズって言っても何するわけ？ということなんですが、ここでは

1. 背景の色を変える
2. 背景にパターン画像を使用する
3. 背景全体に一枚の画像を固定表示する

という3つのカスタマイズをシェアしたいと思います。

2016年2月17日追記

コードや文章を一部修正しました。

カスタマイザーで背景を設定すると、style タグでスタイリングされてしまうので、!important で上書きするよう修正しました。

カスタマイズ前

↓ カスタマイズ前はうすいグレー（#f2f2f2）がかかった状態

カスタマイズ後

カスタマイズ 1

↓ 背景の色をベージュ（#FFF7EC）に変更

カスタマイズ 2

↓ 背景に継ぎ目のない繰り返し素材を使用

カスタマイズ 3

↓ 一枚の画像を背景全体に固定表示
（スクロールしても背景は固定）

[ad]

カスタマイズ 1. 背景の色を変更

まずは背景色の変更です。

Stinger7では子テーマを用意してくれているので、子テーマの style.css に以下のコードを追加します。

body {
    background-color: #FFF7EC !important;
}

これで背景色がグレー（#f2f2f2）からうすいベージュ（#FFF7EC）に変わりました。

別の色にする場合には、background-color: #FFF7EC; の #FFF7EC 部分を、 #333 や #fafafa のような別のカラーコードにすれば大丈夫です。

カスタマイズ 2. 背景にパターン画像を使う

次は背景にパターン画像を（継ぎ目が見えないパターン画像）使う方法です。

でもそもそもそんな素材ないよ？という人は、Subtle Patterns というサイトから探すのがオススメです。
サイト名の通り背景が主張し過ぎない程度に、サイトの雰囲気を変えることが出来る素材が色々まとめられています。

http://subtlepatterns.com/

2-1. 素材をダウンロード

まずは素材をダウンロードします。

（もしパターン素材も用意できている人は、○○から読み進めて下さい）

ここでは Handmade Paper という紙のテクスチャをダウンロードしました。
（素材への直リンクはできませんが、paper というタグから探せばすぐに見つかるはずです！）

↓　ダウンロードした中身。この中の handmadepaper.png を使います。

2-2. 素材をメディアライブラリにアップロード

次に用意した素材をWordPressのメディアライブラリにアップロードします。

アップロードした素材をクリックすると、URLなどの詳細情報が表示されるので、このURLをコピーしておきます。

2-3. CSSファイルを編集

ここまででパターン画像を使う準備ができたので、CSSファイルを編集していきます。

お使いのCSSファイルに以下のCSSコードを追加すると、、、

body {
    background: url('https://○○.png') repeat 50% !important;
}

下の画像のようにパターン素材が表示されるようになりました。

上のコードの中の ○○.png 部分は、先ほどメディアライブラリにアップロードした素材のURLで置き換えて下さい

カスタマイズ 3. 背景全体に一枚の画像を固定表示

最後は背景全体に一枚の画像を固定表示させる方法をご紹介します。

2016年2月17日再編集

外観→カスタマイズ→「背景画像」から表示させたい画像を選択します。

次に子テーマの style.css に以下のコードを追加します。

body {
    background-size: cover !important;
    background-attachment: fixed !important;
}

これで一枚の画像が固定されたまま表示されるようになりました。
（スクロールしても背景画像は固定されたまま動きません）

ちょうどいい画像がなかったので分かりづらくなってしまったかもしれませんが、普通の写真でも同じように使うことができます。

ぜひお好みでお試し下さい。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。