小粋空間  -  a cheap joke and a play on words site

≫ [web]書影か、赤い絵良し（回文） from Tres tristes tigres...
書影には赤い絵が良いよ、目立つから。 小粋空間: CSSで画像に影をつける（ドロップシャドウ）を参考に、amazletの書影に影を付けてみた。見た目がそん... [続きを読む]

≫ エントリー中の画像に影をつける from 暇人STRのブログ
小粋空間さんのこちらのエントリーを参考に、エントリー中の画像に影をつけるようにしてみました。 あらかじめ用意しておいた影... [続きを読む]

≫ MovableType：エントリーのサムネイル画像に自動的にドロップシャドウをつける from DayByDay
MovableTypeでエントリーのサムネイル画像に、自動的にドロップシャドウをつける。 [続きを読む]

≫ [CSS] XML宣言を削除しないでIEでも画像に写真枠とドロップシャドウを表示させる from pastelmilk
CSSで画像に本物の写真のように枠とドロップシャドウを付ける CSSで画像に本物... [続きを読む]

≫ JavaScriptで作るシャドー効果 from Open MagicVox.net
　グロー効果に引き続き、 HTML 要素に影を落としたような視覚効果であるシャドー効果(drop shadow effect) を付与するための Java... [続きを読む]

≫ ドロップシャドウ from motorpsycle
画像を使わずにドロップシャドウを付けるCSSテクニックを試してみようかと。 よく、サムネイル画像なんかにドロップシャドウが付いていたりしますが、元の画... [続きを読む]

≫ 2月14日のアップデート情報（.moflogの） from .moflog
日頃は『.moflog』をご愛顧いただき誠にありがとうございます。 2月12日に行われたアップデ... [続きを読む]

≫ flickr badgeをオシャレにカスタマイズ from TODOROKI
以前はflickr badgeを表示させるためにWP Flickr DHTML Badgeというプラグインを使用していました。 flickrで公式配布され... [続きを読む]

≫ CSSで画像にドロップシャドウをつける from 日刊にしこり－埼玉版－
小粋空間 画像にドロップシャドー(影)を付ける方法を紹介いたします。 元ネタの小粋空間さんは下記のサイトを参考になさったようです。 目を通しておくと... [続きを読む]

≫ スタイルシートで画像に影をつける from 社労士@DIARY
　スタイルシートを使って画像に影をつけるカスタマイズ。仕組みは影（ドロップシャドウ）用の画像をimgタグで括る別のタグの背景画像として指定して、img... [続きを読む]

先日のご質問させて頂いておりました件、早速解説して頂きありがとございます。いつもながら感謝しております。また、暇を見てはカスタマイズにチャレンジしたいと思います。後、テンプレート（３カラムリキッドレイアウト）の不具合の件もお手数おかけしますが宜しくお願いします。詳細につきましては、MT3.2テンプレートのコメント欄にご質問させて頂いております。忙しいのに本当にすみません。

＞panserさん
こんばんは。
コメントありがとうございます。
ご質問の件につきましては追って回答させて頂きますのでお待ちください。

はじめまして。。
画像に影をつけたいのですが、初心者なためやり方がわかりません(泣)。。
つけたいのは、タイトルの画像で
#banner {
font-family: cursive;
color:#8ada43;
background-color:#c6f8a1;
text-align: left;
padding: 18px;
height: 465px;
widht: 200px;
background-image: url(http://sacchikosodate.cocolog-nifty.com/photos/003/green.JPG);
width: 465px;
height: 220px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}
このようになってるんですが、何度やっても出来ませんでした。。
よろしければ教えて下さいm(__)m

はじめまして。
小粋空間様のサイトを参考に、ドロップシャドウ化とサイドバーメニューの折りたたみを行わせていただきました。
これからもいろいろと参考にさせていただきます。
ありがとうございました。

＞sacchiさん
こんばんは。
ご利用ありがとうございます。
遅くなってすいません。サンプルを作りましたのでこちらを参考にして頂けますでしょうか。
HTMLソース（index.html）・スタイルシート（styles.css）・ドロップシャドウ用の画像（shadow_001.gif）がありますので、それぞれ表示（またはダウンロード）して、差分等をご確認ください。
HTMLはバナー部分のタグを若干変更し、スタイルシートは前半に修正を加えたものを追加して、不要になったものは削除しています（スタイルシートはそのままお使いになっても良いと思います）。
ご不明な点がございましたらご連絡ください。

以上です。
それではどうぞよろしくお願い致します。

＞STRさん
はじめまして。
ご利用＆ご連絡ありがとうございます。
またのお越しをお待ち申し上げます。

ドロップシャドウ参考にさせていただきました。
FireFox では写真に白い枠がつくのですが、IEでは付かないですよね。これは想定したとおりなのでしょうか？

＞naoyaさん
こんばんは。
記事参照ありがとうございます。
ご質問の件ですが想定外でしたので、調べて標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するにまとめてみました。

それではどうぞよろしくお願い致します。

こんにちは!!やっと出来ました。。理解の悪い私。。（T-T）
料理版のブログを作ったのでそちらで使わせていただいてます(^0^ゞ
お手数おかけしてすみませんでしたm(__)mありがとうございました!!

＞sacchiさん
こんにちは。
ご連絡ありがとうございました。
設定お疲れ様でした。
ではでは！

度々すいません＾＾；
今度はこちらの影をつけるに挑戦したのですが、
すごいずれかたをしてしまいました。
投稿者情報も上にあがっている状態になってしまいました。（エントリー部分分かりやすいようにそのままにしてあります。）

お忙しいところ本当にすいません。教えていただけたら幸いです。

＞konさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の部分に青色のプロパティを追加してみてください。

/* 投稿者 */ .entry-footer {     margin: 10px 0 0 0;     border-top: 1px dotted #cccccc;     text-align: right;     color: #666666;     font-size: 9px;     clear: both; }

以上です。
それではどうぞよろしくお願い致します。

こんにちは、はじめまして。

ココログで初心者向けにカスタマイズ方法を説明するブログを運営しています。
（私も初心者レベルなのでおこがましい話なのですが^^;）
今回、こちらの記事を全面的に参考にしてココログにて処理する場合の記事を書かせて頂きました。
ありがとうございました。

こちらへのリンクはもちろん記事中に明記しましたが、CSSタグなどそのままコピーして掲載した部分もありますのでもし何か不都合があれば遠慮なくご連絡下さい。対処させて頂きます。

また参考にさせていただくと思います。
その際もどうぞ宜しくお願いいたします。

＞takoさん
はじめまして。
記事参照＆ご連絡くださりありがとうございました。
それでは今後ともどうぞよろしくお願い致します。

こんばんは。
はじめまして、ゆずと申します。

お門違いかもしれませんが、貴サイトのようにホームページ全体に立体感（ドロップシャドウ？）を出すにもこの方法でできるのでしょうか。

ここ数ヶ月悩んでいるのですが、貴サイトなら的確なお答えをいただけるような気がして、図々しくもコメントさせていただきました。
ぜひ教えて下さい。

＞ゆずさん
こんばんは。
このブログでカスタマイズしている内容は少しずつ公開していく予定です。
現在鋭意作成中ですのでお待ちください。

はじめまして。
素敵なテンプレートをお借りしました。ありがとうございます！

画像を回り込むように（画像の左に文字）したいのですが、アフィリエイトリンクの場合タグをいじれないのでスタイルシートで設定できれば…と思います。
色々検索してみたのですがどれもうまくいきませんでした。
どこにどのように書き足せば可能になりますか？
よろしくお願い致します。
（アフィリエイトを含むサイトですので宣伝になるといけないのでURLは書かずにおきます…）

＞xcoxcoさん
こんばんは。
ご質問の件ですが、遠慮なさらずにURLをご連絡ください（元ネタがないと実験できませんので）。またドロップシャドウの記事へのコメントですが、ドロップシャドウは不要でよろしいですね。

以上です。
それではよろしくお願い致します。

こんばんは。

返信ありがとうございます。
あれから少しまた考えて、ブログをいじっていたらたHTMLで書ける機能がついていました。
すぐにこちらへと書き込みに来たのですが、コメントの書き込みができませんでした…

これからも色々参考にさせて頂きます。
ありがとうございました。

Yujiroさん、

他にもいくつか質問させて頂いておりますが、エントリー内の画像に影を付ける方法を試しているのですが、上手く行きません。上記手順の1-4を試した積もりですが、上手く行きません。あと、後方互換モードのところの下りがあまり理解できないのですが、具体的にはどうすれば良いのでしょうか？

＞kunioさん
こんばんは。
ご質問の件ですが、下記の修正を行ってください。

１．background プロパティの "url" と "(" の間の半角空白を取り除いてください。

.shadow {
    margin: 10px 0 0 5px;
    background: url (http://kunio.net/blog/shadow.gif) right bottom;

２．上記のセレクタに、サンプル通り、float プロパティを付与してください。

３．２項の修正を行うと後方の画像が右に回りこむため、p タグの要素セレクタに青色のプロパティ（回り込み解除）を付与する手があります。

p {
    margin-top: 15px;
    margin-bottom: 15px;
    clear: both;
}

４．IEで黄色い枠を表示させたい場合は、テンプレート1行目の

<?xml ??>

を削除してください。

カスタマイズされると疑問や不具合が色々発生すると思いますが、まずはご自身でもできる限り解析くださいますよう、よろしくお願い致します。

以上です。
それではよろしくお願い致します。

Yujiroさん、

ありがとうございます。
無事影は表示されるようになりました。

いつもお世話になります。そしてまたまた質問デス。

影付けは問題なく出来ているのですが、例えばトップページの最下段にエントリーが位置した場合のみ、影が大きくズレてしまうという現象に出会します。Ｆｉｒｅｆｏｘでは問題ないのですが、ＩＥ（Ｓｌｅｉｐｎｉｒ）ではズレてしまいます。また、個別エントリーでも微妙に影＆写真の位置がズレていたりします。最下段の時のみ・・・ということと、影がズレるタイミングを見ていると、ｆｏｏｔｅｒとの関係があるような気もするのですが・・・。スタイルシートの設定を変えてみたものの、解決まで至っておりません。

お忙しい中恐縮ですが、思い当たる節、アドバイス等いただけると幸いです。

＞toycozyさん
こんばんは。
ご質問の件につきまして、各ブラウザで確認していますが、こちらでは不具合が確認できません。
不具合が確認できるページのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[23] Posted by yujiro : December 9, 2007 12:39 AM

早々の御返事有り難うございます。

写真付きのテストエントリーを追加してみました。（http://trashnote.com/）
スタイルシートをいろいろと弄ってみましたが、謎のままデス。
御手数をお掛けしますがアドバイスよろしく御願い致します。

＞toycozyさん
こんにちは。
こちらで、IE6/IE7/Firefox2でトップページを閲覧した結果をまとめたものを
http://www.koikikukan.com/images/trashnote.png
にアップロードしました。
「ズレテスト。」が最下段のもの、「世の中…」は上部にあるエントリーです。

それで、一番左のIE6の画像のズレは見分けることができておりません（ブラウザ間では違いがあります）ので、toycozy さんのご指摘の部分がこの中に含まれているようでしたら再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。

[25] Posted by yujiro : December 10, 2007 12:55 PM

コメントがエラーになったようなので再度書かせていただきます。重複してましたら削除願います。

この度は大変な御手数をお掛けし申し訳ありません。

yujiroさんのキャプチャしていただいた画像を見る限り全く問題ないようなので、当方の環境固有の問題かもしれません。最下段に位置した場合のみ、IEで見ると“http://trashnote.com/images/zure-ie-1.jpg”のような大きく影がズレた状態になります。ブラウザ間の見え方の違いは、全く許容範囲だと思います。恐らくスタイルシート、もしくはブラウザの設定をどこかで間違っているような気がしてきました(汗)。

もう少し検証してみます。貴重な御時間を割いていただいて有り難うございました。

＞toycozyさん
こんにちは。
ご連絡ありがとうございます。
ちなみに、複数のPCで拝見させて頂いたのですが、どれも画像と同じ表示でした。
ただ、テンプレートの問題ではないとも言い切れないので、もし何か分かりましたらご連絡致します。
ではでは！

[27] Posted by yujiro : December 11, 2007 11:54 AM

いつもお世話になっております。

わかりました！“はてなスター”の設置というカスタマイズの際、その“はてなスター”をspanで設定していたのが、影付けのspanと干渉していたようです。・・・と書きましたが、単に当方がspan,div,p,dd,dt・・・等の違いを明確に理解していなかった為の初歩的なミスだと思われます(汗)。御手数をお掛けし申し訳ありませんでした。ただ、最下段だけにその現象が現れるというのがイマヒトツ原因が・・・？？？・・・なのですが、spanだから・・・とかいうことでしょうか・・。いずれにしてもお騒がせしてスミマセンでした。

＞toycozyさん
こんにちは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ちなみに、IE6 は span 関係のマークアップ誤りに弱いようです。
ではでは！

[29] Posted by yujiro : December 12, 2007 11:24 AM