今後スタイルシートでデザインしやすいよう、各パーツをdivタグでまとめていきましょう。
ただし、ここではスタイルシートのデザイン自体の記述は省略します。
記事全体をまとめる
<div id=”content”>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
～中略～
<?php endif; ?>
</div>
数記事をまとめて「記事全体」としてdivタグで囲みます。
また、idを「content（コンテンツ）」としておきましょう。
body内をまとめる
今度は、body内を大きく囲んでまとめましょう。
<body>
<!– コンテナ –>
<div id=”container”>
<!– ヘッダー部分 –>
～中略～
<?php endif; ?>
</div>
</div>
</body>
bodyタグ内を大きく「container（コンテナ）」としてdivタグで囲みます。
ここまでの記述確認
index.php
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<title>
<?php bloginfo(‘name’); ?>
</title>
<!– スタイルシート呼び出し –>
<link href=”<?php echo get_stylesheet_uri(); ?>” rel=”stylesheet” type=”text/css”>
</head>
<body>
<!– コンテナ –>
<div id=”container”>
<!– ヘッダー部分 –>
<div id=”header”>
<h1>
<a href=”<?php bloginfo(‘url’); ?>”>
<?php bloginfo(‘name’); ?></a>
</h1>
<h2>
<?php bloginfo(‘description’); ?>
</h2>
</div>
<!– コンテンツ部分 –>
<div id=”content”>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class=”post”>
<h3>
<a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
</h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>記事がありません</h2>
<?php endif; ?>
</div>
</div>
</body>
</html>