2007年7月7日

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

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

WordPress テーマの詳説:第二章

Registry First Aid will find these invalid entries and remove them from your registry. With Registry First Aid, your Windows registry will be always clean and correct, helping your programs load faster and speeding up your computer. Fast, easy to use, PC speed testing and benchmarking. PassMark PerformanceTest allows you to objectively benchmark a x blades keygen PC using a variety of different speed tests and compare the results to other computers. Twenty-eight standard benchmark tests are available in six test suites plus there are seven advanced testing windows for custom benchmarking. In addition to the standard tests, there are 7 summary results plus the overall PassMark Rating result. The benchmark results are xilisoft keygen presented as easy to read bar charts so that you dont need to spend hours studying the number to know the result. Timing for the tests is done using high resolution timers, which are accurate to approximately 1 millionth of a second on most PCs. Create professional-quality advertising, sophisticated print designs and electronic documents with PagePlus sims 2 keygen X5, the best-in-class desktop publisher.

ステップ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(); ?>

This entry was posted in WordPress, WP ヒント. Bookmark the permalink.

One Response to WordPress テーマの詳説:第二章

  1. Pingback: WordPress導入レポ・テーマ | 12-09.net

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>