前のサーバに置いてあった 2 つのドキュメントをこっちのサーバへ移しました。
Apache の方は内容がだいぶ古くなっている。あの頃ってまだ Mac OS X が登場したばかりで反対意見が多かったんだよなあ、とか読んでいたら懐かしい気持ちになった。気が向いたら更新してみようと思います。
前のサーバに置いてあった 2 つのドキュメントをこっちのサーバへ移しました。
Apache の方は内容がだいぶ古くなっている。あの頃ってまだ Mac OS X が登場したばかりで反対意見が多かったんだよなあ、とか読んでいたら懐かしい気持ちになった。気が向いたら更新してみようと思います。
XML 宣言をすると IE 6 では CSS のボックスの解釈とかおかしくなっちゃうんで、PHP を使って IE 6 では XML 宣言をしないようにし、それ以外の UA では XML 宣言させるようにする。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (!(ereg("Windows",$ua) && ereg("MSIE 6",$ua))) {
echo '<?xml version="1.0" encoding="UTF-8"?>' . "n";
}
?>
銀座のアップルストアで行われていた Web 標準の月例イベントである CSS Nite。行きたい行きたいと常々思っていたんだけど、青森でも有志によって開催されることになったと知り、家から会場が近いこともあったし CSS Nite in AOMORI に参加してみた。
始めの講演者の益子さんが運営する CYBER@GARDEN 内の Web リソースはむしゃぶりつくように読み漁ったもんです。プレゼンではクールでシュールな印象でした。たまのお笑いがツボに入りました。笑。
次の講演者のやすひささんのブログ: C O U L D は最新でホットでトキメキなネタがたくさんなのが面白くてしっかり巡回コースです。仕事を楽しんでるっていぅのがすごぃ伝わってきた。
最後の講演者の鷹野さんは、MacBook Pro を使ぃ、Parallels 上で Windows Vista と Windows XP を同時に起動し、なおかつ Keynote でプレゼンしながら Dreamweaver の実演を行うとぃう離れ業を見せてくれました。あの、途中動作が重くなったのって、メモリ不足によって仮想メモリ swapfile が肥大化したためだと思ぅ。無茶し過ぎです。笑。
Web 業界の裏話などが興味深かった。何より、お世話になっている Web サイトや本の中の人と直接会えたのが嬉しかった。次回もぜひやってほしぃです。ちなみに、プレゼント抽選では Dreamweaver のキーボードショットカットキー一覧表を頂きました。
せっかくスタイルシート切り替えスクリプトをつけたので、一発ネタのにちゃんねるスタイルを作ってみた。
一発ネタだけあって実用に耐えられないものとなっています。わらい。右上の StyleSelect フォームから 2ch を選んでみてください。もしくはべたぶろぐへにちゃんねるスタイルを強制的に適用する。
はい、ごめんなさい。
穏やかな晴れ間がのぞいてる。東京ではもう桜が咲いているようですが、北国の青森でもようやく遅い春の足音が聞こえてきたようだ。
CSS で画像にドロップシャドウを再び修正。流し込み解除が甘かったようで、記事に画像しか貼付けなかった場合に div.posted
が流し込まれて大変なことになっていた。
あと、頓挫していたスタイルシート切り替えスクリプトは、outsider reflex の Piro たん作 JavaScript版スタイルシート切り替えスクリプトを使わせてもらうことに。ぷろじぇくと、みすじら。の真雪さんが Piro たんのをさらに Safari 対策含む改造&軽量化したのを勝手に使わせてもらってみたりする。コードを見てもワケワカだったので JavaScript も勉強してみよかなと思った。
このブログの、表立って見えない部分をちょこちょこといぢっている。
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
のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思いますやっと Seesaa BLOG の使い方にも慣れてきたところで、とりあえずあらかじめ用意されているテンプレートの CSS をいぢることから始めてみようと思う。
素材として選んだテンプレートのスタイルは、タイトルの瑞々しいガーベラが印象的な ガーベラスタイル。
なにはともあれまずはユーザビリティ確保のために、font-size
を px 単位で絶対指定された値を相対的な % 単位に書き換え。次に Windows IE での表示のことなんて知りませんよ〜という感じで無駄なプロパティを削る。あとは Seesaa BLOG 固有の class
/ id
を把握するためにも、思うがままにひたすらいぢるのみ。
書き換えまくり中なので、見る度、見栄えが微妙に変わっているかもしれない。