Standing Tall

あれとかこれとか

Standing Tall header image 2
2007年7月7日

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

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

WordPress テーマの詳説:第一章

2005年 5月 8日 · コメント5個 | とらっくばっくURL

サイドバーを修正する

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

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

カテゴリー: WP ヒント · WordPress

コメント/トラックバック5個 ↓

コメントをドウゾ!

お名前、メール、ウェブサイトの入力は必須ではありません
次のタグを使用することができます:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>