こんにちはー！突然ですがグーグルマップの全幅埋め込みって可愛いですよね。
ライトニングプロとかだと確かカスタムHTMLにいれて「width: 100vw」とでも書いておけばそれでOKだったんですけど、SWELLだとちょっと勝手が違ったので、私みたいに「え？どうしたら？」となっている方のために残しておきます。
わかると「なんだこんなことでできたのか！」となるくらい簡単だったので是非どうぞー。
目次
SWELLで全幅グーグルマップを挿入する手順
STEP
グーグルマップでコードをとってくる
とりあえず目当てのグーグルマップ開いて、共有ボタン押してURL取得します。
地図を埋め込むの方を押してから、HTMLをコピーをおしてね。
マップの埋め込む大きさを選べますけども、ここは特に選ぶ必要ないです。
あとで自分で調整するので。
STEP
SWELLの投稿画面開いてフルワイドを挿入
「/フルワイド」って打ったら↓みたいなのが出てくるので挿入します。
STEP
右の設定画面でコンテンツ幅など設定する
- コンテンツ横幅→フルワイド
- 上下のpadding量（pc）→0
- 上下のpadding量（sp）→0
STEP
フルワイドの中の見出しはいらないので消しとく
いらないからね。
STEP
カスタムHTMLを挿入
STEP
カスタムHTMLにマップのタグいれる
STEP
widthとheightを探す！そんで値を入れる
見つけたら↓みたいなかんじでいれとく。
width=”100%”
height=”好きな高さ”（今回は400pxにしておきました。）
実際の見え方
ポイント
フルワイドにいれて、更にコンテンツ幅もワイド幅にすることで地図も全幅になったかんじですね。
ちなみにワイドブロックに入れない場合はこんなかんじの見え方になります↓
