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

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

画像を透明にするには?

画像の中の特定の色を透明にします。背景などの色を透明にすると中の画像だけを使っているように表示されます。

透明な画像の見本

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



元の画像がこれです。


パーマン 

背景を透明にするとこの様になります。


パーマン 

体を透明にするとこの様になります。

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

背景を透明にすると、中の画像がだけが表示されるようになるのでより目立つし、部分を透明にするのも便利ですよね。

個別に透明にする方法

新しい記事を書く画面で画像をアップロードしてサムネイルか元画像を選ぶと、

<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">STYLE="filter: chroma(color=色の値);"を記入して、透明にしたい色を色の値に指定します。

実際にどこに記入するのかというと、border="0"の後ろにSTYLE="filter: chroma(color=色の値);"
を記入します。

つまり、上から2番目の背景を透明にした画像を例にすると、

<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/200.gif" target="_blank"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/200.gif" alt="パーマン" width="250" height="166" border="0" STYLE="filter: chroma(color=#80FFFF);"></a><br clear="all">

と記入しています。

ブログの中の全ての画像から特定の色を透明にしたい人はこちら

まずテンプレートの設定からスタイルシートの編集を開いて下さい。
スタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
img{filter: chroma(color=#色の値);}
を記入します。
色の値は自分が透明にしたい色の値を入力します。
そして記入できたら更新を押して保存をします。

本文記事に使われている画像から特定の色を透明にしたい人はこちら

まずテンプレートの設定からHTMLの編集を開いて下さい。開いたら<!--topentry-->を探して下さい。メモ帳などにコピペして検索で探すと見つけやすいと思います。

見つけたらその近くに<%topentry_body>があると思います。ここの2つの間にclass="~"やid="~"などがあると思います。("~"の中に%が入っている物は省いて考えて下さい)

例えば僕の場合なら・・・

<!--topentry-->
<div class="entrybox" id="a<%topentry_no>">
<h2><a href="<%topentry_link>" title="<%topentry_year><%topentry_month><%topentry_day>-<%topentry_title>" accesskey="T"><%topentry_title></a></h2>
<div class="entry_body">
<%topentry_body>

となっていて2つありましたね。この"~"に囲まれた物を使うのでこれを覚えて下さい。複数ある場合はどれでもいいですが僕はentry_bodyを使いたいと思います。これを覚えたら今度はスタイルシートの方を見ます。

スタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
.か#さっき覚えた物 img{filter: chroma(color=#色の値);}
を記入します。(class=なら「.」を使って、id=なら「#」を使います。)

僕の場合なら、
.entry_body img{filter: chroma(color=#色の値);}になります。

くれぐれも「.」「#」と忘れないで下さい。忘れると白黒になりません。

これらの指定をしておけば、いちいち1回1回、タグを画像に入れなくても、普通に画像を使うだけで全部の画像が指定された白黒になります。

場合によって使い分けたい人はこちら

毎回は透明にしたくないけど、使う回数も結構多いからいつも個別に指定するのも面倒だなという人この方法がいいと思います。

まずテンプレートの設定からスタイルシートの編集を開きます。

開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
.好きな名前 img{filter: chroma(color=#色の値);}
を記入します。

そして、画像を使う新しい記事を書く時に少し手を加えます。
画像を選ぶと、

<a href="http://blog~~~.jpg" target="_blank">
<img src="http://~~~.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">

この様に記入されますが、透明にしたい時はこの前後に、
<div class="さっきつけた好きな名前">~~~</div>
を付け加えます。

反対に透明にしたくない時は、何もつけずにいつもの様にそのまま画像を使います。

例えば名前を「ironuki」にしたら、
.ironuki img{filter: chroma(color=#色の値);} と指定して
透明にしたい画像を使う時に、
<div class="ironuki">~~~</div>
とします。

画像を使う時に少し面倒ですが、この語句を辞書登録しておけば全然苦にならないと思います。

◇他にもフリーソフトを使ってあらかじめ透明にしたい部分を背景色と同じ色にした画像を使うという方法もあります。


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


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

http://rgrg.blog61.fc2.com/tb.php/371-c7dab293   

Template Designed by DW99