Standing Tall

あれとかこれとか

Standing Tall header image 2
２００７年７月７日

新しいサイト”わーどぷれすっ！”をオープンしました。

今後はWordPress関連の話題は全部このサイトに投稿していきます。プラグイン一覧もこの新サイトに移しましたので、ドウゾよろしくお願いします。

WordPress テーマの詳説：第一章

2005 年 5 月 8 日
投稿者: tai

サイドバーを修正する

だいぶよくなったけど、フッターが画面の幅いっぱいに広がっていない。

Website

サイドバーがフッターの横まで伸びている。

Layout

これも単純な問題で、二つの変更で修正することができる。まず最初に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内に入れることによって水平罫線は横幅いっぱいに広がるようになった。

Website

ページ: 1 2 3 4 5 6 7 8

タグ: 7 件のコメント

Leave A Comment

7 responses so far ↓