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

TOP > 使える?小技 > title - 画像にぼんやりした影をつけるには?一括編

画像にぼんやりした影をつけるには?一括編

それではすべての画像に一括で影をつける方法を紹介します。画像に枠がある人とない人で少しやり方が違うので、自分がどちらなのか確かめてからやってみて下さい。


全ての画像に影をつける方法

●画像に枠のない人で、本文記事に使われている画像に影をつけたい人はこちら。

まずテンプレートの設定から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を使いたいと思います。これを覚えたら今度はスタイルシートの方を見ます。

スタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
div.か#さっき覚えた物 img{
padding-方向: 数値px;
float: left;
filter: shadow(color=色の値, direction=影の方向, strength=影の長さ);}

を記入します。(class=なら「.」を使って、id=なら「#」を使います。)

僕の場合で右下に長さ5pxの赤色の影をつくりたいなら、
div.entry_body img{
padding-right:5px;
padding-bottom:5px;
float: left;
filter: shadow(color=red, direction=135, strength=5);
}
になります。

くれぐれも「.」「#」と忘れないで下さい。忘れると影はできません。

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

ただ、この様に一括指定をして個別の指定もすると、両方の影が出てしまうので個別の指定はしないで下さい。

画像によって影をつける・つけないを使い分ける方法

●画像に枠がある人と枠がない人で場合によって使い分けたい人はこちら。

画像に枠がある人は上で紹介した方法をやってみると、枠の中に影ができてしまい影っぽくないので駄目です。そして毎回は影を作りたくない人、絵文字に影が出来るのが嫌な人、個別と一括の影を使い分けたい人はこの方法がいいと思います。。

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

開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
div.好きな名前{
padding-方向: 数値px;
float: left;
filter: shadow(color=色の値, direction=影の方向, strength=影の長さ);}

を記入します。

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

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

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


<div class="さっきつけた好きな名前">
<a href="http://blog~~~.jpg" target="_blank">
<img src="http://~~~.jpg" alt="画像の名前.jpg" border="0">
</a></div><br clear="all">

つまり、この様になります。

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

例えば名前を「kage」にして右下に長さ5pxの赤色の影をつくりたいなら、
div.kage{
padding-right:5px;
padding-bottom:5px;
float: left;
filter: shadow(color=red, direction=135, strength=5);
}

とスタイルシートに指定して、
影をつけたい画像を使う時に、
<div class="kage">~~~</div>
とします。

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


関連ページ)
画像にくっきりした影をつけるには?
画像にくっきりした影をつけるには?一括編
文字にくっきりした影をつけるには?
画像にぼんやりした影をつけるには?
・画像にぼんやりした影をつけるには?一括編
文字にぼんやりした影をつけるには?


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

http://rgrg.blog61.fc2.com/tb.php/109-d60190aa   

Template Designed by DW99