WordPress テーマの詳説：第二章

ステップ２ – ページ幅を縮める

今のところこのテーマはブラウザ画面に全幅で表示され、コンテンツとサイドバーは可変幅である。これはつまり、伸び縮みして利用可能な表示域を使用するわけだ。これはよいのだがいくつか問題点がある：

ブラウザ幅を最大にしたときに短いパラグラフが一つの横長の行で表示されてしまう
レイアウトが固定されないのですべての位置が保証できない
ブラウザの幅を最大にすると読みにくくなるし、最小にすると読めなくなる
Internet Explorer では幅を狭めると表示が乱れる

最適な行の長さに関しては多くの研究がなされていて、それによるとある程度短い方が一番読みやすいという結果が出ている。どの本や雑誌を開いても、ある程度大きな量のテキストは常に小さな列に分かれていて見失うことなく文章を目で追うことができる。

第一章ではデザインに空間を持たせるため２０ピクセルのマージンをページに入れた。これをもう一歩先に進めてみよう。ブログの一番の目的は読んでもらうことであり、ぎっしり詰まったような表示のせいで内容を読んでもらうのを思いとどまらせたくはない。

まず最初にすべてのマージンとパディングをリセットする。ブラウザによってばらつきがあるのでこれをなくす試みだ。これを行うには style.css の一番最初に全体的なスタイルを導入する：

*
{
padding: 0;
margin: 0;
}

アスタリスク（*）はすべてを意味しているので全体的なスタイルとして作用する。最初にこのスタイルを導入すれば通常のカスケーディング・ルールなら後で上書きすることができる。

では実際のテーマを見てみよう。

すべてのマージンとパディングを除去すると、すべてが一緒くたになってしまう。これは後ほど修正していくのでご心配なく。

ボディ・スタイルのリセット

では前回導入したスタイルをいくつか取り除いてみる。これを行うことにより柔軟性が増し、より適切な要素に対してスタイルを再導入することができるようになる。style.css のボディ・スタイルを空にする：

body
{
}

コンテンツを囲み込む

ページ幅を縮小するための最初のステップはサイドバーとコンテンツを囲む wrapper（ラッパー＝囲むもの/包むもの）の導入だ。これによりヘッダーとフッターに干渉せずにサイドバーとコンテンツ両方のスタイリングをすることができるようになる。実際に見ればよくわかるだろう。

index.php を次のように修正する：

index.php

強調表示している wrapper セクションを追加

<?php get_header(); ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>
<div class=“post”>
<h2 id=“post-<?php the_ID(); ?>”><a xhref=“<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

</div>

<p class=“postmetadata”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,‘’,‘<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
<!–
<?php trackback_rdf(); ?>

–>
</div>

<?php endwhile; ?>

</div>

<?php else : ?>

<h2 class=“center”>Not Found</h2>

<?php endif; ?>

</div>
<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

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

Standing Tall

ステップ２ – ページ幅を縮める

ボディ・スタイルのリセット

コンテンツを囲み込む

「WordPress テーマの詳説：第二章」への1件のフィードバック

あれとかこれとか