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

このページの記事目次 （タグ: 半透明 の検索結果 1 件）

  

アルファチャンネル付きPNG を 文字背景に

2010/04/02 (金)  カテゴリー： ブログカスタマイズ上級

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

半透明PNG （透過率を指定したアルファチャンネル付きPNG） ，ブラウザによる見え方の違い
クリックで画像を拡大します　[ 実際のWebページはこちら ]

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

  • 文字色だけでどうにかしようとすると難しいケースもありますよね。。。
    アルファチャンネル付きPNG を 文字背景に 【 ありのごとくあつまりて 】

  • kfind.png　Designer: Sergio Sánchez López単純な設定の場合 ： 50%の単色画像使用（透過率50%）
    単純な設定の場合 ： 75%の単色画像使用（透過率25%）
    IE6 では元の画像の状態で表示されます。

  • 画像は単色でなくてもOKです。 50%の画像使用

  • IE6用 に半透明に見せかけた透過GIFや透過PNGを使う方法も

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

共有テンプレートのヘッダー部分の構造
クリックで画像を拡大します

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

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

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

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-122.html

2010/04/02 ～ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
申し訳ありません。　お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。