Google Maps APIを使わずに、埋め込みiframeの色合いカスタマイズ

2018/09/18 サイト制作 投稿者:王

2018年6月11日からGoogleマップのサービスを大幅に刷新し、新しくGoogle Maps Platformとしてスタートしました。
APIで埋め込んでいる地図は、APIキーが必須となり、正しく設定されていない場合は表示されなくなりますが、Googleマップから共有タグで取得したiframeを埋め込む場合は変更しなくても大丈夫です。

Google Maps APIを使わないなら

今日は設定するのにやや面倒になるGoogle Maps APIを使わずに、埋め込みiframeの色合いをカスタマイズしてみたいと思います

使うのはCSSのfilterプロパティ

filterプロパティは主に画像に様々な視覚効果を与える際に使われています。
もちろんbackgroundbordertext-decorationiframeなどにも使用できます。

具体的にできること

関数名(単位) 効果
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

・階調反転

ネオン街のナイトを連想させる配色です

CSS

・彩度

彩度が高く、色も可愛く見えます

CSS

・mix効果

関数をmixして使うこともできます。
ちょいレトロな雰囲気です。

CSS

・モノクロ

モノトーンをメインにしたいサイトに

CSS

・transitionを加えてふわっと

さらにhoverしてモノクロからカラーにもできます

CSS

気を付けてもらいたいこと

ブラウザー対応について、やはりIE系には対応していません
今後のアップデートによる改善に期待したいです。

おまけ

使い合わせ、度合いの調整など苦手な方に、CSSのfilterプロパティの項目を画像を見ながら調整できる便利なサービスをご紹介します ↓

Windows 7 の延長サポート終了まで

days
3
9
6
hours
1
6
minutes
4
3
seconds
1
0

Office 2010 の延長サポート終了まで

days
6
6
9
hours
1
6
minutes
4
3
seconds
1
0

カレンダー

     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)