« アドレスバーに文字入力 |メイン| いかしたマウス！2 »
2005年05月18日
画像に影をつけるテクニック
スタイルシートを使って画像に簡単に影をつけるテクニックがnlog(n)さんで紹介されていたので真似させていただき、ブログ内の写真にいくつか適用してみました。
枠線の色、太さ、種類、影の色など変えられるようですが、僕はほぼそのままにして使っています。
僕はたまにmoblogを利用して写真をアップするためmoblogにログインして2ページ目Movable Type Settingのtemplateの設定をデフォルトの「<div class=\"caption\">%(caption)s</div>\n<div class=\"photo\">%(imagecontent)s</div>」から「<div class=\"caption\">%(caption)s</div>\n\n<div class=\"img-shadow\">%(imagecontent)s</div><br style="CLEAR: both">」「<div class=\"caption\">%(caption)s</div>\n<div class=\"img-shadow\">%(imagecontent)s</div><br style=\"CLEAR: both\">」(5/26訂正)に変更しました。
このテクニックは段落（<p>タグ）にも適用できるようです。その場合は、もう一つの画像shadow2.gifを
CSS Drop Shadows: A List Apartサイトからダウンロードしてください（場所は真ん中よりやや下）。
そしてスタイルシートに以下を追加します。
.p-shadow {
width: 90%;
float:left;
background: url(画像までのパス/shadowAlpha.png) no-repeat bottom right !important;
background: url(画像までのパス/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.p-shadow div {
background: none !important;
background: url(画像までのパス/shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #000000; /*文字色*/
background-color: #fff;
font-family: Arial, "Osaka", utopia, Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Helvetica, sans-serif;/*このフォント指定はご自由に*/
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
エントリーでの表記は以下のようにします。
<div class="p-shadow"><div><p>文字列</p></div></div>
文字列
僕の場合は引用でも使いたいのでさらに以下のスタイルを追加しました。
.p-shadow blockquote {
color: #000000;
background-color: #fff;
font-family: Arial, "Osaka", utopia, Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Helvetica, sans-serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
そして最後に、クイックポストを使用した際にも自動でタグが挿入されるように、/lib/MT/App/CMS.pmの$param{text} = sprintf qq(<blockquote><div class="quotetitle"><a title="%s" href="%s" target="_blank">%s</a></div>%s</blockquote>),の行を、「<div class="p-shadow"><div><blockquote><span class="quotetitle"><a title="%s" href="%s" target="_blank">%s</a></span><br /><br />%s</blockquote></div></div><br style="CLEAR: both">),」に変更しました。<div class="quotetitle">を<span class="quotetitle">に変えたのは、p要素の中でdivを使うことが文法違反になるからです。
トラックバックについて
当エントリーと同様の話題であれば、エントリーへの言及がなくても基本的には歓迎です。 同じテーマについて書いている人が、他にどんな話題を取り上げているのか、ということに興味があるからです。どうぞ遠慮なくトラックバックして下さい。 重複やまったく関係ないと思われるものに関しては、こちらの判断で削除させて頂きます。このエントリーのトラックバックURL:
http://www.sontoku.org/cgi-bin/mt-tb-pecul.cgi/124
コメントをどうぞ