【-】 スポンサーサイト

一定期間更新がないため広告を表示しています

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

テンプレ avion



どうもお久しぶりです。
ずいぶん前から構想はあったんですが、上手く組み立てられず、ようやく出来きました。

「avion」
フランス語で「平面」を意味します。でも逆翻訳かけると「飛行機」になる不思議。

そもそもwebは平面的なものなんですが、立体的な平面、よくある壁みたいなものを作ってみたくて。
少しザラザラした背景に、文字を書きなぐっているような、はたまた写真を貼り付けているような。
そんなイメージ。

そして、今回はよりリスト周りと文字周りを見る人に配慮(したつもり)。
深玖さんやその他の方の記事で、
「月別アーカイブとか要らないんじゃない?コメントとか要らないんじゃない?」
って言うのを読んで、
「要る人は要るし、要らない人は要らない。
 でも、テンプレだもの、入れておこう。要らない人は削ればOK。
 とりあえず、見てる側で要らない人の為に隠しておこうか」
というわけで、こんなんなりました。

それから、世の中には
「文字が小さいと読む気にならないヒト」と「文字が小さくないと書く気にならないヒト」またはその逆のヒト達
がいるようです。
助け合い掲示板とかでも全体的に小さくしたいとか質問も飛んでいたり。
個人的には読みづらいので12pxは欲しいところですが。
なので今回は文字サイズを可変できるようにしてみました。
シェアの多いIE6ではpx等で固定した文字がサイズ可変できないという、不親切な仕様があるので、それに対応させました。
winIEでは文字サイズ「中」で、fxやMacIE、safariの文字サイズ「100%」で、本文文字サイズが12px相当になります。

技術的な話は別エントリで書きます。
カスタマイズは続きにて。

■avion DATA
・全体の幅:600px 記事部分の幅:600px
・1カラム
・文字可変、リスト折り畳み

avionのDL Sample


■カスタマイズについて
・折り畳みの解除
使用してるJavaScriptは「in the cage」と同じですので、そちらを見てください。

・背景画像について
今回は画像を二つしか使ってません。
CSSの「body」部分にざらざらしたベージュの背景画像、「#wrapper」の部分に水色と橙色の丸の画像。
これらを違う画像に変えるだけで、だいぶ雰囲気変わりますので、お試しあれ♪

■カスタマイズの時に注意して欲しい事
・リスト部分のタイトルを変えた時
「NEWENTRY」等書いてる部分を違うタイトルにした時、文字が2行になっちゃったりしたら、まず、CSSの↓の赤文字部分の数字を少し増やします。
dl.head_contents dt, dl.foot_contents dt{
 font-size: 90%;
 padding:0px 0px 2px;
 margin:0px;
 text-align: left;
 width:8.5em;
}

「em」とは、文字数を意味する単位です。
厳密には、font-sizeを1とする単位ですが、1文字=1emと考えるとシンプルですね。

では続き。
↑で赤文字部分を増やしたら、次に「増やした分+2〜3」の数字に↓の青文字部分を変えます。
dl.head_contents dd, dl.foot_contents dd{
 margin:-2em 0 0 12em;
 font-size: 75%;
 padding:0.3em 0 1em;
}


こんな感じでやると整います。
他にも何か気付いたら、随時追記しますデス。

2007.06.26 / 13:45 | CM : 0 | TB : 0

△PAGE UP

【-】 スポンサーサイト

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

<< 買っちゃった!MAINJavaScriptメモ(1):広告カラーリング >>

Comment

Trackback

トラックバックURL :