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

TOP > 使える?小技 > title - 画像を波状にするには?

画像を波状にするには?

画像を波状して見せる事ができる様にする方法を紹介します。いつもは絶対にまっすぐなのでちょっと面白いと思います。

画像を波状にした見本

一体どんな画像なの?という方の為に見本を作ってみました。

image292.jpg
これが元の画像です。

image292.jpg

少しだけ波がついて旗の様にも見えます。

image292.jpg

たくさん波をつけてぐにゃぐにゃになりました。

(環境によっては波状に見えない方もいます)

遊び心で画像を波の様にして見せるのも面白いですよね。スタイルシートを編集すれば、一括ですべての画像を同じような影をつけることもできるし、記事を作る時に画像のタグに手を加えれば、上記の様に個々の画像に影をつける事もできます。

タグの紹介

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

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

個別に波をつける方法

新しい記事を書く画面で画像をアップロードしてサムネイルか元画像を選ぶと、
<a href="http://blog~~~.jpg" target="_blank">
<img src="http://~~~.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">
この様に記入されますよね。この前後にタグを付け加えると画像に波をつけれます。

実際に何をどこに記入するのかというと、<a href="http://の前に<div style="width: 数値px; padding:数値px;filter:wave(freq=数値, strength=数値);">を記入して、</a>の後に</div>を記入します。

これだけではわかりにくいと思うので、数値も設定してすごく具体的な例を作って説明したいと思います。例-画像の大きさは横が250pxで縦が150px、波の数は1回、波の横幅は5、光の強さは10、画像の右側に文字の回りこみを指定する(上の画像の2番目の例)

<div style="width: 250px; padding:0px 10px; float:left; filter:wave(freq=1, strength=5, lightstrength=10);"> <a href="http://
blog~~~.jpg" target="_blank"><img src="http://~~~.jpg" alt="画像の名前.jpg"border="0"> </a></div>

という様に記入します。

何でこの数値を当てはめるのかを説明したいと思います。
・width:250px;は画像の横の長さと同じ長さにします。
・padding:0px 10px;は波を作ると画像の幅が大きくなるので、画像の右(padding-right)と左(padding-left)に余白を作っておかないと、波ができる幅がないので上手く表示されなくなります。なので右と左だけに余白をつくればいいので上下が0pxで余白なしにして左右を10pxで余白をつくりました。

パディング説明

・float:left;は画像を左において、その右側に文字を記入したい時はこれを指定しないと文字が右に書けません。また文字を記入する時は</div>の後ろに書いて下さい。<br clear="all">をそのまま使えば、回り込みを解除してくれます。
・freq=1, は波の回数を決めます。
・strength=5, は波の横幅を決めます。
・lightstrength=10は光の強さを決めます。

この画像の様にクリックすると元の普通の画像が現れてしまうのが嫌で悩んでいる人は、普通に画像を使う時に記入される下の青字の部分を削除してください。
<a href="http://blog~~~.jpg" target="_blank">
<img src="http://~~~.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">

長くなってしまうので続きでスタイルシートを編集して一括で全ての画像に波をつける方法を紹介します。    <つづき>


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

http://rgrg.blog61.fc2.com/tb.php/372-a120c899   

Template Designed by DW99