ブログの背景に画像を設定する方法【Nishiki Proカスタマイズ】

カスタマイズ・デザイン方法/Nishiki Pro
  1. ホーム
  2. カスタマイズ・デザイン方法
  3. ブログの背景に画像を設定する方法【Nishiki Proカスタマイズ】

サイトの背景に【画像】を設定するカスタマイズ方法(CSS)をご紹介します。

基本機能で設定できるのは色のみ

Nishiki Proでは、カスタマイザーの「サイト基本情報」「ベースカラー」背景カラーが設定できます。

Nishiki Proカスタマイザー ベースカラー設定
ベースカラー設定
Nishiki Pro ベースカラー変更例
背景カラーを赤にした例

※Nishikiの場合は、カスタマイザーの「サイト基本情報」「背景色」が同様に設定できます。

Nishiki カスタマイザー 背景色設定

このように色は自由に変えられるのですが、画像を設定する機能は今のところありません。(※2021年11月現在)
そのため、この記事では背景に画像を設定するためのCSSをご紹介しますね。

ところで、背景に使用する画像は決まっていますか?
背景に合わない画像もあるので、先に画像選びの注意事項をご説明します。

画像が決まっている方はこちらの設定手順へジャンプしてください。

画像選びの注意事項3点

背景に画像を使いたい時は、以下の3点に注意して画像を選びましょう。

本文が読みやすいかどうか

濃い色の画像や、何かがしっかり写っている画像を設定すると、肝心の本文が読みづらくなってしまいます。

背景に画像を設定した時の悪い例
背景画像の悪い例

なので、背景画像には「壁紙」っぽいものを使うのがオススメです。

素材サイト写真ACで「壁紙」検索した例
https://www.photo-ac.com/

引き伸ばしても綺麗な大きい画像を使おう

「背景」って、表示する範囲がとても大きいので小さい画像を選ぶと、以下のような繰り返しパターンになります。

背景に小さい画像を設定した時に繰り返される様子
640pxで繰返しになった例

そこで、画像を横幅いっぱいに表示するCSSを書きますが、この時あまり小さい画像だと引き伸ばされて荒くなってしまいます。

背景だから荒くていいや、というのもアリだと思いますが、キレイに表示したい方は少なくとも100px以上、できれば1920px以上の画像を選ぶと安心ですよ。

縦に繰り返してもおかしくない画像を選ぼう

横幅はそれでいいのですが、縦幅が問題です。

Webサイトって縦に長いので、1枚の画像を縦幅いっぱいに設定するとものすごーーく引き伸ばされてしまいます。そんな大きな画像を作るのも現実的ではないですよね。

そこで、縦に画像を繰り返し表示するのですが、画像によっては境目が見えてしまうことがあります。

背景に画像を設定した時の繰り返しの境目
背景画像を縦に繰り返した時の例

うっすらですが、ピンクの矢印の下から画像が切り替わっているのが見えますでしょうか。
このように、画像によっては繰り返したときになじまないものもあるのでご注意ください。

繰り返ししやすいパターン素材の良いサイトがありますよ。

Subtle Patterns
https://www.toptal.com/designers/subtlepatterns/
(こちらのサイトは無料で使用できますがクレジット表記が必要です。くわしくはこちら
公式FAQもご確認ください)

画像の選び方まとめ

・背景画像は壁紙素材がおすすめ。あまり色の濃すぎない、モチーフのないものを選ぼう。
・背景画像をはっきり綺麗に表示したい方は1920pxくらいあれば安心
・縦に繰り返したときにおかしくないか確認しよう

では設定方法をご説明していきますね。

背景に画像を設定する方法

画像をアップロードする

まずは、背景に使う画像をWordPressにアップロードしましょう。

WordPress メディアのアップロード

「メディア」「新規追加」からエリアにドロップ、または「ファイルを選択」してアップロードします。

WordPress メディアのURLをクリップボードにコピー

アップロードすると、「URLをクリップボードにコピー」と出てくるので、こちらをクリック。
すると画像のアドレスがコピーされるので、メモ帳などに貼り付けて保存しておいてください(後で使います)

「URLをクリップボードにコピー」が見つからない方はメディアから画像を開いてください。こちらにも「URLをクリップボードにコピー」がありますよ。

WordPress メディアのURLをクリップボードにコピー

コピーできたらCSSを追記していきましょう。

CSSに画像のアドレスを入れる

背景に画像を設定するCSSはこちらです。

body{
	background-image: url(画像のアドレス); /*画像を指定する*/
	background-size:100% auto;	/*横幅100%*/
}

「画像のアドレス」というところに先ほどコピーした画像のURLを貼ります。
こんなコードになるかと思います。

body{
	background-image: url(https://wp-firststep.com/nishiki_pro/wp-content/uploads/bg-sample1.jpg);
	background-size:100% auto;
}

追加CSSにコードを貼り付ける

このコードを、「カスタマイザー」の「追加CSS」に貼り付けます

カスタマイザーにCSSを追記

すると、画像が表示されるかと思います。

Nishiki Proテーマだとこんな感じ

Nishiki Proの背景に画像を設定した例

Nishikiだとこんな感じ

Nishikiの背景に画像を設定した例

設定は以上で完了です!

※この方法で画像を設定すると、投稿ページのヘッダーを「透過」にしていた場合透けて見えるのでご注意ください。その際は透過させないか、画像を使用するかなど調整いただければと思います。

Nishiki Proの背景に画像を設定し、ヘッダーが透過した例

他のテーマでも使える?

今回ご紹介したCSSはすっごく基本的なものなので、ほとんどのテーマでも同じように画像が設定できるかと思います。

ただ、テーマのデザインによっては見え方が異なる場合があるかもしれませんのでご了承くださいますようお願いいたします。(他テーマの方は、テーマ公式のサポートをご利用ください)

ご不明点等あれば、勉強会でご質問いただけると嬉しいです。

ご都合が合わない方は、公式のサポートフォーラムでご相談ください。

勉強会の録画はYoutubeでご覧いただけます。