php24 サイドバーの設置

今回は、サイドバーを追加して、2カラムのサイトに変更していきましょう。

 

サイドバーの追加

</div>
<!– サイドバー部分 –>
<div id=”sidebar”>
ここにサイドバーが入ります。
</div>
<!– フッター部分 –>

細かい設定はスタイルシート側で行うため、記述は少なめです。

2カラムに変更

スタイルシートでサイドバーを右側に配置し、2カラム表示に切り替えていきましょう。

Tags: black, one-column, two-columns, custom-header, custom-menu
*/

/* ————— コンテナ ————— */
div#container{
width: 1000px;
margin: auto;
}
/* ————— コンテンツ ————— */
div#content{
width: 755px;
float: left;
}
/* ————— サイドバー ————— */
div#sidebar{
width: 220px;
float: right;
}
/* ————— ヘッダー ————— */

一番大きな枠組みのコンテナ部分をまず設定します。
本文が入るコンテンツを左に配置し、サイドバーを右に配置していきます。

ここまでの記述確認

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(); ?>
<p class=”postinfo”>
<?php the_date(); ?>
<?php the_time(); ?>
/記事カテゴリー:
<?php the_category(‘,’); ?>
</p>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>記事がありません</h2>
<?php endif; ?>
</div>
</div>
<!– サイドバー部分 –>
<div id=”sidebar”>
ここにサイドバーが入ります。
</div>
<!– フッター部分 –>
<div id=”footer”>
<p id=”copyright”>
Copyright &copy; <?php echo date(‘Y’); ?> <?php bloginfo(‘name’); ?>
All rights Reserved.
</p>
</div>
</div>
</body>
</html>

style.css

/*
Theme Name: sample
Theme URI: http://www.hogehoge.com
Author: oreore
Author URI: http://www.hogehogeblog.com
Description: iketerudesyo
Version: 1.0
Tags: black, one-column, two-columns, custom-header, custom-menu
*/

/* ————— コンテナ ————— */
div#container{
width: 1000px;
margin: auto;
}
/* ————— コンテンツ ————— */
div#content{
width: 755px;
float: left;
}
/* ————— サイドバー ————— */
div#sidebar{
width: 220px;
float: right;
}
/* ————— ヘッダー ————— */
div#header{
background-color: #66ccff;
padding-top; 40px;
padding-bottom: 100px;
}

div#header h1{
font-size: 2em;
margin: 0 20px;
}

div#header h1 a{
text-decoration: none;
}

div#header h2{
font-size: 1em;
margin: 10px 20px 0
}

関連記事