ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 使える?小技 > title - 文字にぼんやりした影をつけるには?

文字にぼんやりした影をつけるには?

画像だけでなく文字にもぼんやりとした影をつけることができます。文字をすごく強調させたい時には、立体的になって目立つので使えると思います。

ぼんやりした影の見本

どんな感じになるの?と思うので見本を作ってみました。

文字も影をつけれます

文字も影をつけれます
(環境によっては影がついて見えない方もいます)

影をつけるとすごく立体的になるし、なんと言ってもやっぱり目立ちます。個別でしか使う機会がないと思うので、個別での文字にぼんやりした影のつけ方を紹介します。

タグの紹介

まず一番最初に見て欲しいのが影をつけるタグです。基本のタグはfilter: shadowです。filterは画像を加工するタグで、shadowはぼんやりした影をつけるタグです。この基本のタグに下の表のタグを組み合わせて、自由に自分の好きな色の影や影の方向を決められます。

タグの名前 タグの説明 効果を決める数値
font-size: 文字の大きさ 数値pxなど
フォント; フォントの種類 なし
width: 横幅の長さ 数値
padding- 余白の指定 top:数値px(上)・bottom:数値px(下)
right:数値px(右)・left:数値px(左)
color= 影の色を決める 色の名前・#色の値
direction= 影の方向 0=上・45=右上・90=右・135=右下
180=下・225=左下・270=左・315=左上
strength= 影の長さ 数値

個別にぼんやりした影をつける方法

新しい記事を作る時などにテキスト入力欄に文字を書きますが、その時に影をつけたい文字の前後に以下のタグでその文字を囲みます。


<div STYLE="font-size: 数値px; フォントの種類; "width: 数値px; padding-:数値px;filter: shadow(color=#色の値, direction=影の方向, strength=数値);">~~~</div>
で囲みます。

これだけではわかりにくいと思うので、数値も設定してすごく具体的な例を作って説明したいと思います。例-文字の大きさは太字で25pt、フォントはVerdana、影の方向は左下、影の色は水色、影の長さが5px。(1番上の文字が例)

<div STYLE="font:bold 25pt Verdana; width: 100%; padding-bottom: 3px; filter: shadow(color=#99ffff, direction=225,strength=5);">
<font color="#0066FF">文字も影をつけれます</font>
</div>

何でこの数値を当てはめるのかを説明したいと思います。
・font:bold 25ptはboldが太字にするというタグで文字の大きさが25ptです。
・Verdana;はフォントの種類です。FONTSで色々なフォントを選べますが、あなたが指定したフォントをブログを見ている人がパソコンに持っていないと、標準のフォントが表示されるだけなので注意が必要です。
・width:100%;は横幅の余白を確保します。文字を横一列で表示したい時は、横幅に余白を取っておかないと途中で文字が次の段落に行ってしまいます。ちなみに100%とは横幅全部の余白を確保している状態です。
・padding-bottom:3px;は上のwidthと同じ余白を確保します。文字が大きいと横だけでなく、下にも余白が必要になるからです。しかも横は余白がないと次の行にいくだけでしたが、下の余白がないと文字が途中で途切れてしまって上の方しか見えなくて、読む事ができなくなるので要注意です。
・color=#99ffff,は水色の影を作ります。
・direction=225, は左下に影を作ります。
・strength=5は5pxの長さの影を作ります。

ちなみに2番目の文字(文字の大きさが35pxで右上に赤色の影をつくる)は・・・
<DIV STYLE="font-size: 35px; arial narrow; width: 100%; padding-bottom:20px; padding-top: 20px; filter:shadow(color=#DF1F43, direction=45);">
と指定しています。


関連ページ)
画像にくっきりした影をつけるには?
画像にくっきりした影をつけるには?一括編
文字にくっきりした影をつけるには?
画像にぼんやりした影をつけるには?
画像にぼんやりした影をつけるには?一括編
・文字にぼんやりした影をつけるには?


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/110-ba60b176   

Template Designed by DW99