サイトアイコン Green

ブログのデザインをちょこっとリニューアル～背景をミニマルな白からアイキャッチ画像が透かして見えるデザインに変えました

gruffuna
ブログのデザインをちょこっとリニューアル～背景をミニマルな白からアイキャッチ画像が透かして見えるデザインに変えました

少し前になりますが、ブログのデザインをちょこっとリニューアルしました。デザインを今のフォーマットに変更したのが2017年2月でしたから、だいたい1年でのマイナーバージョンアップといったところでしょうか。

1年前のリニューアルの時にはデザインに対してこんな背景を持って進めました。

http://ryu.jpn.com/archives/4587

少しだけのリニューアルなので、大筋は変わりませんが「色合いはモノトーンでミニマルに」というところのみ、飽きがこないように「透明感を持ってミニマルに、でも飽きがこないように変化をつけて」という感じで変更しました。

記事のアイキャッチ画像を背景につかう。アイデアのきっかけは「Qetic（けてぃっく）」から

ページごとに変化が欲しいなぁ。というアイデアは、音楽やファッションのニュースメディア「Qetic（けてぃっく）」からもらいました。

素敵なアーティストやファッションの写真を背景画像に使うというアイデアは素晴らしく。サイトがちょっと重いデメリットなんてのを吹き飛ばす感じで、グググっと引き込まれました。

我がサイトはというと、レベルは低いのですが自分なりに少しこだわって撮影した写真や、いつも苦労しながら検索して探してくるフリー画像など、少しだけ時間をかけてアイキャッチ画像を設定しているので、こういう画像を活かしながら、ページごとに変化をつけられるアイデアはぜひ使わせてほしいと思いました。

で、ご覧のとおり今までの真っ白な背景から、ぼかしたアイキャッチ画像が透けて見えるような背景にデザイン変更しました。
 

↓　↓　↓　　変更後　　↓　↓　↓

ページごとにアイキャッチ画像を呼び出し、ぼかしを入れた上でコンテンツの背景で透過してみせるための設定

この設定、はじめてみたらそんなに手間が掛からなかったので、手順とソースを記録しておきます。手順というか考え方は以下の通りです。

  1. ページごとのアイキャッチ画像をPHPで背景として呼び出す
  2. 呼び出したアイキャッチ画像をCSSで加工（ぼかしと透過）する
  3. 上に乗せるコンテンツの表示をCSSで最適化する

最初に「1.ページごとのアイキャッチ画像をPHPで背景として呼び出す」という処理では、ヘッダーのBodyタグの下に以下のようなソースを加えました。

<body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>
<span class ="thumbnails-background" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?&gt)"> </span&gt

bodyタグの下に、background-imageでアイキャッチ画像を呼び出すPHP関数を書いています。加えて後ほどCSSで装飾するために「thumbnails-background」というクラスをあてています。

「2.呼び出したアイキャッチ画像をCSSで加工（ぼかしと透過）する」では、上記で呼び出したアイキャッチ画像にCSSで2つの設定を行います。

.thumbnails-background{
  background: no-repeat center center;
  background-size: cover;
  overflow: hidden;
  z-index: 0;
}

上記では主にアイキャッチ画像の位置を指定しています。

.thumbnails-background:before{
  content: "";
  display: block;
  position: fixed;
  background: inherit;
  opacity :0.8;
  filter: blur(5px);
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
}

上記ではアイキャッチ画像の手前に「:before疑似要素」のクラスを活用して、ボケのフィルター（filter: blur(5px);）と、透明度のフィルター（opacity :0.15;）を設定しています。:before疑似要素では要素の前にテキストなどを「content: “ここに指定”;」を使って挿入することができますが、今回はフィルターを設定するための活用なので「content: “”;」と記載しています。

最後に「3.上に乗せるコンテンツの表示をCSSで最適化する」の設定です。

section.main {
    background-color:rgba(255,255,255,0.9);
}

ボクの場合はロゴ以下、フッターの手前までの要素にCSSを提供するために「section.main」をクラスに指定しました。その上で、背景色を白の透過にするために「background-color:rgba(255,255,255,0.9);」と設定しています。

（実際はTOPページと、カテゴリ、タグページはアイキャッチ画像の透明度と、セクションメインの背景色の設定を変えたくて、そのためのCSSを書いていますが、複雑になるのでここでは割愛します）

以上で完了です。HTMLにソースを一つ加えるのと、CSSを4つ書くだけで設定ができました。

そういえば、ブログのタイトルの変更を考えている。なんて記事にしていたけど、タイトルの変更よりもデザインのバージョンアップが先になってしまいました。

http://ryu.jpn.com/archives/6572

ページごとに背景の雰囲気が変わるのはとても新鮮で、新たな記事を書くのが楽しみになりました。このデザインで飽きずに永く続けられるかな？これからも、楽しくブログを書いていきます : )

モバイルバージョンを終了