• Home
  • WordPress
  • Wordpressカスタマイズ備忘録05 - CSSの適用方法とブラウザCSSのリセット

Wordpressカスタマイズ備忘録05 - CSSの適用方法とブラウザCSSのリセット

今日はスタイルシートの適用方法の変更と、ブラウザのデフォルトスタイルシートをリセットします。

まずデフォルトのスタイルシートの適用方法は以下のようになっています。

<style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> );</style>

この適用方法を次のように変えます。

cssfilemap.jpg(11488 byte)

  1. link要素でCSSファイルを読み込む。その際、「media="screen,projection,tv"」でNetscape 4を排除する。
  2. 上記で読み込んだstyle.cssで、さらに「@import url("~.css");」により個別のスタイルシートを読み込みMac IE 4.5を排除する。

この方法で、Mac IE 4.5、Netscape 4を排除するとともに( Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト 参照)、CSSファイルを管理しやすくします。

さて、まずheader.phpの9~11行目を次のように変えます。

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen,projection,tv" />

次に、style.cssのすべての内容を次のように書き換えます。

@charset "utf-8"; @import url("http://~ブログのURL/wp-content/themes/customize/css/reset.css"); @import url("http://~ブログのURL/wp-content/themes/customize/css/main.css");

続いて、customizeフォルダに「css」というフォルダを作成します。
/wp-content/themes/customize/css

作成したcssフォルダの中に、ブラウザのデフォルトスタイルをリセットするための「reset.css」というファイルを作成します。内容についてはケースバイケースですが、僕は「Yahoo! UI Library」のreset.cssを参考にして作り、次のようになりました。

@charset "utf-8"; html { overflow-y: scroll;/* IEの独自拡張。CS3草案には採用。Firefoxは先行実装 */ } body { line-height: 1; color: #000000; background: #FFFFFF; font-size: 62.5%;/* 1em=10px。エラスティックレイアウト対応 */ } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; outline: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } li { list-style:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } abbr, acronym { border:0; font-variant:normal; } sup, sub { line-height:-1px; vertical-align:text-top; } sub { vertical-align:text-bottom; } input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; } /* remember to define focus styles! */ :focus { outline: 0; }

これをサーバーにアップするとCSSがリセットされました。

ブラウザのデフォルトスタイルをリセットした状態

今日はここまで。