ワードプレスで簡単にブロークングリッドなバナーを作成【”メディアとテキスト”ブロック】

2022年2月11日

”メディアとテキスト”ブロックを使って、画像の上にテキストをずらしたレイアウトとするブロークングリッドレイアウトを作成します。

作成するのは、次のようなバナーです。

本記事ではワードプレスversion5.9、テーマはTwenty Nineteenを使っています。

”メディアとテキスト”ブロックで基本的なコンテンツは作成済のところから始めます。以下の記事の続きだと考えてください。

カスタムCSS適用前の原型

CSSでカスタマイズする前の原型として、”メディアとテキスト”ブロックで以下のものは作成済とします。

• 左に画像とコンテンツエリアにテキストとボタンを配置
  （テキストのタイトルは見出しブロック<h2>、それ以外は段落ブロックで作成しています）
• ツールバーで垂直配置を中央に設定
• 画面右の設定パネルで以下の設定
  ・モバイルで縦に並べるをON
  ・カラム全体を・・・をON
  ・焦点ピッカーは左上としておく（ここは画像に合わせて任意です）

念のためリスト表示でブロックの構造を見ておくと以下の通りです。

CSSによるカスタマイズ

それでは順にカスタマイズしていきましょう。

カスタムCSSを使っていくことになります。カスタムCSSの使い方については以下の記事を参照ください。

①”メディアとテキスト”ブロックにidを設定

カスタムCSSを適用するために”メディアとテキスト”ブロックにidを付与します。

画面右の設定パネル内”高度な設定”で”HTMLアンカー”にid名を入力します。

今回はid="tokyo-night-tour"としておきました。

ここでこのブロックのHTMLを表示しておきます。CSS適用時のセレクター指定参考となるかと思います。

カスタマイズに関連する以外の余分な情報（ワードプレスがスタイル用に付与しているクラスなど）は削除してあります。

<div class="wp-block-media-text" id="tokyo-night-tour">
    <figure class="wp-block-media-text__media">
        <img width="2005" height="1307" src="#" sizes="(max-width: 2005px) 100vw, 2005px">
    </figure>
    <div class="wp-block-media-text__content">
        <h2>
            <strong>東京ナイトビューツアー</strong>
        </h2>
        <p>
            <strong>2022年2月24日<br>19時～21時半開催</strong>
        </p>
        <p>
            ディナー：フレンチ<br>（シャンパン1杯サービスあり）
        </p>
        <p>
            クラシック生演奏とディナーで、<br>ナイトクルーズをお楽しみください。
        </p>
        <div class="wp-block-buttons">
            <div class="wp-block-button">
                <a class="wp-block-button__link" href="#">詳細はこちら</a>
            </div>
        </div>
    </div>
</div>

②テーマのスタイルを消去

今回使用しているテーマTwenty Nineteenでは、見出し<h2>上部に短い横線がつくスタイルとなっています。オリジナルのデザインに仕上げていくには邪魔なので次のCSSによって上書き消去します。

/* h2の装飾を消去 */
#tokyo-night-tour h2:before {
    line-height: 1.5;
    background: none;
    content: "";
    display: inline;
    height: 0;
    margin: 0;
    width: 0;
}

CSS適用後は以下の通りです。

②コンテンツエリアに背景色を設定

次のCSSでコンテンツエリアに背景色を設定します。ついでにボタンの位置が下部すれすれになっているので、padding-bottomも設定しておきます。

/* コンテンツ領域の背景色 */
#tokyo-night-tour .wp-block-media-text__content {
    background: #1C8F99;
    padding-bottom: 1em;
}

CSS適用後は以下の通りです。

③マイナスmarginでテキストをずらす

見出しテキストにマイナスmarginをかけて左にずらします。同時に可読性をあげるため文字色を白とします。

#tokyo-night-tour h2 {
    margin-left: -119%;
    color: #fff;
}

CSS適用後です。

④画像にグラデーションをかけてテキストの可動性を向上

画像の上が読みにくいでの、画像上部に黒色をオーバーレイしていきます。

疑似要素beforeを使って画像にグラデーション（上部が黒、下部に向けて透明化）をかけますが、見出しが一番上層となるよう見出しにz-indexをつけます。

/* タイトルを左にずらしてブレンドモード化 */
#tokyo-night-tour h2 {
    position: relative;
    z-index: 10;
    margin-left: -119%;
    color: #fff;
}
/* 画像にカラーオーバーレイ */
#tokyo-night-tour {
    position: relative;
}
#tokyo-night-tour figure.wp-block-media-text__media {
    position: relative;
}
#tokyo-night-tour figure.wp-block-media-text__media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(#000000, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0));
}

CSS適用後は以下の通りです。

⑤mix-blend-modeでアクセントをつける

最後にmix-blend-mode:differenceをかけてアクセントをつけます。このCSSを使うと、画像に重なった部分とその他の部分で色味に変化をつけることが可能です。

見出しのCSSにmix-blend-mode: difference;を記述します。

#tokyo-night-tour h2 {
    position: relative;
    z-index: 10;
    margin-left: -119%;
    color: #fff;
    mix-blend-mode: difference;
}

さらに見出しに背景色をつけてパソコン表示としては完成です。

#tokyo-night-tour h2 {
    position: relative;
    z-index: 10;
    margin-left: -119%;
    color: #fff;
    mix-blend-mode: difference;
    background: #0ab;
}

画面の幅を変更しても、見映えはキープするのがわかります。

⑥スマホ表示を整える

画面幅600px以下のスマホ表示では、見出しを左にずらしたままだとデザインが破綻します。以下のCSSで修正します（見出しの文字サイズの調整とテーマで設定されているpaddingの調整もしておきます）。

@media(max-width:600px){
    #tokyo-night-tour h2 {
        margin-left: auto;
        font-size: 26px !important;
    }
    #tokyo-night-tour .wp-block-media-text__content {
        padding: 0 1% 1em;
    }
}

上記のCSS適用前後のスマホ表示です。

まとめ

以上、適用したカスタムCSS全体は以下の通りとなります。デザインの参考になればと思います。

/* h2の装飾を消去 */
#tokyo-night-tour h2:before {
    line-height: 1.5;
    background: none;
    content: "";
    display: inline;
    height: 0;
    margin: 0;
    width: 0;
}
/* タイトルを左にずらしてブレンドモード化 */
#tokyo-night-tour h2 {
    position: relative;
    z-index: 10;
    margin-left: -119%;
    color: #fff;
    mix-blend-mode: difference;
    background: #0ab;
}
/* 画像にカラーオーバーレイ */
#tokyo-night-tour {
    position: relative;
}
#tokyo-night-tour figure.wp-block-media-text__media {
    position: relative;
}
#tokyo-night-tour figure.wp-block-media-text__media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(#000000, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0));
}
/* コンテンツ領域の背景色 */
#tokyo-night-tour .wp-block-media-text__content {
    background: #1C8F99;
    padding-bottom: 1em;
}
@media(max-width:600px){
    #tokyo-night-tour h2 {
        margin-left: auto;
        font-size: 26px !important;
    }
    #tokyo-night-tour .wp-block-media-text__content {
        padding: 0 1% 1em;
    }
}