素人でもブログをちょっとだけオシャレにできるデザインテクニック

公開日：2014/04/28

smart

あちこちのブログを見てまわると、おしゃれなデザインのブログがたくさんありますよね。

WordPressでも無料ブログでも、綺麗にデザインされているテーマを使えば誰でも簡単に見栄えをよくできます。でもそれだと、オリジナリティを出すのに苦労するかもしれません。

そこで今回は、シンプルなテーマにひと手間加えておしゃれに見せる小技をご紹介。やることは、背景画像の設定とグラデーションです！

背景画像を設定してイメチェンしてみよう

もしかすると、背景はシンプルに白！というのがベストなのかもしれません。下手に色づけしてしまうと、圧迫感を与えることがあるからです。

背景色サンプル

イメージ図の配色はかなり極端ですが、白は圧迫感がなく、色が濃くなるほどメインコンテンツが実寸より狭く見えたり詰まっている印象を受けます。

ただ、メインコンテンツ（記事）部分の背景色に対してまわりの色を濃くすることで、メイン部分が目立ち、記事に集中してもらえるという効果もあります。もっとも読む人によって受ける印象は変わるので、絶対的なものではありません。

背景は薄い色のほうがデザインしやすく、濃くなるにつれバランスが難しくなります。どぎつい色を使うと目がチカチカするので、それだけはやめておきましょう。滞在時間に影響します。

背景色サンプル

また、時折見かける背景色黒＋文字色白の組み合わせはあまり好まれません。よほどのことがなければ、背景色白＋文字色黒をベースに考えたほうが良いです。

ちなみに、文字色は真っ黒（#000000）より濃いグレー（#333333など）のほうが読みやすくなります。

参考初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則

ブログの場合、読まれないデザインに意味はありません。

背景画像は薄くてシンプルなものをチョイス

全体に薄い背景色を設定しておくのも良いですが、画像を使ってもうちょっとおしゃれにしてみましょう。

このブログでも、しばらくはかなり薄いブルーを背景色にしていましたが、ちょっとイメチェンしたくなって画像を敷きました。

ビフォーアフターはこんな感じ。縮小するとわかりづらいけど…

ブログ背景画像設置後

背景素材は探せばたくさん出てきますが、こちらのサイトがお勧めです。

Subtle Patterns

種類が豊富で迷ってしまいますが、おしゃれに見せるポイントは色の薄い壁紙にすること。パッと見た感じ、『これで何か変わるの？』ぐらいの薄さでかまいません。

どうしても濃くしたいなら、メインコンテンツ部分の余白を多めにとったり、全体のバランスを調整しましょう。

Subtle Patternsで背景画像を探してみよう

それでは、サイトにアクセスして画像を探していきます。

各素材ページで「PREVIEW」ボタンを押せば背景が変わるので、なんとなくイメージがつかめると思います。

subtle_1

「DOWNLOAD」ボタンから、ZIPファイルをダウンロード。

subtle_2

解凍すると、画像が2枚入っています。通常サイズと2倍サイズ。今回は小さいほうを選んで、「bg.png」にリネームしました。わかりやすい名前に変えてください。

subtle_3

アップロード前にTinyPNGで圧縮しておこう

このままアップロードしてCSSで設定すればOKですが、その前に画像を圧縮して少しでも容量を減らしておきましょう。

見た目を変えずに圧縮してくれるTinyPNGを使ってみます。

先ほどダウンロードした画像をパンダの横にドラッグ＆ドロップするだけ。

TinyPNG

圧縮作業はすぐに終わります。画像によって圧縮率は変わり、最大70％OFFになるんですが、今回は16%でした。終わったら「download」から保存します。

TinyPNG圧縮後

画像をアップロードする

それでは背景画像をアップしましょう。通常のサイトであれば、「images」ディレクトリなど適当なところに入れてください。

WordPressでは管理画面の「メディア」からアップロードする方法と、FTPでテーマの「images」ディレクトリに直接アップする方法があります。

「メディア」から新規追加した場合、「編集」から画像ファイルのURLを取得できます。

画像ファイルのURL

CSSを編集して背景画像を適用する

画像をアップしたら、つづいてCSSを編集します。

絶対リンクで指定する方法

WordPressの「メディア」からアップロードした場合は、「http://～」で始まるURLを指定します。

body {
	background: #fff url(http://～) repeat left top;
}

body {

background: #fff url(http://～) repeat left top;

}

FTPでアップロードした場合は、相対リンクのほうが簡単です。

相対リンクで指定する方法

「images」ディレクトリ等に直接アップロードした場合は、CSSが置いてある位置から相対リンクで指定できます。

WordPressでテーマ直下にCSSが置いてあるなら、こんな感じです。

css-images

body {
	background: #fff url(images/bg.png) repeat left top;
}

body {

background: #fff url(images/bg.png) repeat left top;

}

背景画像を変更したくなったら、画像ファイル（bg.png）を入れ替えるだけでOK。いちいちCSSを編集する手間が省けるため、気軽にイメチェンできます。

背景画像が表示されない場合

以上で作業は終了です。フリーの背景素材はたくさんあるので、お気に入りのものが見つかるまでいろいろ試してみてください。ユーザーに意見を聞くのも良いですね。

もし背景画像が表示されない時は、ブラウザで編集前のCSSがキャッシュされていることが考えられるので、ページを再読み込みしてみましょう。

それでも表示されないなら、画像URLの指定が間違っている可能性が高いです。相対リンクで指定しているなら、絶対リンクに置き換えて表示してみてください。CSSの<body>以外の部分で競合していることもあります。

フッターにさりげないグラデーションをかけてみよう

さて、お次はグラデーションです。

このブログではフッターを濃いグレー（#444444）にしていましたが、単色だと味気ないのでグラデーションをかけました。ビフォーアフターはこんな感じ。

フッターにグラデーションをかける

言われなければ気づかないほど淡いグラデーションにしています。僕のようなデザインの素人（しかもセンスがないｗ）は、極端なことをやると高確率で失敗します。背景画像と同じく、目立たなく、さりげなくやるのがオシャレのコツです。

グラデーションをかけるには、画像を使う方法とCSSで指定する方法があります。

CSSでやろうとすると複雑な指定が必要なので敬遠するかもしれませんが、便利なジェネレーターがあるのでコピペだけでOK！

Ultimate CSS Gradient Generatorの使い方

こちらのCSSジェネレーターを使うと、複雑なグラデーションでもリアルタイムでCSSに変換してくれます。

http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator

基本パターンも充実しているので、好みに近いパターンを選んで設定していきましょう。今回は最もシンプルな「黒→透明」をチョイス。垂直方向にかけます。

Ultimate CSS 設定

設定はこんな感じ。

背景色：#444444 → #141414
透明度：70% → 100%

グラデーション設定

あとはCSSをコピーして、フッター部分に貼り付けます。

グラデーションCSS

このようになりました。

#footer {
	padding: 24px 0 0 0;
	color: #fff;
	text-align: center;
	overflow: hidden;
	background: -moz-linear-gradient(top,  rgba(68,68,68,0.7) 0%, rgba(20,20,20,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,0.7)), color-stop(100%,rgba(20,20,20,1)));
	background: -webkit-linear-gradient(top,  rgba(68,68,68,0.7) 0%,rgba(20,20,20,1) 100%);
	background: -o-linear-gradient(top,  rgba(68,68,68,0.7) 0%,rgba(20,20,20,1) 100%);
	background: -ms-linear-gradient(top,  rgba(68,68,68,0.7) 0%,rgba(20,20,20,1) 100%);
	background: linear-gradient(to bottom,  rgba(68,68,68,0.7) 0%,rgba(20,20,20,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3444444', endColorstr='#141414',GradientType=0 );
}