« デザインを変えてみる | トップページ | 怒涛(?)の16連休始まる »

2005.01.15

デザインを変えてみるの2【css紹介】

流石奇屋ヒットです。
前回の記事でご紹介した「流石奇屋テンプレート」について、cssを公開します。
試行錯誤して作ったcssですので、修正要領に不足があったり、もちろんこれが唯一解ではないとは、思います。

「styles_sasugakiya.css.txt」をダウンロード

暖かい目で見てやってください。

【追記2005.01.21】
●記事タイトルを「マイルドセブン(オリジナル)」のORIGINALと書かれた部分に似たようにしてみました。
●各要素の幅を若干修正しました。(タイトルを狭め、右サイドバーを広めに)
●Font全体を[MS UI Gothic]に修正しました。
【追記2005.01.27】
●引用句を、幅広にし、枠線をドットに変更しました。
【追記2005.01.30】
●バーナーの幅を狭め、タイトル文字を小さめにし、本文の幅を大きくしました。
▲Txtファイルには上記更新内容を含めています。

【解説】
1.左サイドバーにタイトルを入れる(ように見せる)

準備1:まずは、適当なテンプレートで3列リストを選びます。

準備2:次に、サイドバーのコンテンツを全部右サイドバーに寄せます。

ココログの3列リストの場合、それぞれの要素は、
#container:全体の要素
#banne:タイトルの要素
#center:中央の記事欄の要素
#left:左サイドバーの要素
#right:右サイドバーの要素
となっていますが、それぞれのwidth(幅)を下記のように、設定しました。

#container {
     width: 800px;
       }
#banner {
     width: 101px;
       }
#center {
     width: 465px;
       }
#left {
     width: 0px;
       }
#right {
     width: 189px;
       }

すみません。

たった、これだけです。

ポイントは、
①#bannerのwidthは「あたかも左サイドバー」が取りうる幅を設定
②#leftはwidth:0Pxで設定

ちなみに、普通であれば、#left、#center、#rightのwidthの総和が#containerとなります。
が、このデザインでは、、#banner、#left、#center、#rightのwidthの総和が#containerとなります。(実際にはなりませんが、それは各要素の枠線を太めの点線にしているからです)

2.各要素の境目を凸凹(というかギザギザ)にしてみる(ように見せる)

前述していますが、これは各要素の枠線を太めの点線にしただけです。 もちろん色をその要素の色にすることで、あたかもギザギザしている感を出しています。

例:
#right {
     float: right;
     width: 189px;
     background-color: #000066;
     border-left: 6px dashed #000066;
     border-bottom: 6px dashed #000066;

     overflow: hidden;
       }

やっぱり

たった、これだけです。







そして極めつけは・・・

3.左サイドバーのタイトルを縦型で表示させる(ように見せる)

もうお分かりのこととは思いますが、

・・・結局のところ

高さを稼ぎ、文字サイズを大きくしているだけです。

●高さを稼ぐ

#banner {
     height: 1000px;
       }

●文字サイズを大きく

#banner h1 {
     font-size: 55pt;
       }


・・・説明してみると、無理やり感がでていて、なんだか恥ずかしい限りですが、ココログスリム化計画としては、結果オーライです。・・・

記事にするんじゃなかった・・・・(自虐)

|

« デザインを変えてみる | トップページ | 怒涛(?)の16連休始まる »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/63046/2576110

この記事へのトラックバック一覧です: デザインを変えてみるの2【css紹介】:

« デザインを変えてみる | トップページ | 怒涛(?)の16連休始まる »