WordPressテーマを構築する際の(x)html・cssルール

Tweet mixiチェック

WordPressにてウェブサイトを構築する際、メニューや見出しなどコーディングを汎用的に行う必要があります。
汎用的なコーディングを行う際に気をつけなければいけない点がいくつかあるのでご紹介いたします。

汎用的なメニューのコーディング

• 必ず<ul>タグと<li>タグの組み合わせで記述してください。
• <li>はクラス指定が無い状態でも正しく表示されるようにCSSを記述してください。
  限られたメニューに特殊なデザインを施す場合は<li>タグへ任意のクラス指定が可能です。
  ただし<a>タグへはクラス指定ができませんので注意してください。
• メニューに画像を利用することも可能ですが、その場合はマウスオーバー時の画像を別途用意してください。
• メニューを多階層表示に対応させるには<ul><li>タグの入れ子に対応したCSSを記述してください。

例）メニューのhtml例

<ul>
	<li><a>メニュー</a></li>
</ul>

例）多階層メニューのhtml例

<ul>
	<li><a>親メニュー</a>
<ul>
	<li><a>子メニュー</a></li>
</ul>
</li>
</ul>

汎用的なサイドバーのコーディング

• 必ずdivタグ等のブロックタグにて1つのセクションを囲んでください。
  適当なクラス名を割り当てておくのも良いでしょう。
• セクションには必ず見出しタグ（見出しレベルは任意）を挿入してください。
• セクションと見出しの関係になっていればどういったタグでもかまいません（dlタグなど）
• 記事一覧やメニューには<ul>タグと<li>タグを使用しますので対応したCSSを記述してください。
• コンテンツにはメニューだけでは無くテキストや画像なども挿入されます。
  タグを使わない場合や、基本的なタグが利用された場合にでも対応できるようなCSSを記述してください。

例）divタグと見出しタグを使った場合

<div class="sidebar">
<h3>セクションタイトル</h3>
コンテンツ
</div>

例）dlタグを使った場合

<dl>
<dt>セクションタイトル</dt>
<dd>コンテンツ</dd>
</dl>

例）メニューが利用される場合

<div class="sidebar">
<h3>セクションタイトル</h3>
<ul>
	<li><a>メニュー名</a></li>
	<li><a>メニュー名</a></li>
</ul>
</div>

汎用的なコンテンツエリアのコーディング

• WYSIWYGエディタ、または基本的に利用されるであろうタグには必ずスタイルを指定しておいてください。
  <p><dl><dt><dd><ul><ol><li><blockquote><pre><h*><table><th><td><form><input><textarea><select>等
• ブロックタグが一切挿入されない状態でもデザインが保たれるようにCSSを作成してください。
• コンテンツエリアの外側はブロックタグに任意のクラスを指定したもので囲っておくと良いでしょう。

例）基本的なコンテンツエリアのサンプル

<div>
 <h2>見出しになります</h2>
 <p>テストの文章が入ります。<br />
 テストの文章です</p>
 <h3>小見出しになります</h3>
 <p>小見出しについてのテキストです</p>
 <blockquote site="http://test.com">
 引用文を記述します。
 </blockquote>
 <p>テストの文章です</p>
 <h3>お問い合わせフォーム</h3>
 <form action="" method="post">
 <table>
 <tr>
 <th>お名前</th>
 <td><input type="text" name="name" value=""></td>
 </tr>
 <tr>
 <th>内容</th>
 <td><textarea></textarea></td>
 </tr>
 </table>
 </form>
</div>

例）ブロックタグが一切挿入されないコンテンツエリアの例

<div>
 <h2>タイトルになります</h2>
 こういった文章が挿入されます。<br />
 このようなテキストが配置されるでしょう。
</div>

汎用的なコンテンツエリアのコーディング

• カレンダーは calendar_wrap というクラスのdivタグにて囲われます。
• 下記htmlを元にデザインを行ってください。

例）基本的なカレンダーのhtml

<div id="calendar_wrap">
 <table id="wp-calendar" summary="カレンダー">
 <caption>2011年5月</caption>
 <thead>
 <tr>
 <th scope="col" title="月曜日">月</th>
 <th scope="col" title="火曜日">火</th>
 <th scope="col" title="水曜日">水</th>
 <th scope="col" title="木曜日">木</th>
 <th scope="col" title="金曜日">金</th>
 <th scope="col" title="土曜日">土</th>
 <th scope="col" title="日曜日">日</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td colspan="3" id="prev">&nbsp;</td>
 <td>&nbsp;</td>
 <td colspan="3" id="next">&nbsp;</td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <td colspan="6">&nbsp;</td><td>1</td>
 </tr>
 <tr>
 <td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
 </tr>
 <tr>
 <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
 </tr>
 <tr>
 <td>16</td>
 <td><a href="http://test.blog.com/" title="記事タイトル">17</a></td>
 <td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
 </tr>
 <tr>
 <td>23</td><td id="today">24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
 </tr>
 <tr>
 <td>30</td><td>31</td><td colspan="5">&nbsp;</td>
 </tr>
 </tbody>
 </table>
</div>