2023年3月8日TOC埋め込みGoogleMapの色を変更するホームページにGoogleMAPを埋め込む際、GoogleMAPの色を変更することができます。全体の雰囲気を統一できるので便利です。GoogleのAPI(有料)は使用していません。cssのみでカスタマイズしています。通常GoogleMapを埋め込むとこのような表示になります。標準よりも全体的に明るいトーンにして発色を良くしたり、暗くしたりできます。allowfullscreen=""></iframe>これはGoogleマップの埋め込みコードです。蛍光ペン部分が追記箇所です。ここに追記すると色が変わります。Mapの色を変更する具体例ここからは具体的に追記した場合の具体例です。発色を良くする、暗くする明るくfilter:saturate(150%);-webkit-filter:saturate(150%);暗くfilter:grayscale(50%);-webkit-filter:grayscale(50%);モノトーン全体をモノトーンにして色を排除しています。色を反転させて黒っぽくしています。サイト全体がダークトーンでまとまっている場合などはこちらが自然です。hue-rotate(-180deg);特定の色系統にする埋め込みたいサイトのテーマカラーと同系色にすると統一感が出ます。赤を強調filter:hue-rotate(140deg);-webkit-filter:hue-rotate(140deg);緑を強調filter:hue-rotate(229deg);-webkit-filter:hue-rotate(229deg);まとめ微調整することにより、さらに幅広い表現が可能です。GoogleMapの埋め込みが必要になるケースは多いので、このようにサイトイメージに合わせて色変更ができると便利です。カスタマイズ事例SWELLこのサイトはSWELLを使用して制作しています。yusuke.siteMENUHOMECONTACTSEARCH閉じるTOC閉じる。