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. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

  2. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  3. Web

    Vegas2で背景画像をスライドショーに(jQueryプラグイン)

    cssで背景画像として設置していた画像をスライドショーにしたい。画面い…

  4. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  5. Web

    Flexboxで横並びを簡単に!

    皆さんは横並びのメニューなどのコーディングの際にflotタグ使っていま…

  6. Web

    cssだけで、グラデーション入りのラインを作る!

    cssの擬似要素を使った、グラデーション入りのボーダーラインを作りまし…

人気の記事

おすすめの参考書

PAGE TOP