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

これも単純な問題で、二つの変更で修正することができる。まず最初に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内に入れることによって水平罫線は横幅いっぱいに広がるようになった。
コメント/トラックバック5個 ↓
1 UrbanGiraffe » Japanese translation // 2005年 5月 11日 @ 5:07 AM
[...] 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 [...]
2 Standing Tall // 2005年 10月 28日 @ 4:20 PM
WordPress テーマの詳説:第二章
「Dissection of a WordPress theme: Part 2」の訳「WordPress テーマの詳説:第二章」がやっと終了。
この章では第一章の修正から入って、CSSのちょっとした解説やら各ブラウザーへの対応やらで個…
3 WordPress導入レポ・テーマ | 12-09.net // 2008年 4月 24日 @ 4:15 PM
[...] WordPress テーマの詳説:第一章 [...]
4 テーマ作成、修正の参考和訳ページ | setting_web // 2008年 5月 28日 @ 11:14 AM
[...] http://tekapo.com/st/2005/05/08/themeguide1/ [...]
5 がじゅまろの樹» ブログアーカイブ » 必須情報は忘れるためにある // 2008年 6月 22日 @ 11:24 AM
[...] http://tekapo.com/st/2005/05/08/themeguide1/ [...]
コメントをドウゾ!