狼読

 
2020/05/11

[css]ホームページに埋め込んだ Google Mapをcssだけでモノクロにする方法

皆様のホームページには、大抵場所を案内するためにGoogle Mapが埋め込まれていますね。そんなGoogle Mapですが、デフォルトの状態のデザインを使われているのが一般的ではないでしょうか?今回はそんなGoogle Mapをモノクロデザインにする方法をご紹介したいと思います。サイトのデザインによっては、カラーがいっぱいついているGoogle Mapのデザインが合わないので変えたいけどわからないという方がいらっしゃるかと思います。その悩み当ブログで解決したいと思います。

Google Mapを埋め込んでみよう

まずは、Google Mapを埋め込んでみようと思います。

Google Mapを埋め込むためには、まずGoogle Mapで埋め込みたい住所を入力して、共有というボタンをクリックします。共有ボタンをクリックしますと、地図を埋め込むという欄がありますので、そこで生成されたコードをHTMLにコピーしてください。

Google Mapを埋め込むコードを生成する方法

上記のコードを実際に埋め込んでみようと思います。

Google Mapを埋め込んで見た

Google Mapをホームページに埋め込むことができるようになりましたね。デフォルトでは、widthの欄が600となっておりますので、100%など%にすることで、スマホにした際にはみ出ることがなくなりますので、埋め込んだのにはみ出て困った!という方はそちらの設定を変えて見てください。

Google Mapの色をモノクロにしてみよう

先ほど埋め込んだGoogle Mapをモノクロにしていこうと思います。grayscaleを変えることで、 Google Mapをモノクロにすることができます。
cssを一行記述するだけですが、やり方がわからないという方がいらっしゃると思います。サンプルコード、モノクロにしたサンプルも記述しておきます。

<style>
  iframe{
   filter:grayscale(1);
   -webkit-filter:grayscale(1);
 }
</style>

Google Mapをモノクロにしたサンプル例

上記のようにcssだけでgoogle mapがモノクロになりましたね。

まとめ

Google Mapは幅広く多くのサイトで使われているかと思います。そんなGoogle Mapをデフォルトの状態ではなく、ホームページのデザインにあった物に変えていくというのはあなたのサイトのデザインをよりいいものにするかと思います。
今回は、モノクロにする方法をご紹介させていただきましたが、落ち着いたイメージのサイトにはぴったりだと思います。是非活用してください。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読