WordPressテーマ「Twenty Ten」をカスタマイズする

シンプルなデザインにカスタマイズしてみました。

プレビュー

全体像（↓クリックするとより大きい画像を見れます）

ナビゲーション部分（↓ホバーすると色が変わるように指定）

記事部分（↓記事内の写真に枠線とシャドウを指定）

コード

CSS（元のテンプレートのCSSに追加記述しています）

@charset "utf-8";

/* =Custom
-------------------------------------------------------------- */

ul {
	list-style-type:none;	
}

#main {
	padding:40px 0 30px 0;	
}

body {
	font-family:
		"ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif;

}
#wrapper {
	margin: 0 auto;
	padding:0;
	width: 960px;
	background: #fff;
	margin-top: 20px;
	
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-ms-border-radius:15px;
	-o-border-radius:15px;
	-border-radius:15px;
	
	-moz-box-shadow:2px 1px 10px #333;
	-webkit-box-shadow:2px 1px 10px #333;
	-ms-box-shadow:2px 1px 10px #333;
	-o-box-shadow:2px 1px 10px #333;
	-box-shadow:2px 1px 10px #333;
}

#header {
	padding:0;
}

#header h1{
	font-size:36px;
	background-color:#1C2E3C;
	padding:20px;
	
	-moz-border-radius:15px 15px 0 0;
	-webkit-border-radius:15px 15px 0 0;
	-ms-border-radius:15px 15px 0 0;
	-o-border-radius:15px 15px 0 0;
	-border-radius:15px 15px 0 0;
	
}
#header h1 a {
	text-decoration:none;
	color:#fff;
}
#header h1 a:hover {
	text-decoration:underline;
}

#header h2{
	padding:20px 0 0 20px;
}

.menu-navmenu-container {
	width:960px;
	margin:0 0 0 5px;
}

#menu-navmenu li {
	background-color:#000;
	float:left;
	width:110px;
	height:20px;
	padding:10px;
	text-align:center;
	
}
#menu-navmenu li a {
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	display:block;
	
}
#menu-navmenu li:hover {
	background-color:#f60;
}

#content {
	margin:0 280px 0 15px;	
}

#content p, #content ul, #content ol, #content dd, #content pre, #content hr {
	margin:0;	
}

#content img {
	border:3px solid #fff;	
	-moz-box-shadow:2px 1px 10px #333;
	-webkit-box-shadow:2px 1px 10px #333;
	-ms-box-shadow:2px 1px 10px #333;
	-o-box-shadow:2px 1px 10px #333;
	-box-shadow:2px 1px 10px #333;
}

.post {
	background-color:#eee;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-ms-border-radius:15px;
	-o-border-radius:15px;
	-border-radius:15px;
	
	margin:0 0 20px;
	padding:20px;
	overflow:auto;
}

.post h2 a {
	text-decoration:none;
	color:#000;
	border-left:10px solid #1C2E3C;
	padding:0 0 0 10px;
}

.date {
	font-weight:bold;	
}

.post-categories {
	clear:both;
}
.post-categories li {
	float:right;	
	padding:10px;
}

.body {
	margin:0;
}

.next {
	float:right;	
}

#footer {
	clear:both;
}

#footer ul li {
	text-align:center;
	margin:30px 0;
	float:left;
	padding:5px 20px;
	border-left:2px solid #aaa;
}
#footer ul li:first-child {
	border:none;
}


#footer ul li a {
	color:#000;
	text-decoration:none;
}
#footer ul li a:hover {
	text-decoration:underline;
}

#calendar_wrap {
	margin:0;
	padding:10px;
	background-color:#eee;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-ms-border-radius:15px;
	-o-border-radius:15px;
	-border-radius:15px;
}
#wp-calendar tbody td {
	background-color:#000;
	color:#fff;
}

.widget-title {
	text-align:center;	
}

#main .widget-area ul ul {
	margin:0;
	padding:10px;
	list-style-type:none;
	background-color:#eee;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	-ms-border-radius:15px;
	-o-border-radius:15px;
	-border-radius:15px;
}

#main .widget-area ul ul li {
	padding:10px 0;
}

index.php

<?php get_header(); ?>

<!-- ▼#container -->
<div id="container">

<!-- ▼#content -->
<div id="content" role="main">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<!-- ▼.post -->
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>


<div class="date"><?php the_time('Y年m月d日 H:i'); ?></div>
<div class="body"><?php the_content(); ?></div>
<div class="meta">
	<?php the_category(); ?>
	<?php the_tags('ul class="post-tags"><li>','</li><li>','</li></ul>'); ?>
</div>
</div>
<!-- ▲.post -->
<?php endwhile; endif; ?>


<!-- ▼.navigation -->
<div class="navigation">
<div class="next"><?php next_posts_link('次のページ &raquo;'); ?></div>
<div class="previos"><?php previous_posts_link('&laquo; 前のページ'); ?></div>
</div>
<!-- ▲.navigation -->

</div>
<!-- ▲#content -->
</div>
<!-- ▲#container -->

<div id="side">
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' );	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- ▼#warapper -->
<div id="wrapper" class="hfeed">
<!-- ▼#header -->
<div id="header">
<h1><a href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a></h1>
<h2><?php bloginfo('description')?></h2>
	
<?php wp_nav_menu(); ?>
</div>
<!-- ▲#header -->
<!-- ▼#main -->
<div id="main">

footer.php

</div>
<!-- ▲#main -->
<!-- ▼#footer -->
<div id="footer" role="contentinfo">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<!-- ▲#footer -->
</div>
<!-- ▲#warapper -->
<?php wp_footer(); ?>
</body>
</html>

single.php

<?php get_header(); ?>

<!-- ▼#container -->
<div id="container">

<!-- ▼#content -->
<div id="content" role="main">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<!-- ▼.post -->
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>


<div class="date"><?php the_time('Y年m月d日 H:i'); ?></div>
<div class="body"><?php the_content(); ?></div>
<div class="meta">
	<?php the_category(); ?>
	<?php the_tags('ul class="post-tags"><li>','</li><li>','</li></ul>'); ?>
</div>
</div>
<!-- ▲.post -->
<?php endwhile; endif; ?>


<!-- ▼.navigation -->
<div class="navigation">

<div class="next"><?php next_post_link(); ?></div>
<div class="prev"><?php previous_post_link(); ?></div>
</div>
<!-- ▲.navigation -->
<?php comments_template(); ?>
</div>
<!-- ▲#content -->
</div>
<!-- ▲#container -->

<div id="side">
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

page.php

<?php get_header(); ?>

<!-- ▼#container -->
<div id="container">

<!-- ▼#content -->
<div id="content" role="main">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<!-- ▼.post -->
<div <?php post_class(); ?>>
<h2><?php the_title(); ?></a></h2>

<div class="body"><?php the_content(); ?></div>
</div>
<!-- ▲.post -->
<?php endwhile; endif; ?>

</div>
<!-- ▲#content -->
</div>
<!-- ▲#container -->

<div id="side">
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

coments.php

<!-- ▼#comments -->
<div id="comments">
<?php if ( post_password_required() ) : ?>
<p class="nopassword"><?php _e( 'この記事を閲覧するにはパスワードが必要です。', 'twentyten' ); ?></p>

<?php
return;
endif;
?>

<?php if ( have_comments() ) : ?>
<h3 id="comments-title"><?php comments_number(); ?></h3>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ): ?>

<!-- ▼.navigation -->
<div class="navigation">
<div class="nav-previous"><?php previous_comments_link(); ?></div>
<div class="nav-next"><?php next_comments_link(); ?></div>
</div> 
<!-- ▲.navigation -->
<?php endif; ?>

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments')): ?>

<!-- ▼.navigation -->
<div class="navigation">
<div class="nav-previous"><?php previous_comments_link(); ?></div>
<div class="nav-next"><?php next_comments_link(); ?></div>
</div>
<!-- ▲.navigation -->

<?php endif; ?>

<?php else:
if(!comments_open()): ?>
<p class="nocomments">コメントは受け付けていません。</p>
<?php endif;
endif; ?>

<?php comment_form(); ?>

</div>