超簡単!GoogleMapの色をサイトにあわせて変える方法

サイトでよく見かけるGoogleMapの埋め込み。

しかしいざ埋め込むと、サイトのデザインとGoogleMapのカラフルな色が合わず、
「埋め込みたいけど、サイトに合わない!」といったことになりがちです。

そこで今回は、GoogleMapの埋め込みで、マップの色を変える超簡単な裏技をお教えします。

そもそもGoogleMapの埋め込みとは

おそらくみなさんも一度はサイトで見かけたことがあるのではないでしょうか。


このように、文字を押すとGoogleMapに飛べる!という状態ではなく、
GoogleMapそのものがリンクとして載っている状態を”埋め込み”といいます!

GoogleMapの埋め込み方法

埋め込み方法はいたって簡単です。

載せたいマップの「共有」→「地図を埋め込む」からコピーしたHTMLコードをサイトのHTMLファイルにコピペするだけ!

これだけでマップの埋め込み自体は完了します。

しかし、例えば載せるサイトがモノトーン調であったり、特定の色しか使っていないサイトだと、
GoogleMapのカラフルな色でせっかくの統一感がなくなってしまいます。

そこで今回は、GoogleMapの色を簡単に変える方法をお教えします!

GoogleMapの色をサイトにあわせて変える方法とは…?

超簡単!cssにコードをコピペするだけ!

答えは超簡単!
cssにコードをコピペするだけです!

モノトーン調

.ifram{
   filter: grayscale(100%);
   transition: all 0.7s ease;
}

ピンクテイスト

.ifram{
 filter: hue-rotate(100deg);
 -webkit-filter: hue-rotate(100deg);
}

黒テイスト

.ifram{
 filter: invert(1)
 -webkit-filter: invert(1);
}

セピア(レトロな感じに)

.ifram{
   filter: sepia(100%);
   transition: all 0.7s ease;
}

まとめ

いかがでしたか?

web制作の現場でよくあるGoogleMapの埋め込み。

今回は色を変える裏技をお教えしました!

今後「GoogleMapを埋め込みたいけど、色が合わない!」といった際にぜひ参考にしてみてください!

こちらもおすすめ

この記事をシェアする

関連記事

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

  • 2022.10.24

    超簡単!?たった15分でカウントダウンを作成する方法

    コーディング

    制作

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×