gakkieのBlog

wordpressのテーマをYUIで作ろう-その3

このエントリーを含むはてなブックマークはてなブックマーク - wordpressのテーマをYUIで作ろう-その3 この記事をクリップ!Livedoorクリップ - wordpressのテーマをYUIで作ろう-その3 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク @niftyクリップに追加 このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This FriendFeedで共有

前々回は、Wordpressの空テンプレートを作成し、
前回は、YUI Reset CSSを用いてブラウザのデフォルトCSSを初期化しました。

YUI Reset CSS

今回は、YUI Grid CSSを使って、テンプレートを作ってしまいます。

YUI Grid CSSはWebページ全体の構成を簡単に形作れるように作られたライブラリになります。これをうまく使うと、CSSでありがちなfloatの問題などに惑わされなくてすみます。この便利さは、HTMLを手書きで書く人であればすぐに伝わると思います。

ところで、YUI Grid CSSもYahoo!のサーバから提供されているので、HTMLに組み込む必要があるのですが、前回header.phpに組み込んだファイルは、YUI Grid CSSも含まれています。念のため以下に記します。

[html]
\ [/html]
また、前回書き忘れていましたが、YUIで推奨されているDOCTYPEがwordpressとは違うので、header.phpの最初の一行めを以下に変えます。
[html]
< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
[/html]YUI Grid CSSは、まず全体をid=docのdivで囲ってから、Webページを大きく3つに分けます。
ヘッダ部、ボディ部、フッタ部です。
これらは、divタグのIDにhd, bd, ftを指定することで分割します。具体的には以下のような感じです。

[html]

 

[/html]
(YUIのページから引用)

ボディ部の中は、今回は2カラムにし、左側にメニューを置きたいので、header.phpに書いた、全体を囲むためのid=”doc”のdivタグにclass名”yui-t2″を指定します。

次に、ボディの内部ですが、各カラムを囲うdivのclassに”yui-b”(Blockのb)を指定します。そしてメインとなるカラム(今回の場合は左カラム)にid=”yui-main”としたdivで囲みます。
つまりwordpressのテンプレートであれば、index.phpのメインロジックを”yui-main”で囲み、その中のid=”content”のdivに対して、class”yui-b”を追加します。さらにsidebar.phpを囲うid=”sidebar”のdivに対してclass=”yui-b”を指定します。

最後にフッタ(footer.php)に対して、必要なところをid=”ft”のdivで囲めば完成です。

YUI CSS Grid

まだ、デザインを追加していないのでしょぼいテンプレートですが、大まかな形はこれで完成ということになります。
今回は細かい修正個所を指定しなかったのでwordpressのテンプレートをそのままおいておきます。

gakkieoriginal template

ところで、YUI Grid CSSはどこにどんなidやclassを指定すればよいのかが少し繁雑でわかりにくいかもしれません。しかし、実はこれを非常にわかりやすく行うツールが存在します。

The YUI Grid Builder

YUI Grid CSSがどんなことをしてくれるかを理解した上で、このツールを使うと、ありえないくらい便利だということがわかると思います。ぜひ一度使ってみてください。細かい説明はしません。




Leave a Reply