サイドバーを修正する
だいぶよくなったけど、フッターが画面の幅いっぱいに広がっていない。
サイドバーがフッターの横まで伸びている。

これも単純な問題で、二つの変更で修正することができる。まず最初にfooter.phpを開く必要がある。header.phpと同じようにこのファイルもdiv要素にはさまれたコードのセクションから成る。この例ではこの要素はID「footer」を持っている。スタイルを整える前に、道に迷った「hr(水平方向の罫線)」をdiv内に移動しよう。
<hr />
<div id="footer">
<p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
. . .
上のコードを次のように:
<div id="footer">
<hr />
<p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
. . .
理由は後で分かるだろう。では、スタイルを追加しよう:
#footer
{
clear: both;
}
これはフッターのどちらの側にも要素を浮かせない(floatさせない)ようにブラウザーに伝えるものだ。サイトを見てみると、サイドバーがきちんと適切な場所に収まって元のデザインにマッチしているのが分かるだろう。フッターの「hr」をdiv内に入れることによって水平罫線は横幅いっぱいに広がるようになった。
タグ: 7 件のコメント
7 responses so far ↓
[...] Japanese translation of part one of the WordPress theme dissection, written by Tai over at Tekapo. Nice work Tai, and thanks for the translation! Leave a Reply [...]
WordPress テーマの詳説:第二章
「Dissection of a WordPress theme: Part 2」の訳「WordPress テーマの詳説:第二章」がやっと終了。
この章では第一章の修正から入って、CSSのちょっとした解説やら各ブラウザーへの対応やらで個…
[...] WordPress テーマの詳説:第一章 [...]
[...] http://tekapo.com/st/2005/05/08/themeguide1/ [...]
[...] http://tekapo.com/st/2005/05/08/themeguide1/ [...]
[...] ーズに行くと思いますが、私は読みながら作業をしました。また、海外の分かりやすい解説の和訳も以下にあります。これをもっと以前に見つけたかった。 WordPress テーマの詳説:第一章 [...]
[...] WordPress テーマの詳説 (原文: Dissection of a WordPress theme) [...]