Adobeスクールパートナー(ブロンズ)

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

無料!30秒で!グーグルマップの色味を変える方法

使用ソフト: Dreamweaver  

グーグルマップの色味はCSSのfilterプロパティを使って簡単に変えられます。
ウェブサイトの雰囲気にあった色味を探してみてください!

下準備・・・HTMLにグーグルマップを挿入する

グーグルマップを開きウェブサイトに載せたい場所を検索→
「共有」→「地図を埋め込む」→「HTMLをコピー」→
HTMLの地図を載せたい場所に貼り付け

手順

①iframe内のstyle属性を探してください。(下記の図はわかりやすいように改行してあります)

②そこに 「filter:●●●(値);」を追加。半角スペースを忘れずに!

以上です。本当に30秒で出来そうでしょ?
今回はオススメのフィルター効果を3つ紹介します。

白黒

追加CSS
filter:grayscale(0〜100%);

100%で完全なグレースケールになります。

セピア

追加CSS
filter:sepia(0〜100%);

100%でセピア色。
100%だと見にくかったので50%以下がオススメです。

彩度

追加CSS
filter:saturate(値%);

100%が基準で、値が大きいと彩度が高くなり、小さいと低くなります。
低彩度(20%)

高彩度(120%)
若干目がチカチカします・・・

ちなみにfilterプロパティはすべて使えます。
ぼかしや透明度などについては実用性がないかもしれませんが、色々試して遊んでみてください!

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Modern Fluid Typography Editor

    Web

    簡単なCSSでフォントサイズをレスポンシブ対応にしよう!

    フォントサイズのレスポンシブ対応WEBサイトをレスポンシブ対応にす…

  2. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

  3. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  4. Web

    【CSS】CSS Gradientで複雑なグラデーションを作成

    CSS Gradientというフリーサイトを使ってCSSで複雑なグラデ…

  5. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  6. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

人気の記事

おすすめの参考書

PAGE TOP