狼読

 
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/07/17

Macのストレージ(空き容量)を正しく確実に確保!ストレージ 「その他」圧迫の原因と解消方法

投稿カレンダー

2024年11月
 123
45678910
11121314151617
18192021222324
252627282930  

Technology

category

©狼読