CSS1:WordPressのテーマを変更するためのCSSの理解

いままで、多少のHTMLしか理解のできない私が、キャットウォークが持っていたCSS関連の書籍から吸い上げた知識をここにUPしていきます。

なんでまたCSS?と、思われるのですがWordPressのテーマをエディットするために必要だったためです。なんか、いままでのテーマにない、カッコいいやつを作りたいとおもったのです。WordPressのテーマを変更するにあたっては以下の事をやる必要があります。
1)PHPの理解
2)WordPressのタグの理解
3)CSSの理解
4)XHTMLの理解
をする必要が有りそうです。

2)は、以下の投稿にあるヘルプをよめばある程度のタグがわかります。
http://shinjuku-catwalk.com/wordpress/2009/01/wordpress-help-sheet/

3)私の頭のなかでは、時代はHTMLで止まっていたので、CSSがわかりませんでした。
要約すると、HTMLとXHTMLは別物です。
XHTML+CSSですべてを表現しております。
CSSは、フォント、カラー、サイズなどに関する情報すべてが含まれております。
私のページで、XHTMLだけになった場合には

以下のようなページになります。
wordpress-help-sheet.jpg

ここにCSSでデザインを追加することにより、以下のページのように表示されます。
wordpress-help-sheet-1.jpg

どんな要素があるのかは、FirefoxのプラグインのFirebugを利用するとわかります。
しかも、Firebugの凄いところは、表示してるページのCSSを変更して即座に変更した様子が分かるのです。(すばらしい!これがあれば、私の理解はもっと早かったのに~と思ってます)

まずは、Firefoxの「ツール」→「Firebug」→「Firebugを開く」で開きます。
Firefoxの下のほうにFirebugの画面がでてきます。
wordpress-help-sheet-2.jpg

この画面で、「調査」というボタンを選びます。
ボタンを押すとブラウザの画面の中で、枠がでてきます。この枠を、自分が知りたいところの持っていくとどのようなCSSが適用されているかわかります。
例えば・・・新宿キャットウォークというタイトルを選ぶと以下のようなCSSが適用されているのがわかります。

wordpress-help-sheet-3.jpg

ここで、フォントの種類を変更したいときにはどこを変更すれば適用されるかは、打ち消し線が入っていない、style.css のh1 a { font-family: }が適用されていることがわかります。ここのフォントを変更する事によってタイトルのフォント変更ができます。
font-size: 2em; となっているところを、直接変更が可能なので変更してみましょう!
4emに変更するとその場で変更されたフォントサイズがブラウザ上に表示されます。
おーーーーかなり便利!
これを利用して、必要な内容を変更していきます。
カラーも変更できるので、画面上でどのようなカラーリングが優れているのかを考えながらCSSを変更できます。
wordpress-help-sheet-4.jpg

さて、どこを変更するとテーマのCSSが変更できるのか?
FTPでWordPressのテーマの中をチェックしてみます。
WordPress2.7の場合について話をします。
wordpress/wp-content/themes/自分が選択してるテーマ
の中に、style.css (先ほどのFirebugでのCSS)をチェックします。

ftp-moojp-shinjuku-catwalkftp463lolipopjp.png

Firebugが指摘した、86行目を見ると先ほどと同じ内容があります。
ここを書き換えることによって、フォントサイズなどの変更ができます。
※書き換えるときには、事前にバックアップなどを取っておきましょう。
(PHPは、テキストファイルとして簡単にバックアップできるので、フォルダごとバックアップしておきましょう)
stylecss.png

第1回目は以上です。

CSSやXHTMLを理解する上で役立った書籍
3週間でマスターWebデザインの教室―未経験でもWebデザイナーになれる本
村谷 圭一

正直デザインに関しては良いとは言えないのですが、コーディングに関してはなるほど!と思われるものがあります。素の文書から、XHTMLとCSSをコーディングしていく状況をみせてくれるので、XHTMLとCSSを理解するのに便利な書籍です。

Leave a Reply