少し前にGoogleMapの埋め込みでカラーリングを調整する方法を書いたのだが、とあるサイトでもっと良い感じの見た目に仕上がっていたので、その方法を解析して、我が手法として保持しておくことにする。
以前のブログ :
GoogleMapの埋め込みで見た目を良くする方法
以前のブログの見た目
標準
※画像
グレースケール
※画像
セピア
※画像
単一色
※画像
今回紹介する見た目
どう？以前のよりもみやすくなってるし、落ち着いた表示で良くなってるでしょ？
何がどう違うのかを検証して、理解して、次回から使える状態にしましょう。
ソースコード
html
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12985.570153387958!2d139.42686958715822!3d35.5440065!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ffeee1ad0c5f%3A0x536d76643e20c975!2zQ2FmZSDjg6Ljg4vjgqvvvIbjgqLjg4njg6rjgqLjg7zjg44g44Kr44OV44KnIOeUuueUsA!5e0!3m2!1sja!2sjp!4v1724585557354!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
css
.map{
width:100%;
height:400px;
position:relative;
border:0;
}
.map::after{
content:"";
background-color:#5f799c;
mix-blend-mode:overlay;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
pointer-events:none;
}
.map iframe{
width:100%;
height:100%;
filter:grayscale(1);
}
赤い文字のところだけを変えれば、別色での表示も可能です。
前回同様にツールを作っておいたので、シミュレートしてみてください。
解説
ソースの解析をすると、GoogleMapで共有をすると、iframeでのタグ貼り付けになるので、中身はほぼイジれません。
そして、前回はiframeに対してCSSでfilterを掛けていたんですが、
今回のバージョンでは、さらに１階層掘り下げています。
divでも、pでもspanでも何のタグでもいいんですが、block要素である必要はあります。
そして、その親改装タグに、CSSの擬似要素の::afterで、色の幕をつける様にしています。
iframeは、前回同様filterでグレーにしておいて、擬似要素のフォルターで、max-blend-modeという、フォトショップのレイヤーの
描画モードの様な効果がだせるようになります。
max-blend-modeをoverlay（オーバーレイ）にすると、グレースケールの黒に近い色に、指定の色付けができて、良い感じの見栄えになるという仕組みです。
ポイントは、
１階層掘ってオーバーレイするというトコロですね。
色変更ツール
カラーピッカー :
あとがき
ホームページ制作の仕事をしていると、こういうチョイ技って、結構役立つし、効率上がるんだよね。
クライアントも喜んでくれるし、いや〜ほんと、マジこれを教えてくれたサイトに感謝だわ！
あ〜〜〜・・・普通にマップ表示して、色味を損なっているサイトに教えてあげたい・・・
0 件のコメント:
コメントを投稿