WordPress デザインブック HTML5&CSS3準拠 パーツの準備

各パーツの詳細についてはSTEP 1-1（P.20）を参照してください。

サイト名

<div class="site"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo( 'name' ); ?> </a></h1> <p><?php bloginfo( 'description' ); ?></p> </div> /* サイト名 */ .site h1 a {color: #000000; text-decoration: none} .site h1 {margin: 0; font-size: 30px} .site p {margin: 0; font-size: 12px}

コピーライト

<div class="copyright"> <p><?php bloginfo( 'description' ); ?></p> <p>Copyright © <?php bloginfo( 'name' ); ?></p> </div> /* コピーライト */ .copyright p {margin: 0; color: #666666; font-size: 14px}

記事

<?php if(have_posts()): while(have_posts()): the_post(); ?> <article <?php post_class( 'kiji' ); ?>> <h1><?php the_title(); ?></h1> <?php the_content(); ?> </article> <?php endwhile; endif; ?> /* 記事 */ .kiji h1 {margin-top: 0; margin-bottom: 10px; font-size: 36px} .kiji p {margin-top: 0; margin-bottom: 20px}

概要

<?php if(have_posts()): while(have_posts()): the_post(); ?> <article <?php post_class( 'gaiyou' ); ?>> <a href="<?php the_permalink(); ?>"> <h1><?php the_title(); ?></h1> <?php the_excerpt(); ?> </a> </article> <?php endwhile; endif; ?> /* 概要 */ .gaiyou a {display: block; color: #000000; text-decoration: none} .gaiyou a:hover {background-color: #eeeeee} .gaiyou h1 {margin-top: 0; margin-bottom: 10px; font-size: 20px} .gaiyou p {margin: 0; font-size: 14px} //概要（抜粋）の文字数 function my_length($length) { return 50; } add_filter('excerpt_mblength','my_length'); //概要（抜粋）の省略記号 function my_more($more) { return '…'; } add_filter('excerpt_more', 'my_more');

メニュー

<?php $myposts = get_posts( array( 'post_type' => 'post', 'posts_per_page' => '5' ) ); if( $myposts ): ?> <aside class="mymenu"> <h2>新着記事</h2> <ul> <?php foreach($myposts as $post): setup_postdata($post); ?> <li><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></li> <?php endforeach; ?> </ul> </aside> <?php wp_reset_postdata(); endif; ?> /* メニュー */ .mymenu h2 {margin-top: 0; margin-bottom: 10px; border-bottom: solid 2px #dddddd; color: #666666; font-size: 18px} .mymenu ul {margin: 0; padding: 0; list-style: none} .mymenu li a {display: block; padding: 10px 5px; color: #000000; font-size: 14px; text-decoration: none} .mymenu li a:hover {background-color: #eeeeee}

段組み（基本）

<div class="container"> <div class="box1"> BOX1 </div> <div class="box2"> BOX2 </div> </div> /* BOX1とBOX2を横に並べる設定 */ .container:after {content: ""; display: block; clear: both} .box1 {float: left; width: 50%} .box2 {float: left; width: 50%}

段組み （レスポンシブWebデザイン）

<div class="container"> <div class="box1"> BOX1 </div> <div class="box2"> BOX2 </div> </div> @media (min-width: 768px) { /* BOX1とBOX2を横に並べる設定 */ .container:after {content: ""; display: block; clear: both} .box1 {float: left; width: 50%} .box2 {float: left; width: 50%} }