カテゴリ「スタイルシート」のトップページへ
カテゴリ「スタイルシート」のタイトル一覧を見るカテゴリ「スタイルシート」のタイトル一覧を見る

必要な要素だけを表示したい(スタイルシート)

2008年10月15日 09:38| コメント(0)| トラックバック(0) " width="476" height="357" alt="" />

デフォルトのメインインデックス

デフォルトで表示される画面は、かなり見づらい。

カスタマイズしようとソースを見ると、こちらも非常に見づらく、
何が必要で何が不要なのか判断しづらい。

ここではレイアウトやデザインはあとで考えるとして、
まずは必要な要素だけを表示したい。

まず、新規でスタイルシートを作成する。
(ここではsite.cssという名前にする。)

最低限必要であろう指定は、marginとpaddingの初期化。

* {
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;
}

さらに、リストの表示に「・」などの記号は不要となるので、こちらも表示されないようにする。

li{
    list-style: none;
}

画像を表示させるとき、枠線を表示しないようにする。

img {
    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" />

CSSの詳細については説明を省く。
詳しく知りたい場合はこちらへどうぞ。

HTMLクイックリファレンス
http://www.htmq.com/index.htm

※元通りに戻せなくなっても責任を負いかねますので、
カスタマイズは自己責任において行ってください。


コメントする