SWELLブログテーマにGoogleマップを埋め込む手順

2023年12月3日

こんにちは、
うめぴぃゴーゴー（@umephy55DC）です。
SWELLのブログ投稿時にGoogleマップを埋め込む方法説明です。
うめぴぃ自信がやり方をよく忘れるので記録用も兼ねてブログで残しています(^.^)

SWELLでGoogleマップを埋め込む方法

うめぴぃのブログではGoogleマップを入れる事は少ないのですが、いざ入れる事があるとどうやって作ったのかを忘れています(T . T)。

そこで手順を残しておこうと思いました(^.^)。
案外簡単です。
使っているのは有料サイトのSWELLになります。

神戸ベルのブログを作成した時の内容で説明しています。Googleマップで埋め込みたい場所で検索します。

神戸ベル本社工場を検索してみました。

名称で検索すると複数検索されたため住所から特定の場所を検索しました。

このままでは、マップを埋め込んだ時に住所のままになるので名称を変更します。
下段に目的の名前があるので選択します。

検索は名称でも住所でも大丈夫です。
検索しやすい方法を選んでください(^｡^)

埋め込みマップが準備できました。

サイドバー右側の共有アイコンをクリックします。

共有のブロックが立ち上がります。

地図を埋め込むを選択します。

するとHTMLのコードが出てきます。
ここでサイズを選ぶ事もできます。

サイズは下記のようになっています

小：横400px　縦300px
中：横600px　縦450px
大：横800px　縦600px
カスタムサイズ：数字を自由に入力

必要に応じて設定ください。

HTMLをコピーをクリックします。

HTMLコードは長いのでHTMLをコピーをクリックするだけの方が楽で安心です。

作業中のブログ内でマップを埋め込みたい部分を選択します。

検索でHTMLと入力するとカスタムHTMLブロックが表示されます。

手動で探す場合はウィジェットの項目にあるので、少し下までカーソルを下げる必要があります。

表示されたカスタムHTMLブロックにコピーしたコードを貼り付けます。

プレビューをクリックすると指定の場所にGoogleマップが表示されます。

出来ました(^.^)。案外簡単ですね。

うめぴぃ自信がやり方を忘れないようにしないとね(#^_^#)

最後までご覧いただきありがとうございました。

よかったらシェアしてね！