このブログは移転しました

移転に伴い、このブログは更新を停止しました。なので、このブログ内の記事は、内容が古くなっている可能性があります。

移転先:szdy.info 内のべたろぐ。

Home > Archives > 2006-03

アーカイブ: 2006-03

スタイルいぢり

やっとこ Seesaa BLOG の使い方にも慣れてきたところで、とりあえず、Seesaa BLOG であらかじめ用意されているテンプレートの CSS をいぢることから始めてみようと思う。

素材として選んだテンプレートのスタイルは、タイトルの瑞々しいガーベラが印象的な ガーベラスタイル

なにはともあれまずはアクセシビリティ確保のために、font-size プロパティで絶対的な px 単位で指定された値を相対的な % 単位に書き換え。次に Windows IE での表示のことなんて知りませんよ〜という感じで無駄なプロパティを削る。あとは Seesaa BLOG 固有の class / id を把握するためにも、思うがままにひたすらいぢるのみ。

書き換えまくり中なので、見る度、見栄えが微妙に変わっているかもしれない。



  • Posted by seize.a.day at 22:10
  • このブログの読者になる
  • 更新情報をチェックする

起きたら真っ白

雪 1

雪 2

雪 3

青森の雪も、地面が見えるくらいだいぶ落ち着いてきたけど、昨日は軽く吹雪いていた。案の定というか、今朝起きたら地面が真っ白。そんな中、今日の新聞配達完了。

  • Posted by seize.a.day at 06:39
  • このブログの読者になる
  • 更新情報をチェックする

車載 iPod

今朝は冷え込んで路面凍結。

車載iPod_1

車載iPod_2

車載iPod_3

うちの車載 iPod さん。今では過去のものかもしれないけど第三世代の iPod はオレンジに光るボタンがお気に入り。ヘッドユニットは ALPINECDA-9831J で、AUX 接続です。

  • Posted by seize.a.day at 06:18
  • このブログの読者になる
  • 更新情報をチェックする

Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)

CSS によって画像にドロップシャドウを付ける Tips。

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

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

Seesaa BLOG が書き出すソース
<a href="https://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg" 
        target="_blank">
    <img src="https://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg" 
            width="150" height="114" 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="https://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg" 
            target="_blank">
        <img src="https://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg" 
                width="150" height="114" 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('shadow.gif の http から始まるパス') 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;
    }
表示例
kukkyさんちのキムチ

ここで使った猫の写真は、So-net blog:HDV/ハイビジョン/ネコ年は来ないの Studio Kukky さんちの猫、キムチです。 勝手に出演させちゃいました。

スタイルシートをやや修正。

  • 記事本文中のみに影響範囲を限定するため、各セレクタの親に .text を追加
  • 流し込み解除するセレクタを変更
  • 画像がアンカーではない場合も想定し、.image a としていたセレクタを .image に変更
  • 画像がアンカーの場合は、マウスオーバーでアンカーであることがわかるように装飾を変更
  • 流し込み解除のセレクタとして .text > a.posted を追加(けっこう重要)
  • 流し込み解除のセレクタを .posted のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います
  • Posted by seize.a.day at 20:41
  • このブログの読者になる
  • 更新情報をチェックする

ソースコードのマークアップ

ソースコードのマークアップで参考にしたとこをメモ。

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

  • Posted by seize.a.day at 19:48
  • このブログの読者になる
  • 更新情報をチェックする

べたべた雪

2006-03-12の朝1

2006-03-12の朝2

2006-03-12の朝3

2006-03-12の朝4

今朝は少し寝坊した。おかげで新聞配達が終わる頃にはすっかり明るくなっていた。

  • Posted by seize.a.day at 06:14
  • このブログの読者になる
  • 更新情報をチェックする

吹雪の朝

20060313の朝1

20060313の朝2

20060313の朝3

昨日から風も強く吹雪いていた。そして今朝も吹雪いていた。地面が真っ白。

  • Posted by seize.a.day at 06:11
  • このブログの読者になる
  • 更新情報をチェックする

Seesaa BLOG を始めて、初めての文法チェック

ふと思い立ち、Another HTML-lint gateway を使って文法チェックを試みる。

ふつうです。

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

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

  • Posted by seize.a.day at 06:33
  • このブログの読者になる
  • 更新情報をチェックする

冬に逆戻りの朝

20060314の朝01

20060314の朝02

20060314の朝03

20060314の朝04

今朝は 10〜15 cm ほど雪が積もっていた。昨日の強風は落ち着いたようだ。ちょっとの光が雪に反射し、明るく感じた。

  • Posted by seize.a.day at 05:58
  • このブログの読者になる
  • 更新情報をチェックする

光る朝

20060315の朝1

20060315の朝2

路面の除雪されているところが磨かれていて光っていた。

  • Posted by seize.a.day at 05:54
  • このブログの読者になる
  • 更新情報をチェックする

Home > Archives > 2006-03

Blogtimes
Blogtimes
最近のコメント
最近のトラックバック
ファン
RSS
QRコード
http://webstandards.seesaa.net/
リンク集

Return to page top

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。