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

モード変更

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

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

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

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

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

アルファチャンネル付き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!」 としているので、画像を差し替えて利用しているユーザーさんも多く見られますが、恐らく最初につまづく部分が ここではないでしょうか。。。

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

半透明PNG (背景に使えそうなもの) を配布しているサイト

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

半透明PNG を簡単に作れるフリーソフト

シンプルPNGデータ作成 EZPNG.EXE』 (フリーソフト)

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

  1. ソフトを起動させ、「読み込み」 で元画像を選択する
  2. 「透過率を指定」 をチェックし、透過率何% にするかを設定する
  3. 「>PNG」 というボタンを押せば完成です!

[ 関連記事 : テンプレート(CSS内) 背景画像を抽出 ]
[ 関連記事 : 自作Webカラーチャート ColorChart349 ]

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

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

スポンサーリンク

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

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

2010/04/02 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-0 Comment

コメントを投稿する 記事: アルファチャンネル付きPNG を 文字背景に


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

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