noteでGoogleストリートビューを埋め込みたいが、コードがそのまま表示されてしまう問題に直面している方が多いようです。この問題の原因は、noteがHTMLタグを自動的にエスケープする仕様に関連しています。この記事では、Googleストリートビューをnoteに正しく埋め込む方法と、よくある問題とその解決策を詳しく説明します。
Googleストリートビューを埋め込む方法
まず、Google Mapsで表示したい場所のストリートビューを選択し、共有オプションから「埋め込む地図」を選びます。その後、表示されるHTMLコードをコピーします。このコードは、noteの投稿画面に直接貼り付けることができますが、デフォルトでは正しく表示されないことがあります。
noteで埋め込みコードが表示される理由
noteはセキュリティのため、HTMLタグをエスケープしてそのまま表示しない仕様になっています。そのため、Googleストリートビューの埋め込みコードをそのまま貼り付けても、コードがテキストとして表示され、地図が埋め込まれません。これを回避するためには、次のような方法があります。
埋め込みコードを正しく表示させる方法
1. noteの投稿編集画面で「HTML編集」を選択します。
2. Google Mapsからコピーした埋め込みコードをそのままペーストします。
3. 投稿を保存すると、正しくストリートビューが表示されます。
HTML編集モードで埋め込みコードを貼り付けることで、noteがコードをテキストとして表示せず、正しく埋め込まれるようになります。
注意点と解決策
もしこの方法で問題が解決しない場合、以下の点を確認してください。
・埋め込みコードが完全にコピーされているか確認
・HTML編集モードでコードが正しく貼り付けられているか
・noteのバージョンや設定に影響がないか確認
まとめ
Googleストリートビューをnoteに埋め込むには、HTML編集モードを使用して埋め込みコードを正しく貼り付けることが必要です。もし問題が発生した場合、コードが正しくコピーされているか、HTML編集モードで確認してみてください。また、Google Mapsの共有オプションで最新の埋め込みコードを取得することをお勧めします。
コメント