アルファチャンネル付きPNG を文字背景に【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

この記事に含まれるタグ（Keyword） :
画像半透明

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

--/--/-- ～ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

スタイルシートで文字部分に「背景色」や「背景画像」を入れることはありますよね。今回は、半透明 を表現できる アルファチャンネル付きPNG （αPNG，半透明PNG）を背景画像に使う方法，及び配布サイト，自分で作る方法などを紹介します。

アルファチャンネル付きPNG は、IE7以上のブラウザ（Firefox，Opera，Google Chrome，Safari などを含む）では、完全にサポートされています。 IE6 では、サポートされていない形式なので、そのままでは透過率を指定する前の「元の画像の状態」で表示されることになります。

IE6 にも対応するように設定することも可能らしいのですが... ここでは上手くできませんでした。。。（IE6、今は IETester で確認しているだけなので、詳細は不明です。）
[ 参考： CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする， CSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット ]

共有テンプレート ari_seoシリーズでは、「画像の変更などもOK！」としているので、画像を差し替えて利用しているユーザーさんも多く見られますが、恐らく最初につまづく部分がここではないでしょうか。。。

ヘッダーに入れる画像によっては、リンク背景（読めなくならないようにデフォルトで白色を設定しています）が目立ち過ぎてちょっと格好悪くなってしまう場合も。そんな時にも有効に使える（かもしれない）方法です。

背景壁紙：シンプル半透明【ちゃきん。無料HP素材の小箱】
シンプルな単色の半透明PNG 素材が透過率75% 透過率50% 透過率25% 透過率10% と用意されているので、文字背景用などに使うものはここで揃うのではないでしょうか。また、擬似半透明背景素材（透過GIF）もあるので、IE6用の設定にも。。。

透過率を指定した半透明PNG って意外と簡単に作れちゃいました！背景素材（加工OKのもの）などさえ用意すればボタン操作だけでも作れちゃうんですね♪　
XP Me 2000 98 などに対応。（私はVistaで使用）

[ The portfolio of Bryan Katzel | Design, illustration & stuff to make you smile ]
おまけ：アルファチャンネル付きPNG と htmlを極めるとこんなカッコイイサイトが．．．一見の価値あり！！無意味にスクロールしてみたくなる海外のサイトです。

キーワード検索：画像半透明