背景画像の使い方でブログ臭さが消える cms-style（３）

はてなブログを WordPress 風に！ > cms-style 記事一覧

はてなブログをどうやって当サイトのデザインにしているかを書いています。

ウェブサイトのデザインは、グリッドレイアウトと呼ばれるブロック単位でデザインを考える方法を使う場合が多いと思います。ブログで言えば、タイトル、メインコンテンツ、サイドバーという配置が多く使われ、サイトの特徴付けのためにタイトルの背景に画像を入れたりします。

当サイトの背景画像の使い方です。

• 背景画像の構想
• どの要素に背景をつけるか
• 実際の CSS

背景画像の構想

• タイトル（サイト名）だけではなくコンテンツ全体に背景をつける
• できるだけ軽量にする
• 肝心の文字情報が読みにくくならないよう配慮する

という構想のもと、

• やや大きめの画像をデバイスの高さの 1 / 3 から 1 / 2 程度で表示
• 画像の上にグラデーションをかけてコンテンツの背景にまで続いている印象をもたせる

という方法をとっています。

どの要素に背景をつけるか

通常、body や #container（はてなブログの場合）に背景をつければいいのですが、今回の場合、画像からドキュメント全体にシームレスにグラデーションをかけますので、#top-editarea につけています。

そのため、次の考え方を取る必要があります。

• #blog-title, #top-editarea, #content, #bottom-editarea をデバイス幅いっぱいにする（何も指定しない）
• コンテンツ幅は、#content-inner, #wrapper でコントロールする

そのうえで、#top-editarea に画像を貼り、グラデーションは、#top-editarea の疑似要素 :after（:before はアニメーションに使うため）にかけ、#content にその続きのグラデーションをかけています。

実際の CSS

/* top-editarea */
#top-editarea {
  height: 350px;
  background: url(画像URL);
  background-size: cover; /* 画像サイズによる */
  background-repeat: no-repeat;
  width: 100%;
  background-position-x: center;
  position: relative; }


  #top-editarea::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 350px;
    background: -webkit-linear-gradient(top, transparent, #382217 90%);
    background: linear-gradient(to bottom, transparent, #382217 90%); }


#content {
  background: -webkit-linear-gradient(top, #382217, #ffffff);
  background: linear-gradient(to bottom, #382217, #ffffff); }


@media only screen and (min-width: 768px) {
  #top-editarea {
    height: 520px; }
    #top-editarea::after {
      height: 520px; } }

当サイトでは画像の上に記事タイトル等を表示するためにかなり暗めの画像やグラデーションを使っています。また、もっと画像を大きく見せたい場合は、コンテンツの配置位置とのバランスを変更すれば可能です。これは次回の予定です。