PROFILE
Template
【テンプレ】 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;
}
こんな感じでやると整います。
他にも何か気付いたら、随時追記しますデス。
<< 買っちゃった!|MAIN|JavaScriptメモ(1):広告カラーリング >>
Trackback
トラックバックURL :
NEW ENTRYS
- 生存報告とか色々なお知らせ (12/28)
- 生存報告とお知らせと宣伝と (08/21)
- CSS Naked Day だそうです。 (04/09)
- gift (03/28)
- エントリが1ヶ月おきな件について (03/24)
COMMENTS
TRACKBACK
- JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ buggy_trekkerの学習帳 (10/24) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Memoのメモ (08/23) - (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
⇒ SOHOカアチャン通信 (06/09) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ WEB制作会社のメモ帳in徳島(ホームページ作成Tips) (11/18) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ btmup Blog [tech] (11/04) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Bowz::Notebook (03/12) - Twitterな話。
⇒ COLORFULLIFE (05/16)
ARCHIVES
- December 2010 (1)
- August 2009 (1)
- April 2008 (1)
- March 2008 (2)
- February 2008 (1)
- December 2007 (1)
- November 2007 (1)
- October 2007 (1)
- August 2007 (1)
- July 2007 (2)
- June 2007 (10)
- May 2007 (4)
- April 2007 (9)
- March 2007 (16)
- February 2007 (17)