前のサーバに置いてあった 2 つのドキュメントをこっちのサーバへ移しました。
Apache の方は内容がだいぶ古くなっている。あの頃ってまだ Mac OS X が登場したばかりで反対意見が多かったんだよなあ、とか読んでいたら懐かしい気持ちになった。気が向いたら更新してみようと思います。
前のサーバに置いてあった 2 つのドキュメントをこっちのサーバへ移しました。
Apache の方は内容がだいぶ古くなっている。あの頃ってまだ Mac OS X が登場したばかりで反対意見が多かったんだよなあ、とか読んでいたら懐かしい気持ちになった。気が向いたら更新してみようと思います。
一足先に春気分に浸ってみた。でも、配布元のサンプルショットほどサクラの花ビラは目立たなかった。設定が悪いのだろうかとも思ったが、設定項目が 2 つしかないので間違えようが無い。まぁでも少し春気分を味わった。
ちなみに、Seesaa BLOG の記事を書くときは、あらかじめ作っておいてるテンプレ HTML 文書をローカルでプレビューしながら編集し、OK そうだったら記事内容を投稿フォームにコペコペしてます。
ふと思い立ち、Another HTML-lint gateway を使って文法チェックを試みる。
ふつうです。
http://seize-a-day.seesaa.net/ を XHTML1.0 Transitional としてチェックしました。71 個のエラーがありました。このHTMLは 60 点です。タグが 29 種類 244 組使われています。文字コードは Shift JIS のようです。
いやはや何とも中途半端な結果。ほとんどのエラーは、 Seesaa BLOG が自動生成するコード、アフィリエイトアンカーだったりするので対策のしようがない。直せるところは直してみようと思う。
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
のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います