iframeで他のサイトをページの中に埋め込む

（この記事はほとんど、自分自身のための備忘録みたいなものです）

WordPressのブロックエディターで、カスタムHTMLを選ぶと、iframeなどの埋め込みコードを貼り付け、ご自分のブログやホームページにGoogleマップやYoutube、Amazonアフィリエイトのリンクを置くことができます。

例えば Googleマップ

大阪駅のGoogleマップを埋め込んでみました。

中央揃えにしたい場合には？

そのままコードを埋め込むと、左揃えになるはずです。これを中央に配置したい場合には、<div>要素の中に、text-align: center; を指定すれば中央配置にすることができます。

上記のGoogleマップを中央配置したい時のコード。（参考例）

<div style="text-align:center;" >
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.1066533760727!2d135.49376191546165!3d34.70248979062949!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e68d95e3a70b%3A0x1baec822e859c84a!2z5aSn6Ziq6aeF!5e0!3m2!1sja!2sjp!4v1600406753789!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">
</iframe>
</div>

埋め込んだGoogle マップ

他のサービスの埋め込みコードも基本は同じ

上記は、Googleマップを参考例として挙げましたが、YoutubeやAmazonアフィリエイトリンクの埋め込みコードなど、他のサービスでも同様の使い方が可能です。

お問い合わせはこちらから

南大阪を中心に活動しているシステムエンジニアです。これまでの経験から、ビジネス課題について一緒になって考え、課題解決のためにサポートさせていただきます。些細なご相談でも構いません。当方に期待することやご相談内容についてお聞かせください。初回のご相談はオンラインで無償対応いたします。

連絡先：050-5050-2860

お問い合わせはこちらから