ブログの背景画像素材は、パターンで作成すると都合が良いですよ

Author

トッド(Todd)

What Content?

ブログ背景画像の作り方

作成するサイズを間違えるとブサイクになってしまうことがあるブログの背景画像。それを解決するためには繊細な微調整を繰り返すほかないのか？
そんなことは無く、ループ表示させて出来上がる画像を用意すれば良いのです。

ブログの背景画像を設定したいけど、なかなかピントの合う画像を用意するのは難しいと感じたことはありませんか？

今回は、サイズ規格が分からなくても綺麗に収まる背景画像の作成方法を紹介したいと思います。

作り方

ループ画像はどのように作っていくのか？

まずは、図形やイラストとかアイコン。何でも良いのでココでは星柄を例にしているように同じようなモノを用意します。

いくつでも構いませんが、数が増えれば増えるほど作業時間と難易度はアップしていくので簡単に作りたい方は、まずは1つから始めるとよいでしょう。

使用するモノが決まったら、そのうちの1つを使用して上記画像と同じように正方形（ひし形）の上に選択した図柄を中央寄せにして設置します。

この時、正方形と図柄の大小比が完成時のバランスにかかわってくるので頭の隅にそのことを入れておきましょう。

次に、STEP2で作成した正方形に図柄を乗せたものを4枚用意して上記画像のように並べます。その上に図柄を半分で切るようにもう一つ正方形を乗せます。

そして、上記画像に白色で設置されている正方形と交差する星柄のところだけを切り抜きます。

STEP4まで完了すれば後は、余分なところを消去してSTEP5で表示されている画像のようにしてもらうと完成です。

用意した図柄が2枚ある時は、STEP2で登場する正方形(ひし形)の台紙部分にSTEP5で完成したものを使用して同じことを繰り返します。

仕上げ

作成したループ画像を背景画像に設定しよう

上記で説明した作成方法を別の図柄を使用して、実践してみると以下のようなパターン素材を作成できます。

出来上がる画像の形状は正方形で、タイルのように敷き詰める事でどんなようなサイズ規格に対してもある程度対応することが出来る。

ちなみに、以下のような画像を作成するのには、5つの図柄を使用する必要があります。

画像が完成したらWordpressにメディアをアップロードしておきます。

そして管理画面から外観→CSS編集を選択し下記のCSSコード全体をコピペし、★～★の部分に作成した画像のURLをコピペして公開を選択すれば表示されると思います。

body.custom-background {
	background-image: url("★.png★");
	background-size: 50%;
}