ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

バナーの作成完成形
この記事でわかること

”メディアとテキスト”ブロックを使って、画像側にテキストをずらしたブロークンレイアウトなバナーを作成する方法。カスタムCSSを使っていきます。

  1. ”メディアとテキスト”ブロックにidを付与
  2. テーマのスタイルを消去
  3. コンテンツエリアに背景色を設定
  4. マイナスmarginを使ってテキストをずらして配置
  5. 画像にグラデーションをかけてテキストを読みやすくする
  6. mix-blend-modeプロパティでアクセントをつける
  7. スマホ表示を整える

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

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

カスタムCSS適用前の原型

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

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

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

リスト表示でブロック構造を確認

CSSによるカスタマイズ

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

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

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

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

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

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;
}
mix-blend-mode適用後

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

#tokyo-night-tour h2 {
    position: relative;
    z-index: 10;
    margin-left: -119%;
    color: #fff;
    mix-blend-mode: difference;
    background: #0ab;
}
見出しに背景色を設定後

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

完成形画面幅を変更2

⑥スマホ表示を整える

画面幅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適用前後

まとめ

以上、適用したカスタム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;
    }
}

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる