セクションタイトルが中央のまま、右にイラストを配置したい。

♥ 0

いいねをした人: 居ません

このトピックには3件の返信、3人の参加者があり、最後にキタジマタカシにより1年、 11ヶ月前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2022年12月27日 5:36 PM #115752
そすけ
閲覧者

♥ 9
【お使いの Snow Monkey のバージョン】バージョン: 18.1.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 17.1.0
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】
rakku-rakku.com

### 実現したいこと

セクションタイトル（.smb-section__title）中央のまま、右にイラストを配置したい。

.smb-section__titleのレスポンシブでのサイズ変更を活かし、右にイラストを配置したいです。

### 発生している問題

タイトルの右にイラストを配置すると、タイトルの位置が左右中央からずれてしまう

### 試したこと

最初は3カラムで構築してみましたが、真ん中のカラムにセクションでタイトルを配置したところ、長いタイトルは折り返されてしまいます。

また、長いタイトルでなくてもSP画面になるとカラムの幅に合わせて縦書きになってしまいます。

カラムでなく、カスタムHTML にてセクションタイトル右にイラストを配置する方法がうまくいきそうな気がしたのですが、.smb-section__header_01にdisplay: flex;を記述したところ、セクションタイトルやサブタイトルも中央からずれてしまいました。

添付画像のように、セクションタイトルが左右中央のまま右にイラストを配置するのは、どんな方法が最適でしょうか。
```
<div class="smb-section__header_01">
  <h2 class="smb-section__title">施術の流れ</h2>
  <div class="smb-section__subtitle">flow</div>
  <img width="321" height="241" />
</div>
```
宜しくお願いいたします。

↓このように配置したいです

♥ 0

いいねをした人: 居ません
2022年12月27日 5:37 PM #115754
そすけ
閲覧者

♥ 9
コードに不備がありましたので再掲載いたします。
```
<div class="smb-section__header_01">
  <h2 class="smb-section__title">施術の流れ</h2>
  <div class="smb-section__subtitle">flow</div>
  <img width="321" height="241" />
</div>
```
♥ 0

いいねをした人: 居ません
2022年12月27日 6:23 PM #115757
まーちゅう
参加者

♥ 367
こんにちは。
対象のセクションの高度な設定で flow 等の適当なclassを設定して
CSSのback-groundで背景画像を設定してみてはどうでしょうか？
```
.flow .smb-section__inner {
    background: url(https://rakku-rakku.com/wp-content/uploads/2022/11/img-TOP-flow-01-1-1024x768.png) no-repeat right top;
    background-size: 25vw;
}
```
位置やサイズは、調整してみてください。

♥ 1

いいねをした人:
2022年12月28日 9:16 AM #115777

キタジマタカシ
参加者

♥ 2421

画像ブロックで配置して absolute にするか背景画像にするかになると思いますが、メンテナンス性を考えると、僕も背景画像にするかなぁと思いました。

♥ 0

いいねをした人: 居ません
投稿者

投稿