必要な要素だけを表示したい(スタイルシート)
2008年10月15日 09:38| コメント(0)| トラックバック(0)
デフォルトで表示される画面は、かなり見づらい。
カスタマイズしようとソースを見ると、こちらも非常に見づらく、
何が必要で何が不要なのか判断しづらい。
ここではレイアウトやデザインはあとで考えるとして、
まずは必要な要素だけを表示したい。
まず、新規でスタイルシートを作成する。
(ここではsite.cssという名前にする。)
最低限必要であろう指定は、marginとpaddingの初期化。
* {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
*は「すべてに適用させます」という意味。
つぎに<p></p><h1></h1>など、marginとpaddingを0に指定してもブラウザが自動で判断して書体が変化するタグへ、何も変化しないように指示をする。
(趣旨は「初期化」である。すべてのタグが同じように動作することを目的としている)
h1,h2,h3,h4,h5,h6,p,pre,li,blockquote,em,strong {
margin: 0px;
padding: 0px;
font-weight: normal;
font-style: normal;
font-size: small;
}
margin: 0px;
padding: 0px;
font-weight: normal;
font-style: normal;
font-size: small;
}
さらに、リストの表示に「・」などの記号は不要となるので、こちらも表示されないようにする。
li{
list-style: none;
}
list-style: none;
}
画像を表示させるとき、枠線を表示しないようにする。
img {
border: 0;
}
border: 0;
}
このスタイルシートを適用させる。
管理画面→デザイン→テンプレート→メインページ→HTMLヘッダー
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
↓(差し替え)
<link rel="stylesheet" href="http:/hegehoge.com/site.css" type="text/css" />
↓(差し替え)
<link rel="stylesheet" href="http:/hegehoge.com/site.css" type="text/css" />
CSSの詳細については説明を省く。
詳しく知りたい場合はこちらへどうぞ。
HTMLクイックリファレンス
http://www.htmq.com/index.htm
※元通りに戻せなくなっても責任を負いかねますので、
カスタマイズは自己責任において行ってください。
タグ:






