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

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

画像を半透明にするには?一括編

それではすべての画像を一括で半透明にする方法を紹介します。全体よりも個別の設定の方が優先するので、全体で半透明だけの設定をしても、個別で円形の外に行くほど透明度が高くなる指定をしたら、その画像だけは円形に表示されるので、両方を一応使えます。


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

まずテンプレートの設定からスタイルシートの編集を開いて下さい。
スタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
img{filter: alpha(前回紹介したタグを組み合わせてここに入れる);}
を記入します。

例えば全ての画像をただの半透明にしたいなら、
img{filter: alpha(style=0, opacity=50)}
の様にしてスタイルシートに記入するだけです。

本文記事に使われている画像だけを半透明にしたい人はこちら

まずテンプレートの設定から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: alpha(前回紹介したタグを組み合わせてここに入れる);}
を記入します。(class=なら「.」を使って、id=なら「#」を使います。)

僕の場合でただの半透明にしたいなら、
.entry_body img{filter: alpha(filter: alpha(style=0, opacity=50)}になります。

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

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

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

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

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

開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
div.好きな名前 img{filter: alpha(前回紹介したタグを組み合わせてここに入れる);}
を記入します。

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

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

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

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

例えば名前を「toumei」にしてただの半透明にしたいなら、
div.toumei img{filter: alpha(style=0, opacity=50);} と指定して
半透明にしたい画像を使う時に、
<div class="toumei">~~~</div>
とします。

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


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


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

http://rgrg.blog61.fc2.com/tb.php/107-0d141fe2   

Template Designed by DW99