ランダムで画像が切り替わるオシャレなメインビジュアル風見出しを作成する

はじめに

2020年もまだまだ流行っていますね「タイポグラフィ」
メインビジュアルの役割にも使えますし、何よりおしゃれですし…
そんなわけでなんちゃってタイポグラフィも詰め込んだ__「メインビジュアル風見出し」__の実装方法をお教えしたいと思います！

※ あくまで、自分のサイトに組み込む際に使用したアイデアです。
よかったらみなさんも使用してただけたらと思います😷
https://toya-onodera.github.io/blog/ （ここで使用してます）

ランダムな画像を提供してくれる Unsplash Source

Unsplash Source とは、無料画像素材サイト Unsplash さんが提供している画像 API です。
オシャレな感じの画像を提供してくれます

https://source.unsplash.com/

画像の呼び出し方

<img src="https://source.unsplash.com/random" alt="Unsplash Source のサイトから持ってきた画像">

これだけでランダムないい感じの画像を表示できます。
めっちゃ楽でいいですね！！！

オシャレなメインビジュアル風見出しを作成する

それでは本題に移って、「オシャレなメインビジュアル風見出し」を作成していきましょう！

実際に例を挙げながら説明していきたいと思います。

作成イメージとしては、

1. 画像レイヤーを後ろにして見出し文字を手前のレイヤーとして表示する
2. 画像は若干ぼかして表示する
3. その画像の上に半透明の黒レイヤーをかけて被せる
   となります。

コードイメージは以下の通りです。

HTML

<div class="typo-heading">
    <div class="main-visual">
        <!-- この要素に CSS で画像が入るイメージ -->
    </div>

    <h3>
        <!-- 見出しとして入れたい文字を入れる -->
    </h3>
</div>

CSS

.typo-heading {
    position: relative; /* 見出しの文字を絶対配置で指定するので使用する */
    height: 30vh; /* 30vh くらいがいい感じのサイズだったので採用 */
    width: 100%;
    padding: 16px;
    overflow: hidden; /* 画像をぼかす際に縁がぼやけるのでその対策を行う */
}

.main-visual {
    /* 画像のぼかし対策を行う */
    position: absolute;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
    filter: blur(5px);

    /* 背景画像の指定を行う */
    background-image: url("https://source.unsplash.com/random");
    background-size: cover;
    background-position: center;
}

/* 半透明の黒レイヤーをかけて被せる
   こうするとどの画像が表示されても文字が読みやすくなる */
.main-visual::before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

/* 見出し文字
   今回は右下に配置したらいい感じになったので採用 */
.typo-heading > h3 {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    color: #FAFAFA;

    /* Google Fonts の「さわらび明朝」を採用
       個人的にはもっと太い明朝体フォントを使用したかった… */
    font-family: "Sawarabi Mincho", serif;
}

これだけで「オシャレなメインビジュアル風見出し」を作成することができます。

動作例

上でも記載しましたが、私のサイトにてこの見出しを実装しているので、もしよかったらアクセスして確認をどうぞ！
https://toya-onodera.github.io/blog/

下に実際の動作例を何枚か貼っておきます👀

まとめ

たまたま見つけたサービスでしたが、オシャレな画像も多いしいい感じの見出しを実装できて非常に満足しています。
Unsplash Source ではランダムの中でも ユーザーを指定して表示 や キーワードを指定して表示 などの画像絞り込み機能も実装されているのでいろいろ試してみるのも良いかもしれません！
また良いサービスを見つけて自分のサイトにどんどん組み込んでいきたいなあ💪