今日はスタイルシートの適用方法の変更と、ブラウザのデフォルトスタイルシートをリセットします。 まずデフォルトのスタイルシートの適用方法は以下のようになっています。 <style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?&g...
今日はスタイルシートの適用方法の変更と、ブラウザのデフォルトスタイルシートをリセットします。
まずデフォルトのスタイルシートの適用方法は以下のようになっています。
<style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> );</style>この適用方法を次のように変えます。
この方法で、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がリセットされました。
今日はここまで。