CSSで文字を白抜きにする

んにちは

今回は文字に影を付ける命令を
ちょっと応用してみます。

文字に影をつける命令といえば

“text-shadow”

です。通常は

text-shadow: #36f 5px 5px 3px;

文字に影をつける

このように立体感を出す使い方を
よく見かけますが、

text-shadow: #36f 0px 0px 5px;

文字に影をつける

こんなふうに文字の周りに広がるように
影をつけることもできます。

さて、2016年4月16日現在、
私のサイトのメニューバーは

160409_menu1

このような感じになっています。
背景が茶色1色なので
白い文字が見やすいですね。

ただ、人によっては背景は1色ではなく、
2色でグラデーションさせたり、
画像を使ったりしています。

たとえばこんな感じで。。。

トップページ

”トップページ”と書いてあるのですが、
非常に見にくいですね。。。

黒だから見にくいのでしょうか?
白にすると

トップページ

青にすると

トップページ

・・・

何色にしても見にくいですね。

このように背景に色がいくつも使われていると、
文字が見にくくなってしまいます。

そこで”text-shadow”を使って
文字を白抜きにします。

さきほどの白文字のメニュー

トップページ

こちらの文字を”text-shadow”を使って
周りを黒にしてみます。

text-shadow: #000 0px 0px 5px;

トップページ

このように白文字の周りがぼんやり黒くなり、
だいぶ見やすくなりました。

ただ、ちょっと薄いですよね。

もうちょっと濃くしたい

実はこの”text-shadow”

重ねがけできます(゜Д゜)

どういうことかというと

text-shadow: #000 0px 0px 5px , #000 0px 0px 5px;

上記の赤文字と青文字のように、影を2つ設定することもできます。

トップページ

先ほどよりかなり濃くなりましたね。
これならまあまあ見やすいかな?(・ω・)

でも

もっと重ねがけすることもできますよ

text-shadow: #000 0px 0px 5px , #000 0px 0px 5px , #000 0px 0px 5px , #000 0px 0px 5px , #000 0px 0px 5px;

五回重ねがけしてみました。
そうすると。。。

トップページ

十分みやすいですね。
さらに色を黒から赤に変えてみます。

text-shadow: #f00 0px 0px 5px , #f00 0px 0px 5px , #f00 0px 0px 5px , #f00 0px 0px 5px , #f00 0px 0px 5px;

トップページ

良い感じじゃないでしょうか?

こんな風に白抜きすれば
背景の色を気にしなくて良くなりますね( ´∀`)

最後までお読み頂きありがとうございました。
分からないこと、悩んでいることなど、
お気軽にお問合せください。
お問い合せはこちら

アフィリエイトを無料で学びたい方、
覚醒メールセミナーNEOを受講しませんか?
覚醒メールセミナーNEO

ブログランキングに参加中しています。
クリックして頂けるとうれしいです( ´∀`)

8 Responses to “CSSで文字を白抜きにする”

  1. より:

    シンイチロウさん、おはようございます。
    ブログランキングからきました、榎(えのき)です。

    ブログ読ませていただきました。
    ブログアフィリやサイトアフィリをするのに、文字やボタンなどを目立つようにカスタマイズするテクニックを習得したいと思っていました。
    シンイチロウさんのブログは、色々なテクニックがわかりやすく書かれているので、今後も参考にさせていただきます。

    応援完了しました。
    よろしくお願い致します。

    • 榎さん、はじめまして!
      ブログにお越しいただきありがとうございます( ´∀`)ノ

      わかりやすいと言って頂けると安心します(笑)
      使えそうなものがありましたらぜひ使ってください♪

      応援ありがとうございます!
      私も伺わせて頂きますね(゚∀゚)ノ

  2. シンイチロウさん、こんばんは。
    アフィリエイト副業で稼ぐ@たいちです。

    シンイチロウさんの記事は
    いつも勉強になります。

    HTMLはわかるんですがCSSがまったく?
    もう少しこちらにお伺いして
    勉強します(泣)

    ブログをリニューアルする時には
    参考にさせて頂きます。

    応援して泣きながら帰ります。

    • たいちさん、こんばんは!

      いつもありがとうございます!

      HTMLがわかる方ならCSSもきっと大丈夫です。
      がんばってください(゚∀゚)ノ
      ブログリニューアルされる日を楽しみにしています♪

      応援ありがとうございます。
      私は花粉症で泣きそうですが、また伺わせていただきます(゚∀゚)ノ

  3. めいこ より:

    シンイチロウさん、こんばんは。
    めいこです。

    CSSは苦手であまりいじったりしないのですが
    文字までデザインできるんですね!!
    私はバナープラスにお世話になりっぱなしで^^;
    ちょっと反省です。
    こうして自分でできるようになると
    ブログで出来ることも広がって楽しくなりますね♪
    応援完了です。
    またきます。

    • めいこさん、こんばんは!

      CSSが登場してデザインを色々いじれるようになりましたね。
      画像を用意するよりサイトが軽くなるので、
      私はなるべく使うようにしています( ´∀`)

      でも私もバナーは画像で作ってますよ(笑)
      バナープラスを使いこなせるなら
      それはいいことだと思います。

      お互い得意なことでやっていきましょう( ´∀`)ノ

      応援ありがとうございます♪
      私もまたお邪魔しますね(゚∀゚)ノ

  4. hiro より:

    しゅういちろうさん、
    はじめましてhiroです。

    私はCSSやHTMLが苦手なんですが・・

    でも、しゅういちろうさんのブログを
    拝見させて頂いて、
    やはりCSSなどが自由に出来ると、
    カスタマイズもいろいろと出来るので、

    CSSやHTMLも勉強したいと思います。

    白抜き文字も影の色で大分イメージが違っているので、
    デザイン的な事も覚えられそうです。

    とても参考になりました。

    ブログも応援さえて頂きました。
    また訪問させて頂きます。

    • hiroさん、はじめまして!

      できることが増えてくると
      自分の作りたいデザインに近づけますし、
      何よりカスタマイズが楽しくなりますよ( ´∀`)ノ

      参考になったなら幸いです♪
      ぜひ挑戦してみてください(゚∀゚)ノ

      応援ありがとうございます!
      サイトURLがわからないのでこちらから伺えません(・ω・;)
      今度URLも教えてください♪

      あ、あと名前はシンイチロウです(笑)

コメントを残す

サブコンテンツ

プロフィール

シンイチロウのアバター

名前:シンイチロウ
覚醒メールセミナーNEO講師
年齢:30代
性別:男性
職業:会社員
詳しいプロフィールはこちら

メール相談受付中

お問い合わせはこちらから
いつでもご相談ください

月別アーカイブ



このページの先頭へ