第29回：半透明フィルター（CSS）を使わずに、画像を半透明っぽくみせてみよう
1つ前の記事 「カスタマイズ・サンプルNo.2」の.entry部分に使っているワザです。
「カスタマイズ・サンプルNo.2」の記事にも書いたように、写真の上にそのまま文字を載せると読みにくくなる可能性が高かったので使ってみました。
■サンプルはこちらでご確認下さい。→画像を使った半透明フィルターサンプル
元々「filter: alpha(***);」という画像を半透明にするCSSが存在するのは知っていたのでこれを使ってみようかと思ったのですが、調べてみたところ
- IE（Internet Exploror）にしか使えない
- 画像を半透明にするだけでなくその上に載せた文字も半透明化されてしまう
- 使用する画像全体に対して指定しなければならず、私が希望している「エントリー部分だけ」 といった部分的な使い方が出来ない
といった事実が判明したため希望通りにはならないと判断し別の方法を取ることにしました。
（確かに「IE問題」（？）以外は、「そりゃそうだよね～」な内容ではあるのですが^^;）
で、辿りついたのが「半透明に見える画像を作って、エントリー部分の背景画像として敷き詰める」という方法です。
簡単にいうと「白と透過色」の細かいチェック柄の壁紙画像を作成して、それを使って見える部分と見えない部分を作っているわけです。
ヒントをいただいたのは「FC2」でテンプレートの制作、配布をされている「e-moon's blog」様です。
ありがとうございました。
前置きが長くなりましたがいよいよ処理方法です。
今回はなんと画像を作るところから始めるので、更に長くなると思います（笑）
では、どうぞ。
【'06/09/13追記】
同様の画像をダウンロード出来るサイトを発見しました。
■「Free Wall Paper」様
「トップページ」→「素材」→「使い方」→「半透明の背景」
※ご利用の際は提供サイトの規約を遵守して下さいね。
＜お詫び＞
Macで参照して下さっている方には申し訳ないのですが、私のPC環境はWindowsなので以下の方法（使用するソフトなど）は全てWindowsで作業する場合を前提にしています。
私にMacについての知識がないので悪しからずご了承下さい。
※ただ、（多少手間は掛かりますが）簡単な作業ですので「ペイントソフト」と「画像レタッチソフト」があればMacでも再現可能なはずです。
事前準備1：画像ソフトで2色のチェック柄画像を作成する
- 「ペイント」を起動する。
※通常「スタート」→「すべてのプログラム」→「アクセサリ」の中に入っています。 - 「変形」→「キャンバスの色とサイズ」を選択し、 表示された画面で「幅」と 「高さ」をそれぞれ「100」に変更し「OK」 ボタンを押す。
※単位は「ピクセル」です。 - 「表示」→「拡大」→「拡大率の指定」を選択し、 表示された画面で「拡大率」を 「600％」または「800％」を選択し「OK」 ボタンを押す。
※自分が作業しやすい大きさになれば拡大率はいくつでもOKです。 - 「表示」→「拡大」→「グリッドの表示」 を選択する。
※キャンバス上にグレーの縦横罫線が引かれていればOK。 - 「カラーボックス」で「黒」を選択する。
- 「ツールボックス」で「鉛筆ツール」を選択する。
- キャンバス上にカーソルを持っていくと鉛筆の形状になっているので、 その鉛筆の先で表示されているマス目を一つおきにクリックし 「市松模様」 を作っていく。
※場所を打ち間違えた場合は「編集」→「元に戻す」 で間違える前の状態に戻れます。 - ある程度の範囲が打てたらその範囲をコピー→貼り付けして模様の範囲を拡大していく。
※「選択ツール」を使って、範囲選択→その範囲の上で右クリックして 「コピー」 を選択→同様に右クリックで「貼り付け」を選択。
※画像がグレーの線で囲まれた状態になっていると思うので、 それをそのままドラッグ （左クリックしたまま引っ張る）して模様を合わせる。
※この際に上下左右の端に模様がない部分が出来るのは問題ありませんが、 格子模様の途中 （内部）で模様がずれることがないように注意してください。 - ほぼ全面に模様が描けたら、利用する部分を範囲選択する。
※「選択」ツールを使って白く残っている部分が入らないように画像を選択する。
※画像の大きさは50×50（px）～70×70（px） くらいあれば大丈夫なので、 全面を埋める必要はありません。
※大きさは縦横が偶数の正方形にして下さい。
※画像の大きさは、画面下のステータスバー（下図の赤枠で囲んだ部分です） に表示されるのでカーソルを少しずつ動かして確認して下さい。
- 選択した画像をコピーする。
※範囲選択した部分の上にカーソルを置いて右クリック→「コピー」する。 - 「ファイル」→「新規」を選択。
※「無題への変更を保存しますか」（無題＝現在表示されている元の画像です）とメッセージが出るので、不安だったら「はい」 をクリックして、名前を付けて保存して置いてください。
特に問題がなければ「いいえ」でもOKです。 - 一番最初の状態に戻るので、「編集」→「貼り付け」でコピーした画像を貼り付ける。
※一見灰色に見える小さい四角が貼り付けばOKです。 - 周囲の余白を削除する。
※もう一度「変形」→「キャンバスの色とサイズ」を選択し、「幅」と 「高さ」 をそれぞれ今度は9.でコピーした画像と同じ大きさに変更し 「OK」ボタンを押す。
- 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
※ファイル名は半角英数で付けてください。
※「ファイルの種類」は「24 ビット ビットマップ （*.bmp;*.dip）」 でOKです。
事前準備2：画像を透過する
- 「Microsoft Photo Editor」を起動する。
※通常は「スタート」→「すべてのプログラム」→「Microsoft Office ツール」あたりに入っています。
※Office2003以降のバージョンをお使いの場合、「Microsoft Photo Editor」は付属していないようです。
その場合の対応を「Point」に記載しましたので読んでみて下さい。 - 「ファイル」→「開く」で上記（14.）で保存した画像を開く。
- 「ズームボックス」を「800％」に変更する。
- 「透明色に変更」ボタン（または「ツール」→「透明色に変更」）をクリックする。
- カーソルの形が変わるので、そのカーソルの先に付いている黒い▼の先の部分で、「黒」の四角（どこでもOK） を一つクリックする。
- 「透過色に変更」画面が出てくるので、画面の窓に表示されている色が「黒」になっていて、「透過性」が100％ であることを確認して「OK」ボタンを押す。
※「OK」を押したあと、画面全体が白とグレーの模様になればOK。
- 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
※ファイル名は半角英数で付けてください。
※「ファイルの種類」は「GIF形式（*.gif）」 を選択してください。
以上で画像の作成は完了です。
ファイルをココログにアップロードする
上記で作成した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1： ファイルのアップロード』
を参照して下さい。
【CSSを編集する】
基本的に、通常の背景用画像と同様の取り扱いでOKです。
例えば「エントリー部分」へ適用する場合は、「body」に背景画像を設定した上で
■第27回： 個々の記事（エントリー）表示欄に背景画像を設定してみよう
の「敷き詰め」を説明した方法で「エントリー部分」だけに半透明（透過）画像を背景として設定します。
他にもいろいろな部分で利用できると思いますので、工夫してみて下さい。
- Office2003以降では「Microsoft Photo Editor」ではなく、 「Picture Manager」 というソフトが付属しているようですが、残念ながらこのソフトでは透過処理は出来ないようです。
■参考：Microsoft Office アシスタント「画像を透過するには」
Office2003以降のバージョンをお使いの方は各自透過の出来るソフトが別途必要になります。
その個々のソフトでの取り扱いについてはここでは説明出来ませんので悪しからずご了承下さい。
※フリーソフトを使うのに抵抗がないということでしたら、個人的には「JTrim」という画像処理ソフトが使いやすくてオススメです。 （但し、導入は自己責任でお願いいたします）
■「WoodyBells」 様内「JTrim」 - 「市松模様」がずれないように注意してください。
細かい作業ですが途中からコピー＆ペーストを駆使すればそんなに時間も掛からず出来上がると思うので、 時間に余裕があるときにでも試してみて下さい。 - また、今回はWindows付属の「ペイント」と「Microsoft Photo Editor」を使用しましたが、 これ以外でも基本的なペイントソフトや画像レタッチソフトなら同様のものが容易に作れると思いますので使い慣れているものを使って下さい。
- 今回は「白×透過」の画像にしましたが、白の部分を薄目のピンクや黄色、ブルーなどにしてもきれいかもしれません。
デザインに合わせて工夫してみて下さい。 - 黒の背景画像に対して透過画像を作る場合は、上記とは逆に「白の部分を透過」した画像を作成してください。
■「e-moon's blog」 様
■ 「超初心者の手取り足取りホームページ教室」様
■「Free Wall Paper」様
■素材サイト 「PRISM」様＜記事内のボタン素材＞
| 固定リンク | コメント (9) | トラックバック (2)
最近のコメント