MB-Support

パソコン初心者のサポートページ

ビジュアル オブジェクトを不透明にする Filter Alpha

 画像やブロックレベル範囲を半透明にするフィルターは、Internet Explorer で有効な機能です。それ以外のブラウザでは半透明にならず、通常表示されます。互換性が無い機能なので、利用を奨めるのも難しいですが、何といってもデザインがカッコよくなる機能です。背景画像を使ったページで、画像を無駄にせずに表示したいのであれば、十分利用する価値はあるでしょう。


MSN サービスの 1 つである無料のブログスペース「 MSN スペース」が、Windows Live の影響で外観が新しくなる模様 ( 現、Windows Live Space ) 。

スタッフブログ では小さいながらも変更後の画像が閲覧可能なっています。現行の MSN スペースで前から気になっていたのが、ブログのメニューや投稿したコメント、投稿した画像までも透けて表示される事です。

何でもかんでも透けていれば良いというわけではなく、例えば管理人のお気に入りの背景画像は、MSN スペースの「 ダヴィンチ 」です。 これを背景画像に設定しても、コメントやブログメニューが、ほとんどのスペースを占めるので、背景画像が見えるのはこれらのコンテンツの隙間や、空いてるスペースだけになります。

これでは、せっかくお気に入りの背景画像を選択しても意味がありませんね。 それを上手くカバーするのが、メニューやエントリーの表示部分を半透明にしてしまう方法です。


パラメータ 役割
opacity 不透明度。デフォルト値は0で透明。100は不透明。
finishopacity オプション) 0(透明)から100(不透明)までの値。
style 不透明度の形。0(一定)、1(直線形)、2(放射線)、3(矩形)の値を指定する。
startX 不透明度を開始するX座標。
startY 不透明度を開始するY座標。
finishX 不透明度を終了するX座標。
finishY 不透明度を終了するY座標。

パラメータを指定する事で複数の描写が可能ですが、半透明にするために使うのは opacity です。 例えば、背景画像ピンクの格子に、通常通り画像を組み合わせた場合が以下になります。



イメージタグ 内に

style="Filter: Alpha(Opacity=0〜100までの数字);"

を追加した場合。


( Internet Explorer で確認可能です。Mozilla Firefox では透明になりません。)

単純に画像の濃さが変化するのでは無く、イメージが透明になり、背景画像が透けて見えます。これならば、背景画像を無駄にする事なく、ホームページをデザインできますね。 上の例ではイメージタグにフィルターを適用しています。これだけでもカッコイイのですが、ブログや掲示板で利用する場合はブロックレベルの <div> に埋め込む事で、エントリーそのものが透明になります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <div align="center">
  <table width="70%">
   <td style="Filter: Alpha(Opacity=70);background-color:#ffffff;
   margin-bottom:20px;border:1px solid #ff69b4;padding:20px;line-height:30px;">
    <p>Alphaテスト - <span style="font-size:9pt;">
     投稿者 ホームズ / 2006年7月24日(Mon) 16:15:13</span></p>
    <p style="float:right;">
     <img src="画像のアドレス" alt="MB-Support logo"
     border="0" width="100" height="104" />
    </p>
    <p class="in">
    1つのエントリーを表示する部分を div で囲み、Filter: Alpha を挿入すると、
    divで囲まれた部分が全て透明になります。
    </p>
    <br style="clear:right" />
   </td>
  </table>
 </div>
</body>
</html>

ブラウザ


エントリーを囲む div に、白い背景色を指定する事で、エントリー全てが透明化されていますね。 画像にカーソルを載せると、元の濃さに戻ります。div で Filter: Alpha を指定できるため、ブログなどではエントリーだけで無くメニューにも外部スタイルシートで適用できます。

このページに掲載した内用は、IE でしか通用しないみたいです。 IE 、Firefox 、Safari 、Google Chrome で動作する方法は以下。

Firefox & IE 両対応 ビジュアル オブジェクトを透明にする




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項