2018年6月11日からGoogleマップのサービスを大幅に刷新し、新しくGoogle Maps Platformとしてスタートしました。
APIで埋め込んでいる地図は、APIキーが必須となり、正しく設定されていない場合は表示されなくなりますが、Googleマップから共有タグで取得したiframeを埋め込む場合は変更しなくても大丈夫です。
Google Maps APIを使わないなら
今日は設定するのにやや面倒になるGoogle Maps APIを使わずに、埋め込みiframeの色合いをカスタマイズしてみたいと思います
使うのはCSSのfilterプロパティ
filterプロパティは主に画像に様々な視覚効果を与える際に使われています。
もちろんbackgroundやborder、text-decoration、iframeなどにも使用できます。
具体的にできること
| 関数名(単位) | 値 | 効果 |
|---|---|---|
| blur(px) | 0px(初期値)～10px | ぼかし |
| brightness(%) | 0%～100%(初期値) | 明度 |
| contrast(%) | 0%～100%(初期値) | コントラスト |
| drop-shadow | x軸方向の影の位置 y軸方向の影の位置 広がりの大きさ 色 | 影 |
| grayscale(%) | 0%(初期値)～100% | モノクロ |
| hue-rotate(deg) | 0deg(初期値)～360deg | 色相回転 |
| invert(%) | 0%(初期値)～100% | 階調反転 |
| opacity(%) | 0%～100%(初期値) | 透過 |
| saturate(%) | 0%～100%(初期値) | 彩度 |
| sepia(%) | 0%(初期値)～100% | セピア |
サイトの雰囲気に合わせて
Google マップに相性よさそうな色合いをいくつかご紹介します。
当然サイトに合わせてカスタマイズしてOKです。
・オリジナル
・色相回転
薄い蛍光色が表現できる、個人的に一番気に入ってます
CSS
|
1 2 3 4 |
iframe{ -webkit-filter: hue-rotate(100deg); filter: hue-rotate(100deg); } |
・階調反転
ネオン街のナイトを連想させる配色です
CSS
|
1 2 3 4 |
iframe{ -webkit-filter: invert(1); filter: invert(1); } |
・彩度
彩度が高く、色も可愛く見えます
CSS
|
1 2 3 4 |
iframe{ -webkit-filter: saturate(2); filter: saturate(2); } |
・mix効果
関数をmixして使うこともできます。
ちょいレトロな雰囲気です。
CSS
|
1 2 3 4 |
iframe{ -webkit-filter: contrast(95%) brightness(95%) saturate(150%) sepia(50%); filter: contrast(95%) brightness(95%) saturate(150%) sepia(50%); } |
・モノクロ
モノトーンをメインにしたいサイトに
CSS
|
1 2 3 4 |
iframe{ -webkit-filter: grayscale(1); filter: grayscale(1); } |
・transitionを加えてふわっと
さらにhoverしてモノクロからカラーにもできます
CSS
|
1 2 3 4 5 6 7 8 9 10 |
iframe{ -webkit-filter: grayscale(1); filter: grayscale(1); } iframe:hover{ transition: filter 0.8s ease; -webkit-filter: grayscale(0) saturate(2); filter: grayscale(0) saturate(2); } |
気を付けてもらいたいこと
ブラウザー対応について、やはりIE系には対応していません。
今後のアップデートによる改善に期待したいです。
おまけ
使い合わせ、度合いの調整など苦手な方に、CSSのfilterプロパティの項目を画像を見ながら調整できる便利なサービスをご紹介します ↓
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
