IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / cms-style / 背景画像の使い方でブログ臭さが消える cms-style(3)

背景画像の使い方でブログ臭さが消える cms-style(3)

2017/05/1 cms-style, CSS, はてなテーマ, はてなブログ

はてなブログを 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; } }

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

はてなブログに編集履歴保存機能がついた、こりゃ便利!
#top-editarea をページタイトルエリアとして利用する cms-style(4)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com