グリットレイアウトでのレスポンシブデザインについて

(@setouchikotori)

3ヶ月、 2週前

お示しいただいている URL だけではどのようなレイアウトを実現されたいのかを計りかねますが･･･

お使いのテーマ「Beautiplus」でも、WordPress 標準の「グリッド」ブロックが使えます。

また、ボタンにネガティブマージンが設定できるので、これらを合わせると、コードを書かなくてもご希望のレイアウトは実現可能かもしれません。

グリッドブロックの下にボタンブロックを置き、ボタンの上余白 (margin-top) をマイナスに設定してみてください。

(ご希望のレイアウトと違っていたらすみません。イメージ画像を添付していただけると、もう少しアドバイスできることがあるかもしれません)

モデレーター

(@setouchikotori)

3ヶ月、 2週前

ちなみに、

ボタンの上余白 (margin-top) をマイナスに設定してみてください。

ノーコードでできます。

トピック投稿者

(@eureka20080321)

瀬戸内ことりさま

年末の大変お忙しい中、ご回答いただきありがとうございます。
返信が遅くなり申し訳ございませんでした。

おっしゃるようにブロック等を使うと良いと思います。
少し思う所があり、勉強を兼ねてコードを使ってみています。

(margin-top)マイナスも後ほど実行してみます。

お示しいただいている URL だけではどのようなレイアウトを実現されたいのかを計りかねますが･･･

ちなみに質問時に、使ったhtmlも載せたほうが良かったという事でしょうか？
当方、素人で理解しておらず申し訳ございません。
引き続きアドバイスいただけますと助かります。

よろしくお願いします。

モデレーター

(@setouchikotori)

理想形を可視化されたもの (スクショや手描き) とコードをご共有いただくと回答がつきやすいかなと思います。

トピック投稿者

(@eureka20080321)

ご回答いただきありがとうございます。

その様な方法でも良いんですね。ぜひ今後の参考にさせていただきます！考えをまとめて改めて質問をさせていただこうと思います。本当にありがとうございました。

モデレーター

(@setouchikotori)

position: absoluteを多用しているため、要素が期待通りに配置されていない可能性があります。
文字が画像の後ろに隠れているのは、z-indexが設定されていないことが原因かなと思います。
ボタンが中央揃えで半分だけ表示される場合、transformの設定や親要素の高さが影響している可能性があります。

@media screen and (min-width: 1024px) /*PC*/ {
  .box_bubble {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto; /* 行を自動調整 */
    height: auto;
    width: 100%;
  }

  .bub_top-img {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    width: 100%;
    height: auto;
  }

  .bub_top-p1,
  .bub_top-p2,
  .bub_top-p3 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    color: #3d87c3;
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    z-index: 2; /* 文字を前面に表示 */
    align-self: center; /* 縦中央揃え */
    justify-self: start; /* 左揃え */
    padding: 10px;
    background-color: transparent;
  }

  .bub_top-p2 {
    color: #000;
    font-size: 1.2em;
  }

  .bub_top-p3 {
    color: #000;
    font-size: 1.2em;
  }

  /* ボタンのスタイル */
  .box_bubble a {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    justify-self: center; /* 横中央揃え */
    align-self: center; /* 縦中央揃え */
    font-size: 0.875em;
    font-weight: bold;
    border: solid #000 0.8px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    border-radius: 60px;
    z-index: 3; /* ボタンを前面に表示 */
    background: rgba(255, 255, 255, 0.8);
  }

  .box_bubble a:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

お書きになったコードとこちらを比較してみてください。

※ 検証していないため、ご希望どおりの表示になるかどうかはご自身でお試しいただき、適宜修正なさってくださいね。

トピック投稿者

(@eureka20080321)

ありがとうございます！とても助かります。

時間をとってじっくりと、お伝えいただいたコードと比較しながらやってみます。

モデレーター

(@setouchikotori)

はいー！
ぜひとも実践されてみてください！

がんばってくださいねー！

トピック投稿者

(@eureka20080321)