プロクラスの中山です！ だいぶ寒くなってきましたね･･･秋が終わる前に、先日プロクラススタッフ一同で紅葉を見に行ってきました！ プロクラスは京都にあるので紅葉の名所がたくさんありますが、今回は12月3日までライトアップが行われている永観堂にいきました！ ↓永観堂マップ↓ GoogleMapをちょっと紅葉っぽい色のマップにカスタマイズしてみました。 オマケにちょっとウザイぴょんぴょん跳ねるピンも設置しています！ 今日はこのGoogleMapのカスタマイズの仕方をご紹介します。サイトの雰囲気に合わせてオリジナルな地図に変えてみませんか？ GoogleMapをカスタマイズしよう！ ①準備するもの ■地図を載せたいHTMLファイル ■Mapのピンにする画像(ぴょんぴょんしてるやつ) 【追記】GoogleマップのAPIキーについて 2016年6月22日よりGoogleマップを設置する際に「APIキー

Hi, I'm Shohei Japanese SEO Specialist, based in Tokyo, Japan + 10 years experience in the industory プロフィール Python SEO Specialist | AI Agent Developer 専門領域はPython、データサイエンスを活用したSEO対策と、D2Cサイト（ブランドECサイト）におけるグロースマーケティング全般です。最近はAIエージェントの個人開発も行っています。Web業界での経験は12年です。 海外経験に住んでいた経験が８年ほどあり、英語でのコミュニケーションも可能です。 詳しく見る

レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。 Google Mapsの埋め込みコードをそのまま設置すると、レスポンシブサイトの画面サイズを変更した際に、地図表示エリアが画面をはみ出したり、他のコンテンツに重なったりと、表示崩れが発生します。 そこで、以下のようにレスポンシブ対応することで崩れを回避することができます。 <div id="map_canvas"> <iframe...（埋め込みコード略）.../iframe> </div> #map_canvas{ position: relative; padding: 0 0 56%; height: 0; overflow: hidden; } #map_canvas iframe{ position: absolute; top: 0; left: 0; width: 100% !important; heig