• Apache on Mac OS X
• CSS 着せ替え用 XHTML 1.1 文書

Apache の方は内容がだいぶ古くなっている。あの頃ってまだ Mac OS X が登場したばかりで反対意見が多かったんだよなあ、とか読んでいたら懐かしい気持ちになった。気が向いたら更新してみようと思います。

• STUDIO-蔵：サクラ

一足先に春気分に浸ってみた。でも、配布元のサンプルショットほどサクラの花ビラは目立たなかった。設定が悪いのだろうかとも思ったが、設定項目が 2 つしかないので間違えようが無い。まぁでも少し春気分を味わった。

ちなみに、Seesaa BLOG の記事を書くときは、あらかじめ作っておいてるテンプレ HTML 文書をローカルでプレビューしながら編集し、OK そうだったら記事内容を投稿フォームにコペコペしてます。

ふつうです。

http://seize-a-day.seesaa.net/ を XHTML1.0 Transitional としてチェックしました。71 個のエラーがありました。このHTMLは 60 点です。タグが 29 種類 244 組使われています。文字コードは Shift JIS のようです。

いやはや何とも中途半端な結果。ほとんどのエラーは、 Seesaa BLOG が自動生成するコード、アフィリエイトアンカーだったりするので対策のしようがない。直せるところは直してみようと思う。

• コンピュータ – mozilla.org マークアップ参考資料
• ソースコードのマークアップに関する議論リンク集

なんだか懐かしい気持ちになった。

• Easy CSS drop shadows | Blog | 1976design.com

ほとんどそのままソースを使わせてもらいました。仕組みについては A List Apart: Articles: CSS Drop Shadows を見れば、図解されているので非常にわかりやすい。

Seesaa BLOG サービスでは、アップロードした画像を記事に貼付ける時は自動でソースを埋め込んでくれる。

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 で流し込むように書き換える。

実際に使う HTML ソース

<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>

見やすいように空白類文字を加えています。

CSS のソース

/****************************************************
 *    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 のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います