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

TOP > 使える?小技 > title - 文字に波をつけるには?

文字に波をつけるには?

画像だけでなく文字にも波をつけることができます。文字をすごく強調させたい時には、目立つので使えると思います。

波文字の見本

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

文字も波をつけれます

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

画像の波も面白いですが文字の波も面白いと思います。ただ波の数を増やしすぎると読めなくなるので文字本来の意味がなくのるので注意です。

タグの紹介

まず一番最初に見て欲しいのが波をつけるタグです。基本のタグはfilter:waveです。filterは画像を加工するタグで、waveは波をつけるタグです。この基本のタグに下の表のタグを組み合わせて、自由に波の数や波の横幅を決められます。

タグの名前 タグの説明 効果を決める数値
font-size: 文字の大きさ 数値pxなど
フォント; フォントの種類 なし
width: 横幅の長さ 数値
padding- 余白の指定 top:数値px(上)・bottom:数値px(下)
right:数値px(右)・left:数値px(左)
freq: 波の数を決める 数値
strength: 波の横幅 数値
lightstrength: 光の強さ 0(弱) ~ 100(強)
phase: 波の開始位置 数値(0 ~ 100)
add: 波を作った時に元の画像と重ねる 0(false)重ねない・1(true)重ねる

波文字にする方法

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


<div style="font-size: 数値px; フォントの種類; "width: 数値px; padding:数値px;filter:wave(freq=数値, strength=数値);">~~~</div>
で囲みます。

これだけではわかりにくいと思うので、数値も設定してすごく具体的な例を作って説明したいと思います。例-文字の大きさは太字で20pt、フォントはMS 明朝、色は水色、波の数は1、波の横幅は3、光の強さは50。(1番上の文字が例)

<div style="font:bold 20pt MS 明朝; color:#0099FF; width:100%; padding:0px 10px; filter:wave(freq=1, strength=3, lightstrength=50);">

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

ちなみに2番目の文字は・・・

<div style="font-size:35px; MS Sans Serif; color:#cc0033; width: 100%; padding:10px; filter: wave(strength=2, lightstrength=30);">
と指定しています。


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

http://rgrg.blog61.fc2.com/tb.php/374-6fba9818   

Template Designed by DW99