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

TOP > 使える?小技 > title - 文字にくっきりした影をつけるには?

文字にくっきりした影をつけるには?

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

くっきりした影の見本

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

文字も影をつけれます

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

ぼんやりした影は文字の場合、少し読みにくいかったけどこちらはくっきりしているので読みやすいです。個別でしか使う機会がないと思うので、個別での文字にぼんやりした影のつけ方を紹介します。

タグの紹介

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

タグの名前 タグの説明 効果を決める数値
font-size: 文字の大きさ 数値pxなど
フォント; フォントの種類 なし
width: 横幅の長さ 数値
padding- 余白の指定 top:数値px(上)・bottom:数値px(下)
right:数値px(右)・left:数値px(左)
color= 影の色を決める 色の名前・#色の値
offx=
offy=
影の長さと方向 offx=右方向と影の長さ(マイナスで左方向)
offy=下方向と影の長さ(マイナスで上方向)
positive= 影を反転させる 0(false)反転・1(true)通常

個別にくっきりした影をつける方法

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


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

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

<div STYLE="font:bold 25pt MS 明朝; width:100%; padding-bottom: 5px; filter: dropshadow(color=#33ffff, offx=5, offy=5);">

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

ちなみに2番目の文字(文字の大きさが35pxで左上にオレンジ色の影をつくる)は・・・
<DIV STYLE="font-size: 35px; MS Sans Serif; width: 100%; padding-bottom: 20px;padding-top: 20px; filter: dropshadow(color=#ffcc99, offx=-5, offy=-5);">
と指定しています。

また、反転を使うとこの様になります。
文字も影をつけれます
dropshadow(color=#99ffffで決めた色が影の色になるのではなくて、背景の色になって影は白くくりぬかれます。


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


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

http://rgrg.blog61.fc2.com/tb.php/113-e79a85dc   

Template Designed by DW99