ブログ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: gray();"を記入すると白黒にする事ができます。

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

つまり上の白黒画像を例にすると、

<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/200.jpg" target="_blank"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/200.jpg" alt="ひまわり" width="250" height="166" border="0" STYLE="filter: gray();"></a><br clear="all">

と記入しています。

ブログの中の全ての画像を白黒にしたい人はこちら

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

これだけで全ての画像が白黒になります。

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

まずテンプレートの設定から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: gray();}
を記入します。(class=なら「.」を使って、id=なら「#」を使います。)

僕の場合なら、
.entry_body img{filter: gray();}になります。

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

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

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

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

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

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

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

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

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

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

例えば名前を「sirokuro」にしたら、
.sirokuro img{filter: gray();} と指定して
白黒にしたい画像を使う時に、
<div class="sirokuro">~~~</div>
とします。

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

◇他にもフリーソフトを使ってあらかじめ画像を白黒にした画像を使うという方法もあります。


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

http://rgrg.blog61.fc2.com/tb.php/370-fd2375a2   

Template Designed by DW99