このブログの、表立って見えない部分をちょこちょこといぢっている。
link 要素を書き換えfont-size の豆字指定を削除指が全体的に腫れていて、箸を持ったりするような指の間を使う細かい動作が億劫だ。
一昨日から夜勤のバイトしていて、帰って来ると風呂入ってお酒飲んでバタンキュー。彼岸のお団子作りです。
コメントを頂いていたので、とりあえず Lightbox JS とドロップシャドウの併用はできますよ例。
<div class="image">
<a href="http://seize-a-day.up.seesaa.net/image/bass.jpg"
rel="lightbox" title="うちのバスちゃんズ" target="_blank">
<img src="http://seize-a-day.up.seesaa.net/image/bass-thumbnail2.jpg"
width="150" height="112" border="0" align="left" alt="うちのバスちゃんズ" />
</a>
</div>見やすいように空白類文字を加えました。
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)と合わせて読んでみてください。
マウスが壊れている。ドラッグがうまくいかない。うまくブロギれない。そして眠い。今日はここまで。おやすみなさい。
CSS によって画像にドロップシャドウを付ける Tips。
ほとんどそのままソースを使わせてもらいました。仕組みについては A List Apart: Articles: CSS Drop Shadows を見れば、図解されているので非常にわかりやすい。
Seesaa BLOG サービスでは、アップロードした画像を記事に貼付ける時は自動でソースを埋め込んでくれる。
<a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg"
target="_blank">
<img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg"
width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" />
</a>見やすいように空白類文字を加えました。
あたしの場合、この生成されたソースを実際に使う時は <div class="image"> で囲んでいるので、こいつを CSS のクラスセレクタとして利用することにします。
まずは Easy CSS drop shadows | Blog | 1976design.com からドロップシャドウの画像素材をダウンロードして Seesaa BLOG にアップロードしておく。そして CSS のソースも参考にしながら、margin の微調整と画像が連続する場合のみ float で流し込むように書き換える。
<div class="image">
<a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg"
target="_blank">
<img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg"
width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" />
</a>
</div>見やすいように空白類文字を加えています。
/****************************************************
* Easy CSS drop shadows
* http://www.1976design.com/blog/archive/2003/11/14/shadows/
***************************************************/
/* 画像が連続する場合のみ流し込みするため、他のは流し込み解除 */
.posted
{
clear: both;
}
/* .image の場合 */
.text .image
{
text-indent: 0;
background: url('http://hoge(環境に合わせて書き換え)/shadow.gif') no-repeat bottom right;
clear: none;
float: left;
width: auto;
margin: 0 1em 1em 5px;
padding: 0;
position: relative;
}
.text .image img
{
color: inherit;
background-color: #fff;
border: 1px solid #a9a9a9;
display: block;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
/* もしもアンカーだった場合のために :hover 時の装飾 */
.text .image a img:hover
{
color: inherit;
background-color: #fff0f0;
border: 1px solid red;
}
ここで使った猫の写真は、So-net blog:HDV/ハイビジョン/ネコ年は来ないの Studio Kukky さんちの猫、キムチです。 勝手に出演させちゃいました。
以下、追記。
スタイルシートをやや修正。
.text を追加.image a としていたセレクタを .image に変更さらに追記。
.text > a と .posted を追加（けっこう重要）さらに追記。
.posted のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います