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

TOP > 使える?小技 > title - 画像を半透明にするには?個別編

画像を半透明にするには?個別編

たまに画像がぼんやりとしている物を見たことはいですか?幻想的な雰囲気が出ていて少し憧れますよね。

半透明な画像の見本

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

image290.jpg

元の画像がこれです。

image290.jpg 

半透明度にするとこの様になります。

image290.jpg ただ半透明にするだけでなくこの様に、グラデーションをかける事もできます。これは円形に外側に向けて透明度を高くしています。 他にも円形の内側からや長方形のまま上下左右などから透明にしていく事もできます。

(環境によっては半透明になって見えない方もいます)

半透明にするだけですごく幻想的だし、かっこいい感じがしませんか? スタイルシートを編集すれば、一括ですべての画像を同じような半透明にすることもできるし、記事を作る時に画像のタグに少し手を加えれば、上記の様に個々の画像を半透明にする事もできます。

半透明にするタグ紹介

まず一番最初に見て欲しいのが半透明にするタグです。基本のタグはfilter: alphaです。filterは画像を加工するタグで、alphaは半透明にするタグです。この基本のタグに下の表のタグを組み合わせて、自由に自分の好きなような透明度や形にします。

タグの名前 タグの説明 効果を決める数値
style= グラデーションの形 0=なし・1=線形
2=円形・3=長方形
opacity= 開始透明度 0(透明)~100(不透明)
finishopacity= 終了透明度 0(透明)~100(不透明)
startx=
starty=
開始位置
(線形で使用)
X座標とY座標で
開始位置を決める
finishx=
finishy=
終了位置
(線形で使用)
X座標とY座標で
終了位置を決める

個別に半透明にする方法

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

実際に何をどこに記入するのかというと、border="0"の後ろにSTYLE="filter: alpha(上で紹介したタグを組み合わせてここに入れる);"
を記入します。

これだけではわかりにくいと思うので、具体例で説明したいと思います。例えばただ半透明にしたいなら(上の画像の2番目の例)、 <img src=
"http://~~~.jpg" alt="画像の名前.jpg" border="0" STYLE="filter: alpha(style=0, opacity=50);">

という様に記入します。

色々な例を紹介

他の例も少し紹介します。
【円形・外側に向けて透明度を高く(上の例の3番目)】
STYLE="filter: alpha(style=2, opacity=100);"

【円形・内側に向けて透明度を高く】 image290.jpg

STYLE="filter:alpha(style=2,opacity=0,
finishopacity=100);"

【画像の形はそのままで左から右にかけて透明度を高く】 image290.jpg

STYLE="filter:alpha(style=1,opacity=0,
finishopacity=100);"

【画像の形はそのままで右から左にかけて透明度を高く】 image290.jpg

STYLE="filter:alpha(style=1,opacity=100,
finishopacity=0);"

【画像の形はそのままで上から下にかけて透明度を高く】 image290.jpg
STYLE="filter:alpha(style=1,opacity=100,
finishopacity=0, startx=75,starty=0,
finishx=75, finishy=100);"

(画像の大きさが横150px・縦100pxの場合)
【画像の形はそのままで下から上にかけて透明度を高く】 image290.jpg
STYLE="filter:alpha(style=1,opacity=100,
finishopacity=0, startx=75,starty=100,
finishx=75, finishy=0);"

(画像の大きさが横150px・縦100pxの場合)
【長方形のグラデーション】 image290.jpg

STYLE="filter:alpha(style=3,opacity=100);"

色々できて面白いですよね。また画像を個別に半透明にできるから使いがってもいいと思います。

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

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


関連ページ)
・画像を半透明にするには?個別編
画像を半透明にするには?一括編
画像を透明にするには?


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
初めまして
私は透過のテンプレを使っているのでぼかしがピッタリです、御紹介有難う御座いました。
PS : Firefoxは非対応のようですね!
はじめまして
お絵かきさんのブログにぼかしの画像がほんとにぴったりですね。いい雰囲気がでていると思います。
「filter」 を使ったものはIEのみにしか表示されないんです。ごめんなさい。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/106-b1169189   

Template Designed by DW99