埋め込みGoogleMapの色を変更する 2023 3/08 広告 WORDPRESS 2023年3月2日2023年3月8日 TOC 埋め込みGoogleMapの色を変更する ホームページにGoogleMAPを埋め込む際、GoogleMAPの色を変更することができます。 全体の雰囲気を統一できるので便利です。 GoogleのAPI（有料）は使用していません。cssのみでカスタマイズしています。 標準 通常GoogleMapを埋め込むとこのような表示になります。 </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%" allowfullscreen="" class="lazyload" > 標準よりも全体的に明るいトーンにして発色を良くしたり、暗くしたりできます。 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%" filter:〇〇; allowfullscreen=""></iframe> これはGoogleマップの埋め込みコードです。蛍光ペン部分が追記箇所です。ここに追記すると色が変わります。 Google Mapの色を変更する具体例 ここからは具体的に追記した場合の具体例です。 発色を良くする、暗くする 明るく </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" frameborder="0" width="600" height="450" style="border:0;width:100%;filter:saturate(150%);-webkit-filter:saturate(150%)" allowfullscreen="" class="lazyload" > filter:saturate(150%);-webkit-filter:saturate(150%); 暗く </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter:grayscale(50%);-webkit-filter:grayscale(50%)" allowfullscreen="" class="lazyload" > filter:grayscale(50%);-webkit-filter:grayscale(50%); モノトーン 全体をモノトーンにして色を排除しています。 グレースケール </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter:grayscale(100%);-webkit-filter:grayscale(100%)" allowfullscreen="" class="lazyload" > filter:grayscale(100%);-webkit-filter:grayscale(100%); ブラック </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter: grayscale(100%) invert(92%) contrast(83%);" allowfullscreen="" class="lazyload" > filter: grayscale(100%) invert(92%) contrast(83%); 色相反転 色を反転させて黒っぽくしています。サイト全体がダークトーンでまとまっている場合などはこちらが自然です。 茶系 </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter:invert(100%);-webkit-filter:invert(100%)" allowfullscreen="" class="lazyload" > filter:invert(100%);-webkit-filter:invert(100%); 青系 </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter: invert(100%) hue-rotate(-180deg);" allowfullscreen="" class="lazyload" > filter: invert(100%) hue-rotate(-180deg); 特定の色系統にする 埋め込みたいサイトのテーマカラーと同系色にすると統一感が出ます。 赤を強調 </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter:hue-rotate(140deg);-webkit-filter:hue-rotate(140deg)" allowfullscreen="" class="lazyload" > filter:hue-rotate(140deg);-webkit-filter:hue-rotate(140deg); 緑を強調 </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.6567846113126!2d139.80851171544617!3d35.710062680187654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1545458808759" width="600" height="450" frameborder="0" style="border:0;width:100%;filter:hue-rotate(229deg);-webkit-filter:hue-rotate(229deg)" allowfullscreen="" class="lazyload" > filter:hue-rotate(229deg);-webkit-filter:hue-rotate(229deg); まとめ 微調整することにより、さらに幅広い表現が可能です。 GoogleMapの埋め込みが必要になるケースは多いので、このようにサイトイメージに合わせて色変更ができると便利です。 WORDPRESS S H A R E URLをコピーしました！ cssで丸いボタンを作りました ローディングアニメーション実装（メモ） ＼ SWELLのカスタマイズ ／ SWELL カスタマイズTIPS WordPressテーマ「SWELL」を 使用したカスタマイズ事例集 SWELL カスタマイズ事例 CATEGORY SWELL TIPS WordPress COLUMN RECOMMEND RELATED WordPressでGoogle Fontsを使用する方法 2023年4月6日 WordPressでWebサイトのキャプチャ画像を動的に取得する方法（プラグインなし） 2023年3月30日 WordPressサイトを運営するときに便利なWEBサービス 2023年3月22日 1文字目の色を変えてサイズも少し大きくする 2023年3月2日 LATEST 横浜インビテーションカード(ハマカード)は年会費無料で海外/国内旅行保険が利用付帯 JR新幹線・特急のチケットを自宅にお届け！【NAVITIME Travel】 エイチアイシー SIMPLE MASK 洗える立体シンプルマスク SWELLのサイトマップ RANKING SWELLの記事下関連記事の数を8→4にする ローディングアニメーション実装（メモ） 特定のページのフッター直前ウィジェットを非表示にする 「SWELL」スマホ開閉メニューなどのリストの頭にあるアイコンを非表示にする
