« カスタマイズ・サンプル<No.2:Fly Away…> | トップページ | 第30回:文字(フォント)の設定を変えてみよう »

2006/05/14

第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色のチェック柄画像を作成する

  1. 「ペイント」を起動する。
    ※通常「スタート」→「すべてのプログラム」→「アクセサリ」の中に入っています。
  2. 「変形」→「キャンバスの色とサイズ」を選択し、 表示された画面で「幅」と 「高さ」をそれぞれ「100」に変更し「OK」 ボタンを押す。
    ※単位は「ピクセル」です。
  3. 「表示」→「拡大」→「拡大率の指定」を選択し、 表示された画面で「拡大率」を 「600%」または「800%」を選択し「OK」 ボタンを押す。
    ※自分が作業しやすい大きさになれば拡大率はいくつでもOKです。
  4. 「表示」→「拡大」→「グリッドの表示」 を選択する。
    ※キャンバス上にグレーの縦横罫線が引かれていればOK。
  5. 「カラーボックス」で「黒」を選択する。
  6. 「ツールボックス」で「鉛筆ツール」を選択する。
  7. キャンバス上にカーソルを持っていくと鉛筆の形状になっているので、 その鉛筆の先で表示されているマス目を一つおきにクリックし 「市松模様」 を作っていく。

    touka1

    ※場所を打ち間違えた場合は「編集」→「元に戻す」 で間違える前の状態に戻れます
  8. ある程度の範囲が打てたらその範囲をコピー→貼り付けして模様の範囲を拡大していく。

    touka2

    「選択ツール」を使って、範囲選択→その範囲の上で右クリックして 「コピー」 を選択→同様に右クリックで「貼り付け」を選択
    画像がグレーの線で囲まれた状態になっていると思うので、 それをそのままドラッグ (左クリックしたまま引っ張る)して模様を合わせる
    ※この際に上下左右の端に模様がない部分が出来るのは問題ありませんが、 格子模様の途中 (内部)で模様がずれることがないように注意してください
  9. ほぼ全面に模様が描けたら、利用する部分を範囲選択する。
    ※「選択」ツールを使って白く残っている部分が入らないように画像を選択する。
    画像の大きさは50×50(px)~70×70(px) くらいあれば大丈夫なので、 全面を埋める必要はありません。
    ※大きさは縦横が偶数の正方形にして下さい。
    画像の大きさは、画面下のステータスバー(下図の赤枠で囲んだ部分です) に表示されるのでカーソルを少しずつ動かして確認して下さい

    touka3
  10. 選択した画像をコピーする。
    ※範囲選択した部分の上にカーソルを置いて右クリック→「コピー」する。
  11. 「ファイル」→「新規」を選択。
    ※「無題への変更を保存しますか」(無題=現在表示されている元の画像です)とメッセージが出るので、不安だったら「はい」 をクリックして、名前を付けて保存して置いてください。
    特に問題がなければ「いいえ」でもOKです。
  12. 一番最初の状態に戻るので、「編集」→「貼り付け」でコピーした画像を貼り付ける。
    ※一見灰色に見える小さい四角が貼り付けばOKです。
  13. 周囲の余白を削除する。
    ※もう一度「変形」→「キャンバスの色とサイズ」を選択し、「幅」と 「高さ」 をそれぞれ今度は9.でコピーした画像と同じ大きさに変更し 「OK」ボタンを押す。

    touka4
  14. 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
    ファイル名は半角英数で付けてください
    「ファイルの種類」は「24 ビット ビットマップ (*.bmp;*.dip)」 でOKです

事前準備2:画像を透過する

  1. 「Microsoft Photo Editor」を起動する。
    ※通常は「スタート」→「すべてのプログラム」→「Microsoft Office ツール」あたりに入っています。
    ※Office2003以降のバージョンをお使いの場合、「Microsoft Photo Editor」は付属していないようです。
    その場合の対応を「Point」に記載しましたので読んでみて下さい。
  2. 「ファイル」→「開く」で上記(14.)で保存した画像を開く。
  3. 「ズームボックス」を「800%」に変更する。

    touka5
  4. 「透明色に変更」ボタン(または「ツール」→「透明色に変更」)をクリックする。

    touka6
  5. カーソルの形が変わるので、そのカーソルの先に付いている黒い▼の先の部分で、「黒」の四角(どこでもOK) を一つクリックする。
  6. 「透過色に変更」画面が出てくるので、画面の窓に表示されている色が「黒」になっていて、「透過性」が100% であることを確認して「OK」ボタンを押す。

    touka7

    ※「OK」を押したあと、画面全体が白とグレーの模様になればOK。

    touka8
  7. 「ファイル」→「名前を付けて保存」で分かり易い場所に保存する。
    ※ファイル名は半角英数で付けてください。
    「ファイルの種類」は「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」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« カスタマイズ・サンプル<No.2:Fly Away…> | トップページ | 第30回:文字(フォント)の設定を変えてみよう »

カスタマイズ」カテゴリの記事

エントリー部分」カテゴリの記事

画像処理」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

takoさんこんにちわ。このBlogは非常に参考になってここを見ながら自分のBlogもカスタム出来ました。有難うございます。
今回の記事は特にNOIONさんのサイトで見つけた素敵な写真を背景に使う際に凄く役にたちました。
ただ、現在メインで使ってるノートのOfficeが2003でいきなりつまりました( ̄Д ̄;)気を取り直してPicture Managerを起動してみると(僕も初めて使ってみました)何処をさわっても”透過処理”がありません~~諦めようとした時に、以前メインで使っていた自作ディスクトップにずいぶん前にバルクのOfficeを入れたのを思い出して起動すると2000だったのでラッキーと思ったのもつかの間、Microsoft Photo Editorはインストールされてませんでした。慌てて部屋中を探しまくってようやくインストールディスクを探し出して無事インストール。以降は記事どうりに作業ができて半透明マスクが完成しました。道具さえそろえば手間はかかりますが作業自体は難しくありませんね。ただ最近のPCのプリインストOfficeは2003なので困る人も多いでしょうね。
使ってみるとばっちりで感激しました。こういう方法を考え出したtakoさんに頭がさがります。これからも色々勉強させていただきますね。
一応カスタマイズがある程度納得できる形になりましたので記事をかきました。代表してこの記事にトラックバックさせていただきます。

投稿: hibiki | 2006/05/17 17:00

■hibikiさん
コメントとTBありがとうございました。
(記事での紹介もとても丁寧で嬉しかったです!)

壁紙の「雪ウサギ」の赤い目が記事の合間合間にチラチラ見えるのが可愛いデザインですね(^^)
1週間であそこまでカスタマイズしたんですか?
まあ、確かに始めるとハマってしまいますからね~^^;
お気持ちは判ります。
でも、普段の生活や健康に支障の出ない程度に楽しんで下さいね。

「Picture Manager」の件、情報ありがとうございました。
先ほど検索したところ、Microsoftの公式ヘルプにもその記述がありました…ガ~ン(T"T)
私は「Microsoft Photo Editor」よりも後のバージョンだし、透過くらい画像ソフトだったら普通に出来て当たり前と思いこんでいたのですが…確認不足でした。失礼しました。
そうなると、2003以降のバージョンを使っている方はご自分で何か準備していただくことになるわけですが…それは利用される方の判断に任せるしかない問題ですから仕方ないですね。
取り急ぎ、「Picture Manager」では透過は出来ない旨の記述を書き加えたいと思います。

最後に、掲示板の方に頂いたご質問の件ですが、このコメント欄の横の文字は「折り畳み」でお世話になったfacetさん作のスクリプトで実現しております。
該当の記事のurlを張っておきますね。
http://facet.cocolog-nifty.com/divers/2004/11/post_12.html
設置については記事中のスクリプトをコピーして、文章を適当に書き直して(そのままでもOKですが)メモリストに貼り付けてサイドバーに置くだけです。(確か^^;)
詳しくはfacetさんの記事にてご確認下さいませ。

では、今後ともご贔屓に宜しくお願いいたします(^^)

投稿: tako→hibikiさん | 2006/05/17 22:13

takoさんへ~素早いResありがとうございます。早速facetさんとこに行ってきました。
おかげさまで無事表示できるようになりました。
ついでに”折りたたみ”も実装してしまいました。
ある程度納得いく感じにできましたが、ボタンとして使ってるウサギ画像に
ボタン枠がついちゃうのだけが不満です~
ではこれからも宜しくいお願いします。
僕も記事を頑張って充実させますね(≧∇≦)/

投稿: hibiki⇒takoさん | 2006/05/18 00:05

takoさんこんばんは(^-^)ゝ
最近、、黒色背景(花火なんですが)を見つけたのですが、黒とオレンジなので、文字色を白にすると見える部分と見えない(見えにくい)部分が出てくるので、こちらの技を頂こうと頑張りました。。
が・・
私のPCにはこのソフトがインストールされていないので、takoさんが紹介されていたフリーソフトを使わせてもらいました。けど、これだとなんだか粗くなる(??)というか透明度がたらないというのか、うまく説明出来ませんが見ずらい感じになってしまいました。。
黒の市松模様がいけないのかと思ってブルーとかグレーも作ってみたんですが結果は同じ・・(>▽<)
>透過性が100%・・
という設定がないからなんでしょうか??
黒背景がダメなのかと思い違う背景でも試してみましたがやっぱり同じ状態でした(T-T)

出来なかったのにコメントしてしまってすみません。。
一人で出来ないな~と思ってるよりここで聞いてみたらまた何か違った答えが出るかも。。なんて(^0^ゞ

投稿: sacchi | 2006/05/24 22:33

■sacchiさん
こんにちは。

黒の透過背景、上手く出来ませんか?
「JTrim」を使ったんですよね?
念のため確認です。

1.ペイントでの元画像の作り方は、上記で書いた通りでOKですが黒画像に適用する場合は「白」の方を透過することになりますが(黒を残すわけですね)これは大丈夫ですか?

2.「JTrim」ではツールバーの「スポイトマーク」の「透過色設定」(または「イメージ」→「透過色設定」)で処理しましたか?

3.透過した後の画像は「gif」で保存しましたか?

私も試しに「JTrim」を使って自分で作ってみたのですが、このくらいのレベルにはなる感じですが…。↓

http://tea-for-me.cocolog-nifty.com/touka_kuro_test.jpg

※上記の画像はjpgで保存したのですが、透過画像を重ねた部分の花の色が実際よりも随分退色してしまいました。
実際のページはもっと赤がクッキリ出ています。

投稿: tako→sacchiさん | 2006/05/24 23:50

takoさん、こんにちはo(*^O^*)O
早速お返事いただきありがとうごさいました。。
>黒画像に適用する場合は「白」の方を透過することに・・・
ここでした(>▽<)
で、もう一度作り直して見たところ出来ました!!
まだ花火は早いと思ったのですが出来たらすぐに公開したくなって記事にしました。。
いつも丁寧に答えていただいて感謝です!!ありがとうございました。

投稿: sacchi | 2006/05/25 13:35

■sacchiさん
こんにちは。コメントありがとうございます。

成功したようですね♪アドバイスが当たっていて良かったです。

記事にも書いていらっしゃいましたが、「黒は難しい」ですよね。
私も「カッコイイなあ」とは思うのですが、その分どうやったら効果的に、しかも見やすくデザイン出来るのか迷うことが多くて未だに実際に使ったことはありません。
でもsacchiさんのように果敢にチャレンジしていくことで判ってくることも多いと思うので、これからも色んなアイディアに挑戦してみて下さいね。

投稿: tako→sacchiさん | 2006/05/26 10:21

takoさん、はじめまして。検索を重ねて、こちらにたどりつきました。

フィルター制作方法、教えてくださってありがとうございます!
早速参考にさせていただきました。
とても分かりやすくご紹介いただいたので、間違える事なく出来てほんとに大感謝です!


暑い日が続きますが、お身体どうかご自愛下さいね。
これからもカスタマイズ頑張って下さい♪

投稿: | 2006/07/29 23:18

■夕さん
こんにちは。コメントありがとうございます。

ここはココログ用にカスタマイズ方法を書いているのですが、それを飛び出して他のブログにも応用していただけたのは本当に嬉しいです。
ご報告ありがとうございました(^^)

夕さんもこれからも楽しんでブログ&カスタマイズ続けて下さいね。

投稿: tako→夕さん | 2006/07/30 12:35

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1795903

この記事へのトラックバック一覧です: 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう:

» このBlogのデザインは~ [明日なる夢]
このBlogを始めて丁度一週間になるんですが、最初はココログの既成のテンプレートを使って その範囲のなか [続きを読む]

受信: 2006/05/17 17:19

» 背景画像の記事部分にのみフィルターをかける方法 [夕rself]
filter: の文字をどこに設定しても上手く行かない。 記事本文の文字の上にフィルターが掛かっちゃうんですよね。 と言う事で、先人の知恵をお借りしようとほぼ一日探していました。 世の中にはこんなにblogが溢れているのだから、中にはフィルターの使い方を書いてくださ..... [続きを読む]

受信: 2006/07/29 23:05

« カスタマイズ・サンプル<No.2:Fly Away…> | トップページ | 第30回:文字(フォント)の設定を変えてみよう »