【超便利】グーグルマップなどをHTMLでセンタリングする方法

ページ作成メモ

フィッシング高知にご訪問頂きありがとうございます。

今回はYouTubeの埋め込み画像やグーグルマップなどいろんなものをセンタリング表示してくれるHTMLコードをご紹介します。

これを覚えてから私はかなり理想に近い表示ができるようになりましたw

それではどうぞー!

使用前と使用後

使用前

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63857.84533061411!2d132.5807563282814!3d32.766996173649815!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3548af120b93734b%3A0xc393e2470831a7e9!2z5p-P5bO244OT44O844OB!5e1!3m2!1sja!2sjp!4v1628570960448!5m2!1sja!2sjp" width="450" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

使用後

<center><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63857.84533061411!2d132.5807563282814!3d32.766996173649815!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3548af120b93734b%3A0xc393e2470831a7e9!2z5p-P5bO244OT44O844OB!5e1!3m2!1sja!2sjp!4v1628570960448!5m2!1sja!2sjp" width="450" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></center>

こういった感じでグーグルマップなどはなにもせずに埋め込んでしまうと左詰めになってしまいます・・・

横幅などがあっていればきれいに表示されるのですが表示画面によっては少しブサイクですよね・・・

でも大丈夫です!! 今回今から各コードを埋め込みコードの頭とお尻に書き込むだけで使用後のようなどの画面でもセンタリングされる表示になります。

コード

<center>



</center>

たったこれだけですww

先ほどの使用前と使用後のコードをもう一度見返してみてください。最初と最後以外は全く同じです!

各サイトなどで埋め込みコードをコピーしてきて表示させたい場所にカスタムHTML等で貼り付けます。

その文頭と文末に<center>と打ち込み、文末の方には/を入れるだけ!

簡単でしょww

これはブログ作成で覚えておいて損はないと思いますよw

また、私のサイトなどで使用した小ネタや小技はどんどん紹介していきますので参考にしてみてください。

フィッシング高知はブログランキングサイト「にほんブログ村」に参加しています。

応援してくれる方は↓こちら↓をポチッとお願いいたします。

にほんブログ村 にほんブログ村へ

TwitterFacebook&Instagram&YouTube

フォローよろしくおねがいいたします!!
また、フィッシング高知に新規投稿があったときにお知らせが届くプッシュ通知を導入しました!!
↓↓↓↓の「購読する」をポチっとしてください。(購読すると言っても無料ですよ)

最新更新の
プッシュ通知を受け取りましょう

タイトルとURLをコピーしました