別の記事でGoogleマップを埋め込む方法をメモしましたが、この記事では埋め込んだGoogleマップの色を変更する方法をメモします。
サイトのデザインとちぐはぐにならないように、CSSでマップの色を変更する方法もセットで覚えておくとよいです。
Googleマップの埋め込み方法から確認したい方はこちらを先にチェック↓
思いのほかいろいろできちゃう
手順
CSSのfilterプロパティを使用します。iframeにインラインで書き込むか、classを使用してスタイルシートから読み込みます。
色々なカラーバリエーションを載せておきますので、よかったら参考にしてください。
ちなみにデフォルトはこちらです↓
1. グレースケール
filter:grayscale(100%);いわゆるモノクロというやつです。
白を基調としたサイトや、使用色を絞ったシンプルなサイトにおすすめです。
2. ブラック系
filter: grayscale(100%) invert(90%);1.のグレースケールをinvertで反転させると、黒ベースのマップになります。
一気にスタイリッシュなイメージになりますね。
3. セピア調
filter: sepia(50%);sepiaを設定することで、色褪せた感じのセピア調になります。
私はあまり使用しませんが、ヴィンテージっぽいデザインに合うかも…？
4. 彩度を高く
filter: saturate(150%);saturateを設定することで、彩度を調整することができます。
POPでカラフルなデザインに合いそうです。
5. 彩度を低く
filter: saturate(50%);彩度を低くすると、少しくすんだ落ち着いたカラーリングになります。
ちなみに、grayscale(50%)でも同じような色味になります。
6. 色相変更（グリーン系）
filter: hue-rotate(270deg);hue-rotateで色相を変更することができます。
グリーン系のカラーや植物の画像などを使用したサイトにいいかも。
7. 色相変更（ピンク系）
filter: hue-rotate(120deg);hue-rotateの値を調整して、乙女チックなピンク系に。
女性向けのカワイイサイトに。
8. 色相変更（パープル系）
filter: hue-rotate(60deg);hue-rotateを調整すれば、赤味を持たせるか青味を持たせるかか調整できます。
今回はラベンダー系の紫を意識したのですが、どうでしょうか。
9. 階調反転（黒ベース×オレンジ系）
filter: invert(100%);invertを使って階調を反転させると、黒ベースにオレンジ系の色合いになります。
個人的には、アクティブな印象を受けるカラーリングです。
10. 階調反転+色相変更（黒ベース×ブルー系）
filter: invert(100%) hue-rotate(-180deg);階調反転に加えて、先ほど使用したhue-rotateで色相を変更してみましょう。
黒ベースの状態で、オレンジ系の色味だった部分がブルー系に変わります。
11. 階調反転+色相変更（黒ベース×レッド系）
filter: invert(100%) hue-rotate(-35deg);今度はレッド系にしてみます。黒+赤で力強い印象になりますね。
hue-rotateをうまく使ってお好みの色相にしてみてください。
まとめ
いかがだったでしょうか？私は最初、思っていたより簡単に色々調整できて「おおー」っとなった記憶があります。サイトのデザインに合わせて、好みの色合いにカスタマイズしましょう。