【ブロックカスタマイズの色々】シリーズより、インテリアショップのサイトを制作する連載vol.2
前回は、ページの顔となるファーストビューを制作しました。


今回は、ファーストビューからスクロールし、初めて目に留まるセクションである「ABOUT」のブロックのデザインをご紹介したいと思います!

今回はより店舗のイメージを引き立てるテキストや、詳細ページへ誘導する[more]ボタンも配置。
テキストエリアと写真を重ねてずらした、動きのあるデザインです。

それでは制作していきましょう!

制作に必要なもの

  • 写真
  • テキスト(導入文、その他テキスト)
  • イメージカラー

ブロックを選択し、写真を挿入しよう

今回のブロックも、前回同様【カバーブロック】の中に【メディアとテキストブロック】を配置して作成していきます。

  1. まずはカバーブロックを選択し、以下の項目を設定しましょう。
    • 色を設定 (白)
    • [配置を変更]で[全幅]を選択
    • [高度な設定]→[追加CSSクラス]に[sample-about]を記入
  1. カバーブロック内に[メディアとテキストブロック]を挿入し、以下の項目を設定しましょう。
    • [メディアを右に表示]を選択
    • 画像を挿入(今回のサンプルでは比率2:3の写真を使用しています)
    • 色を設定(テキスト:白、背景:#48432a)
    • 追加CSSクラスに[sample-about-container]を記入

背景が白なので少し分かりづらいですが、ブロックがしっかり内包されています。カバーが余白になってくれるのですね。

こんな余白の取り方も

今回は[カバーブロック]と[メディアとテキストブロック]を重ねて上下左右の余白を作りましたが、[スペーサーブロック]を使用して上下に余白を設けることもできます。

ただ、背景色を変えたい場合はやはり[カバーブロック]を使用することをおすすめします。この方法はバリエーションとして覚えておきましょう。

テキストを設定しよう

  1. [メディアとテキスト]のテキストを設定して行きます。
    • 段落ブロックに「ABOUT」を記入
      • 太字を選択
      • 文字サイズの設定(24PX)
      • 追加CSSクラスに[sample-about-title]を記入
    • スペーサーブロック
      • 高さを設定(30PX)
    • 段落ブロックに導入文を記入
      • 文字サイズの設定(18PX)
    • 段落ブロックにテキストを記入
      • 文字サイズの設定(13PX)
    • スペーサーブロック
      • 高さを設定(50PX)
    • ボタンブロックのテキストに「more」を記入
      • ボタンサイズを設定(小)
      • ボタンの位置を設定(中央)
      • ボタンスタイルを設定(背景なし)
      • ボタンカラーを設定(白)
      • 追加CSSクラスに[sample-about-btn]を記入

CSSを記入しよう

今回もCSSを追記し、写真とテキストを重ねたり、ボタンを丸に装飾していきます。

  1. [ダッシュボード]→[外観]→[カスタマイズ]→[追加CSS]へ移動し、以下のコードを貼り付けて公開をしましょう。
/*インテリアショップ アバウト*/
.sample-about {
    padding: 100px 0 80px 0;
}

@media(min-width:600px) {
    .sample-about {
        padding: 150px 0 100px 0;
    }
}

.sample-about-container {
    width: 100%;
    background: linear-gradient(#ffffff 0%, #ffffff 10%, #48432A 10%, #48432A 100%);
}

@media(min-width:600px) {
    .sample-about-container {
        background: linear-gradient(90deg, #48432A 0%, #48432A 60%, #ffffff 60%, #ffffff 100%);
        margin: 0 auto;
    }
}

.sample-about-container img {
    width: 80%;
    margin: 0 0 0 20%;
    transform: translateY(-50px);
}

@media(min-width:600px) {
    .sample-about-container img {
        width: 100%;
        margin: 0;
    }
}

.sample-about-btn a {
    border-width: 0.5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 100px auto;
}

@media(min-width:600px) {
    .sample-about-btn a {
        margin: 0 auto;
    }
}

.sample-about-title strong {
    border-bottom: 0.5px solid white;
    padding: 0 0 5px 0;
}

これで完成です!

画像とテキストエリアを反転させてみよう

ページの構成や内容によっては、写真を左、テキストエリアを右に配置したい場合もあるかと思います。

その様な場合、基本的には上記の手順と同じ様に進めてください。
異なる部分は以下の箇所です。

  1. 手順2・・・[カバーブロック]を挿入する際に[メディアをに表示]を選択しましょう。
  2. 手順2・・・追加CSSクラスの記入を[sample-about-container2]にしましょう。
  3. CSSのコードが大きく異なります。以下の内容を記入しましょう。
/*インテリアショップ アバウト メディア左*/
.sample-about {
    padding: 100px 0 80px 0;
}

@media(min-width:600px) {
    .sample-about {
        padding: 150px 0 100px 0;
    }
}

.sample-about-container2 {
    width: 100%;
    background: linear-gradient(#ffffff 0%, #ffffff 8%, #48432A 8%, #48432A 100%);
}

@media(min-width:600px) {
    .sample-about-container2 {
        background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #48432A 40%, #48432A 100%);
        margin: 0 auto;
    }
}

.sample-about-container2 img {
    transform: translateY(-50px);
    width: 80%;
    margin: 0 0 0 20%;
}

@media(min-width:600px) {
    .sample-about-container2 img {
        width: 100%;
        margin: 0;
    }
}

.sample-about-btn a {
    border-width: 0.5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 100px auto;
}

@media(min-width:600px) {
    .sample-about-btn a {
        margin: 0 auto;
    }
}

.sample-about-title strong {
    border-bottom: 0.5px solid white;
    padding: 0 0 5px 0;
}

以上で左右反転したデザインが完成です!

CSSについてもう少し解説

今回も、知っていると便利なCSSの知識をご紹介。

  • CSS「クラス」って何?

CSSの記入を繰り返すと気になってくるのがCSS「クラス」ではないでしょうか?

クラスとは・・・グループ分けの目印のこと。指定したエリア(ブロックやグループ等)にクラス名をつけて、それを目印にコードを当てはめることで装飾が施されています。

例えば今回の制作、手順1にて。

カバーブロックを選択した状態で追加CSSに[sample-about]と記入
→つまり、カバーブロックエリアに[sample-about]という目印をつけた状態

そして手順4で追記したコードを確認してみると・・・

.sample-about {
 padding:100px 0 80px 0;
}

@media(min-width:600px) {
 .sample-about {
  padding:150px 0 100px 0;
 }
}

目印がありました!
つまりこれは、この目印のエリアにこの内容で装飾をしますよ。ということになるのです。

CSSクラスの意味をご理解いただけると、ご自身でクラス名を変更していただくことが可能になります。
例:今回のブロックを、トップページのイベント紹介(EVENT)のセクションで使用する場合、クラス名を「top-event」と設定する 等

クラス名を設定する際の注意点

  • 編集画面で設定したクラス名と、カスタマイズ画面にコードとして記入するクラス名は、一字一句違いの無い様にして下さい。
  • 編集画面でクラス名を設定する際は必要ありませんが、カスタマイズ画面でコードとして記入する場合はクラス名の前に「.」(半角ドット)を忘れずに付与して下さい。
  • クラス名は単純なものにされると、既存のクラス名(WordPressテーマで既に使用されているクラス名)と重複する可能性がありますので、ページ名やカテゴリー名などと組み合わせたやや複雑なものにされることをおすすめします。
  • 数字のみのクラス名は避ける様にして下さい。

より踏み込んだカスタマイズをしてみたい方、「クラス名」を理解して、実際に変更してみて下さいね。

信頼を深める自己紹介

今回は、店舗の紹介「ABOUTセクション」をイメージしてブロックを作成しました。大変お疲れさまでした!
素敵なブロックができましたでしょうか?

オンラインショップにおいて、「お店のことを知ってもらう」「信頼してもらう」ことはとても大切。購入の決め手になったのは意外にも、商品紹介以外のページで得られた情報や共感が理由だった、そんな経験はありませんか?

そのひとつとして「ABOUT」は大切にしたいカテゴリー。出会ったばかりの人に自己紹介をする気持ちで、丁寧に写真やテキストを選んでみて下さいね。

  • ユーザーは何を知りたい?
  • どんな共感を求めてる?

ターゲットのお客様の心理や行動を具体的に想像しながら、デザインのひと手間を大切に、信頼を深めるオンラインショップ運営に繋げていきましょう。