WordPress テーマの詳説:第二章

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

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

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

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

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

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

*
{
padding: 0;
margin: 0;
}

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

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

screen1.png

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

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

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

body
{
}

コンテンツを囲み込む

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

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

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

<?php get_header(); ?>

<div id=“wrapper”>

<div id=“content” class=“narrowcolumn”>

<?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>

<small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>
<div class=“entry”>
<?php the_content(‘Read the rest of this entry »’); ?>

</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 class=“navigation”>
<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div>

<div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div>

</div>

<?php else : ?>

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

<p class=“center”><?php _e(“Sorry, but you are looking for something that isn’t here.”); ?></p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>

<?php endif; ?>

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

</div>

<?php get_footer(); ?>

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

コメントは停止中です。