ブログ背景画像

デザイン五輪書

ブログ背景画像の選び方や設定方法

読了までの目安時間:約 8分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

ブログ背景画像の選び方や設定方法

ブログの背景画像について

背景画像がブログの印象を作る!?

ブログの背景部分は面積が広いので、カスタマイズ感が出る部分の一つです。
背景画像によってブログのイメージを一新する事もできます。

試しに、当サイトも背景画像をいじり、桜吹雪にしてみました。
自分で変えておいてアレですが、あまりサイトのイメージとはマッチしていませんので、桜吹雪のままにしておくつもりはありません。
でもまぁ、桜の時期が過ぎるまではこのままでいようかなとも思っています。

ブログを桜吹雪の背景画像に

と言う事で、今回はブログの背景画像の選び方と設定方法についてご紹介します。

▲もくじへ戻る

ブログの背景に使用する画像とは?

ブログの背景画像と言うと、とても大きな画像を使っているのではないかと思う方もいるかもしれませんが、実際は、一枚の小さな画像を繰り返し並べているだけです。

ブログの背景画像に大きな画像を使用するのは容量を食いますし、パソコン環境があまり良くない方の場合、サイトを開く際にパソコンに負荷がかかったり、ページが表示されるまでに時間がかかってしまったりする事もあります。
また、人によってディスプレイのサイズも異なる為、大きな画像を一枚使用するよりも、小さい画像を繰り返し並べた方が都合が良いのです。

従って、繰り返し並べても不自然にならないような画像を選択すると言うのがポイントの一つです。
特に、画像の継ぎ目の部分が分かると、非常に不自然に見えてしまいます。
背景画像を自分で作る際は、継ぎ目部分を意識する事で、自然なものを作る事が可能です。

今回私が使用した桜吹雪の画像も、継ぎ目部分が分からないように配慮しています。

境界線を分からなくする

この桜吹雪の画像はIllustratorで作成していますが、黒色の枠部分で画像が切れます。
わざと画像が途中で切れるようにし、反対側でも同じ部分で画像が切れるようにします。
すると、画像が繰り返し並べられた際に桜の花びら部分がくっ付くので、結果として、どこが画像の境界線なのかが分からなくなるのです。

桜の花びらの配置も重要なポイントです。
隙間のバランスを考えるのが大事なのですが、欲張って桜の花びらを多目に配置してしまうと、画像が繰り返し並べられた時、同じ画像が並んでいるだけ・・・と言うのが一目瞭然になってしまうのです。

背景がわざとらしくなる

テーブルクロスかよッ・・・などと、ツッコミを入れたくなってしまいます。

▲もくじへ戻る

文字の可読性にも注意しよう!

背景画像はブログのイメージを作ってくれますが、あくまでもブログのメインは文章です。
テンプレートの仕様にもよりますが、ごちゃごちゃした画像や色鮮やかな画像など、文字が読みづらくなるような画像を使うのは控えましょう。

例えば、サイドバーのリンクの文字が青いのに、背景色も鮮やかな青色をしていた場合、リンクの文字を読むのが困難になってしまうでしょう。
加えて、パソコン画面の大部分に鮮やかな色を表示してしまうと、読み手は非常に目の疲労を感じやすくなってしまいます。
そう言う理由から、文字と似ている色や鮮やかな色を使用している背景画像の使用は控えましょう。

素人は感性や好みだけで背景色や背景画像を選択してしまいがちですので、普通にチカチカするような鮮やかな色で作ったサイトを見掛ける事があります。
あなたは絶対にやらないようにしましょう。

▲もくじへ戻る

ブログに背景画像を載せる方法

スタイルシートで背景画像を設定

ブログサービスによって多少違いはありますが、大抵のブログサービスは、以下の手順で背景画像を変える事ができます。

まず、背景画像を作るなり、ダウンロードするなりして準備します。
次に、その背景画像をブログにアップロードします。
その後、スタイルシートを使って、背景部分に背景画像を適用します。

その際に使用するのが「background」プロパティです。
「background」プロパティの使用方法はこの通りです。

body{
	background-image:url(背景画像のURL);
}

背景画像のセレクタ(対象タグ)はテンプレートによるので断言できませんが、<body>タグに適用する事で背景画像を変更する事ができるケースも結構あります。

ちなみに、当サイトで使用しているTHE WORLDの場合は、<body>タグには既に背景画像が設定してあるので、使用できません。
<body>タグの色を透明にして背景を見えるように設定し直し、<html>タグに背景画像を設定する事で、背景画像を表示する事ができます。

body{
	background-color:rgba(255,255,255,0);
}
html{
	background-image:url(背景画像のURL);
}

▲もくじへ戻る

ブログにスタイルシート設定画面がない場合

WordPressやFC2ブログ、Seesaaブログやエムブロなど、スタイルシートが設定できるブログは色々あります。
ですが、アメブロのようにスタイルシートの設定ができないブログサービスもあります。
スタイルシートを使って広告を画面の外へ飛ばす事も可能ですので、それを防ぐ為でしょう。

では、アメブロでは背景画像の変更ができないのでしょうか?
実は、カスタム可能なテンプレートがあるので、それを選択する事で、背景画像を変更する事ができます。
その場合は、CSSを使用する方法ではなく、直接背景画像をアップロードする形式になっています。

アメブロで背景画像を設定する

CSSと比べると詳細設定はできませんが、画像をアップロードするだけですので、とても簡単ですよね。

▲もくじへ戻る

背景画像を自分で作れる!?

背景画像を作る事ができるソフト

背景画像は自分で作る事もできます。
例えば、PhotoshopやIllustrator、GIMPInkscapePixlr Editorやペイントなど、画像を作る事のできるソフトでしたら可能です。

個人的にお薦めなのがIllustratorです。
Illustratorは、描画した図形をピクセル単位で正確に移動する事ができるので、前述しました、背景画像の継ぎ目を分からなくするテクニックを行いやすいからです。

▲もくじへ戻る

まとめ

知っているだけでも違う

今回は、ブログ背景画像の選び方や設定方法についてご紹介しました。

各ブログサービスが事前に準備しているテンプレートのままでしたら、特に問題はありません。
ただ、自分で背景画像を変更する場合はご紹介しました問題が起きる可能性がありますので、上記ポイントを意識して、変更してみて下さい。

この記事が、何かしらあなたのヒントになれば幸いです。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :        

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る