HOME 　»　 , , , 　»　cssの設定で自動的に画像に影を付ける

cssの設定で自動的に画像に影を付ける

2005/07/11　|　Comments & Trackbacks : 6

もう一つのトップの候補写真に影を付けてみました。こっちも使ってみたかったのです(泣)。

先日、かづ＠LeapK.comさんのこちらの記事で「わくわくデジカメ」と言うツールを教えて頂きました。

このソフトは私みたいなバカにも楽勝で使えるナイスツールで、準備した画像をドラッグするだけで影付き画像ができあがる優れものなのですが、この素晴らしいソフトにも欠点がございまして。
画像サイズの設定が5段階しか選べないのと、恐らく画像サイズを強制的に16：9（もしくは9：16）に変換する機能がついていると思われ、例えば真四角の画像なんかだと妙に縦長に変換されちゃったりするんですよね。
さらに、手動で影を付ける形だと、モブログ写真には影がつかない、と言うのも気になっていまして。
そこで、いろんな大きさや形の画像に対応させるべく、スタイルシートで影がついているように見せる方法を試してみました。

参考記事

画像に自動的に影をつけてテキストを回り込ませる by POCHIKING*

いろいろテストしてみたのですが、なぜかうちのサイトでは元サイトさんの設定の丸パクでは正常に表示できなかったので、どうにか見るに堪えるようにアレンジ（と言うか簡略化）してあります。
元サイトさんの記事の方が丁寧、かつ表示のバリエーションが豊富なので、こだわりたい方はそちらをご覧下さい。私の設定では「枠線有り・写真風白縁なし・文章は画像の右側に回りこむ」と言う表示形態になります。

以下自分用の覚え書きです。

まず元記事さんから影用画像をダウンロードしてきて、任意のフォルダにupします。
次にcssに以下の記述を追加します。

/* 画像に影をつける */
.images {
background-image: url(< $MTBlogURL$>archives/images/css/shadow_001.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0 10px 10px 0;
padding: 0px;
position: relative;
float: left;
border: none;
}

.images img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: -5px 5px 5px -5px;
position: relative;
}

これでおしまい。
元記事では divタグでimgタグがくくられているのですが、私の場合以前からそのような設定になっているので、影を付けたいと思った時に「class=”image”」　に「class=”images“」のように「s」を付記するだけで影がつくようになりました。

恐らくですが、写真風に見せるために白枠を取らなくてもいいのであれば、xml宣言していても、imgタグ中のclass指定を必要に応じて書き替えるだけで、画像の影有り・影なしを使い分けられるような気がします。実験していないので、確証はできませんが。

Related Posts

Google Adsense

Comments & Trackbacks : 6

Response from かづ2005 年 7 月 11 日　23時53分

▽・ｗ・▽こんばんわ。
そうきましたか・・・。
私は、ＣＳＳ設定するのが面倒なので、手抜きした次第です。
画像を縮小すると同時に、画像に影を付けるという一石二鳥をとりました。
わくわくデジカメですから、画像のサイズは、デジカメ用にできているんですね。
新しい、発見でした。
影のパターンを４つ左上、右上、右下、左下ではじめに設定しておくと良いカモです。
使い道があるかどうかは、微妙ですが・・・。

Response from もそ2005 年 7 月 12 日　10時56分

■かづさん
いやぁ、使える比率なら「わくわくデジカメ」を使う方が楽なんですけど、そうじゃない画像が「みよ～ん」って横のびしたり縦のびしたりしたので、それ用の対策に結局css指定する羽目になりましたよ（苦笑）。
基本的にはこれからもわくわくデジカメで押し通す予定ですけどね。

あ、影のパターンってどうやって作るとですか（ ´Д⊂
Firefoxでも作れます？？

Response from かづ2005 年 7 月 12 日　22時53分

どうも、▽・ｗ・▽こんばんわんこ。
影のパターンオススメした手前、あれこれ実験してみたのですが、全部却下しておきます。
検証した結果、左上、右上、左下のパターンは見てくれの問題で、いまいちピント来ないため、却下しました。ブラウザ上の文字情報を左上から右下に見ていくのと影の方向は関係あるのかもしれません。心理的に方向が整っていると、安心感が出ること、見た目に不揃いな情報が入ってこないために、受け入れられやすいなどが考えられました。

ご参考までに、以下、実験のご報告。
http://www.leapk.com/archives/2005/07/12_222431.php

Response from もそ2005 年 7 月 13 日　10時15分

■かづさん
わざわざ実験ありがとうございます
さっそくレポートを見に行ってきたのですが、影はやはし右下以外はしっくり来ていないようでしたねぇ。
安心感を与える配置、というのがどうやら身体の中にあるみたいですね。

ちなみに以前、画像を実験的に右側に入れた時も違和感を感じてしまいまして。
それ以来、画像挿入する時は常に左側と決めています。
これも上と同じ理由っぽいですね。

Response from かづ2005 年 7 月 13 日　22時11分

こんばんわ。
右側の画像レイアウトも回り込みによっては、それなりになんとか見れることもあると思います。
雑誌なんかは見開きで両側に画像とかよくあると思います。
感じ方は人それぞれですので、後は、多数決かなと思います。
腹時計もひとそれぞれ。腹減った～。

Response from もそ2005 年 7 月 14 日　22時00分

■かづさん
いやいや、私にはそのセンスがないだけの話なのですよ(ﾉД`)ｼｸｼｸ
なんかねぇ、もっさりもさもさしてしまうような気がして。
他の人が許してくれても、私が許せないという（苦笑）。

あー、私の腹時計はだいぶ昔から故障してるんですよね。
うまいものをみるといつでも反応。助けてママン。