WordPress デザインブック HTML5&CSS3準拠
パーツの準備
各パーツの詳細についてはSTEP 1-1(P.20)を参照してください。
サイト名
/* サイト名 */ .site h1 a {color: #000000; text-decoration: none} .site h1 {margin: 0; font-size: 30px} .site p {margin: 0; font-size: 12px}
コピーライト
Copyright ©
/* コピーライト */ .copyright p {margin: 0; color: #666666; font-size: 14px}
記事
>
/* 記事 */ .kiji h1 {margin-top: 0; margin-bottom: 10px; font-size: 36px} .kiji p {margin-top: 0; margin-bottom: 20px}
概要
>
/* 概要 */ .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');
メニュー
'post', 'posts_per_page' => '5' ) ); if( $myposts ): ?>
/* メニュー */ .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}
段組み(基本)
BOX1
BOX2
/* BOX1とBOX2を横に並べる設定 */ .container:after {content: ""; display: block; clear: both} .box1 {float: left; width: 50%} .box2 {float: left; width: 50%}
段組み (レスポンシブWebデザイン)
BOX1
BOX2
@media (min-width: 768px) { /* BOX1とBOX2を横に並べる設定 */ .container:after {content: ""; display: block; clear: both} .box1 {float: left; width: 50%} .box2 {float: left; width: 50%} }
Copyright © エビスコム / ソシム