抜ける画像の作り方

抜ける画像の作り方です。今回はこの画像をサンプルにします。
これを加工してこんな感じにします。この程度の加工に画像編集ソフトは不要です。

スポンサーリンク


画像を半透明にする方法、すける画像の作り方です。今回はこの画像をサンプルにします。

【即日発送】エレガントモーメント/ペアでパイロット&スチュワーデスなりきりコスチューム/ランジェリーセット 在庫限り最終処分セール EM7790

presented by amazon


これを加工してこんな感じにします。この程度の加工に画像編集ソフトは不要です。

上の画像の実現方法

まず、背景を用意します

この上に、次のように半透明になったスケスケ画像を載せます

完成

ソースコード

<style type="text/css">
p.sample{
	opacity:0.5;
	filter:alpha(opacity=50); /* InternetExplorer用 */
	margin:0;
	padding:0;
}
</style>

<table style="margin:0;width:380px;border:none">
<tr>
<td style="border:0">
<div style="background:#f00;width:177px;height:250px;padding:0">
<p class="sample"><img border="0" src="URL" width="177" height="250" /></p>
</div>
</td>
<td style="border:0">
<div style="background:#00f;width:177px;height:250px;padding:0">
<p class="sample"><img border="0" src="URL" width="177" height="250" /></p>
</div>
</td>
</tr>
</table>

以前「で、スタイルシートはどこに書くのか?」というエントリーでスタイルシートを書ける場所は3カ所と書きましたが、実はbodyタグの中にも書けます。

bodyタグの中に書く場合も、最初と最後を<style type=”text/css”></style>で囲みます。

opacityというのが、透過を指示するスタイルで、0だと完全な透明、1だと完全に見えている状態。その間で透過度を出します。上の例では50パーセントの見え具合で50パーセント透けている状態です。

ただし、InternetExplorerはopacityに対応していません。その代わり、filterという機能でopacityと同じことができます。その場合は0から100までの数値で指定します。0だと完全な透明、100だと完全に見えている状態です。

空タグを気にしないなら、画像を100%で背景にして、その上に半透過の色を乗せた方がキレイかもしれません。

ただし、背景画像として使う場合は画像のサイズを変更できません。
今回の画像は、実際には横幅1060ピクセル、高さ1500ピクセルあるのを縮小して使っているので背景にせず、透かして使いました。

試していませんが、画像を透過せず背景として使い、透過した色を載せる場合は下のようなコードになります。

<style type="text/css">
div.background{
	background:url('画像のURL');
	width:177px;
	height:250px;
	padding:0
}

p.sample{
	opacity:0.5;
	filter:alpha(opacity=50); /* InternetExplorer用 */
	width:100%;
	height:100%;
}
</style>

<table style="margin:0;width:380px;border:none">
<tr>
<td style="border:0">
<div class="background">
<div class="sample" style="color:#f00;"></div>
</div>
</td>
<td style="border:0">
<div class="background">
<div class="sample" style="color:#00f;"></div>
</div>
</td>
</tr>
</table>

上のコードは、見ての通り空っぽです。画像が背景のdivタグの中に、色が背景のdivタグが入っているだけです。恐らく、これで100パーセント不透過の画像に色がかかったものが表示されますが、HTML的には全く中身のないものなので、GoogleやYahoo!には嫌われるでしょう。
あとは状況に応じて使ってください。

おまけ

こういう画像が背景のところに文章を書くと非常に見づらいです。
そんな時は背景を変えるのが、いちばんいいのですが、それでも使いたい場合の対処法です。このように半透明の色をつければすこし見やすくなります。

でも、まだ見づらいので文字を太くしてみました。

ただし、この方法には致命的な欠陥があります。実は今見ている、この文字も薄くなっているのです。

文字が透けずに、背景の色だけ透かすには、本当に透けている色のついた画像を用意する必要があります。

それについては今回は扱いません。以上、「透ける画像」でした。

この画像は「みかんの部屋」から借りてきました


関連コンテンツ

スポンサーリンク

「抜ける画像の作り方」への7件のフィードバック

  1. こんばんわ。
    どこにみかんの画像があるのか、探しちゃいました~
    使用はもちろん 全然OKですよ。

    花の絵などを背景にして 記事を書くとお洒落ですね。またチャレンジしたいと思います。

    ヘッダーの画像と字の色には いつも悩んでいる事の一つです。
    字の位置と 字の色が上手く良い場所になるように 考えいます。
    TOMさんなら 自由に色々な事が出来て うらやましいわ。
    実は TOPのヘッダーは全体にリンクが出来るように出来ましたが、
    他の記事では まだ出来ないの・・(;_;)
    説明してくださった方もいるのですが、理解が出来なくて・・
    他のページもヘッダー全体にリンクが出来るようになれば 画像にみかんの部屋と大きく書けるから 字の場所とか色に悩まなくて済むのですが・・

  2. こんばんわ。
    説明が下手ですみませんm(__)m

    そうです ヘッダー全体ににTOPに行くように リンクしたかったのです。
     TOMさんの書いていたとおりにできましたが、
    スタイルシートは 以前 他の方に教えていただいて もう修正してあるので TOPだけは 画像全部にリンクができています。
    TOMさんのソースを加えると 画像のレイアウトが崩れてしまうので いじらなでおきました。

    1記事は タグを追加して 出来ました\(^o^)/
    ありがとうございました。

    凄く ずうずうしいのですが、・・マウスのかたちが 手のかたちに 出来ないのでしょうか?・・m(__)m

  3. ヘッダーの画面全部に 手の形にならないのですが・・??

    スタイルシートには 

    /* ロゴ設定 */
    .logo {
    background:transparent url(‘http://fanblogs.jp/mikannoheya/file/515/Q0c3MTAyVfo.png’) no-repeat scroll 0 0;
    display:block;
    height:185px;
    left: -108px;
    overflow: hidden;
    position: relative;
    text-indent:-9999px;
    top:-65px;
    width:914px;
    }

    が入っているので みかんの部屋と字が見えなくなり、

    ヘッダーの画像全体にTOPにリンクが貼られています。

    1記事やプロフィールもこれをやりたいのです。

  4. だから、書いて送ったとおりの場所に
    cursor:pointer;
    を入れろといっています。

    今確認しましたが、みかんさんはそれを入れてないですよね。

    意味分かってやってます?

    こちらは、確実に動くのをテストしてソースを送っているのに
    その通りに書き込まず、できないといわれても、対処できません。

  5. 出来ました・・

    最初ためした時にロゴとヘッダーの背景の絵がずれていたように 見えたので 意味がわからず
    スタイルシートには 入れていませんでした・・

    まだ 出来ていませんが、いずれは タイトルも自分の字を入れた ロゴを作りたいと思っていたので、すべての記事やプロフィールにも 全体にリンクが出来るようにしたいと 思っていました。

    お忙しい所 お手数かけました・・m(__)m

  6. ロゴができたらタイトル文字はいらなくなると思いますが、その時は

    <h1 id=”blogTitle” style=”display:none”><a href=”http://fanblogs.jp/mikannoheya/”>みかんの部屋</a></h1>
    <div id=”blogDesc” style=”display:none”>オートシェイプ・JTrimで写真加工をして遊んでいます。また、家に咲く花・ちょっとしたお勧めを紹介しています。</div>

    で消えます。
    ただ、状況が分からないので、ロゴに差し替える時また聞いてください。

Tom へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください