WordPressのテーマ5種類を比較して、HTMLとCSSの書き方を考えてみました
HTMLもCSSもまるで勉強不足なままテーマを作ってしまったので、このブログのテーマって見た目はなんとか「ブログっぽい形」になっているものの、だめなところだらけなのです。
今回、このめちゃくちゃなHTMLとCSSを修正するために、WordPress既存のテーマを参考にしようと思い、5種類のテーマを比較してみました。とくに着目したのはHTMLのアウトラインについてと、CSSでの「float」の使い方です。
HTMLのアウトライン（階層構造）とCSSでのレイアウト方法がひどい
HTMLのこと
このテーマを作ったときには、アウトライン（階層構造）がどうなっているかなんて、全く意識しませんでした。見出しタグ（h1、h2…）の使い方についても、ただ「トップページではブログのタイトルだけをh1に」とか「記事ごとのページでは記事のタイトルをh1にしたほうがいい」とか断片的に知ったことをもとに、なんとなくテンプレートファイルを作ってしまいました。
いま、このブログのトップページなどで出力されるHTMLのアウトラインはたぶん、こうなっています（Chrome拡張機能のHTML5 Outlinerでチェックしました）。
- ブログのタイトル（h1）
- エントリータイトル（h2）
- エントリータイトル（h2）
- エントリータイトル（h2）
ウィジェットのタイトルには見出しタグを使っていないので（フォントを大きくするためにクラス名をふっているだけ…）、サイドバーとフッターは全部、いちばん下のエントリーに続いている感じなんですよね。
初心者向けのテーマのサンプルファイルを改めていくつか見てみたところ、サイドバーのコンテンツごとのタイトルにはh2またはh3、コメント欄など記事に関連するコンテンツのタイトルにはh3を使っていることが多いみたいです。
ともあれ、見出しによって階層みたいなものが生成されているということ、その階層みたいなものがHTMLにとってとても大切だということ、それから、HTML5にはセクションをあらわす要素がいくつかあって、それを使うことでよりはっきりとしたアウトラインを生成できるらしい！ということなどを、つい最近になってようやく知ったのです。
ですがどうも、ただdiv要素をセクション要素に書き換えれば正しいアウトラインになるというものでもないようで…。
そもそもこのセクションをあらわす要素って積極的に使うべきなのか？使うのならどこに何を使うのが適切なのか？見出しタグはアウトラインには関係なくなっちゃうの？などなど、調べてみてもちゃんと理解することができませんでした。
CSSのこと
もうひとつ気になっているのがCSSの「float」プロパティの使い方です。フロート、たくさん使っています。段組（カラム）をつくったり、サムネイル画像と本文などを横並びにしたり、「続きを読む」ボタンを右側にもってきたり…。
ですが、フロートの解除の仕方がかなりいい加減なのです。どうやら「clearfix」っていう手法がよく使われているようなのですが、どこにどう書くのが正解なのか、やっぱりまだわかりません。
WordPress既存のテーマ5種類のアウトラインとレイアウトを比較してみました
そこで、正しいアウトラインと正しいレイアウトを学ぶために、HTML5で作られている5種類のテーマのテンプレートファイルをのぞいて、ちょっと比較してみることにしました。
準備！
PHPファイルのなかみをのぞいて、まず、以下に関係する記述を探し、比較用のシンプルなHTMLファイルを作りました。
- セクションをあらわす要素（section、article、nav、aside要素）
- header要素とfooter要素
- 全体のレイアウトに使われている（フロートされていたり解除されていたりする）div要素
CSSファイルはこんなふうに用意しました。
- section、article、nav、aside要素と、header要素とfooter要素に背景色を指定
- フロートされているdiv要素にborder（実線）
フロートの解除に関する部分は、以下のようにborder（破線）を使いました。
- 「clearfix」が使われているところ（div要素のうしろ（after）にcontent:””;とかclear:both;とかとか）
- div要素自体にclear:both;がかけられているところ
そして、上に挙げた項目に関すること以外はほとんど消してしまいます。
サンプル1：オーソドックスな2カラムのテーマ
アウトライン（HTML5 Outlinerでチェック）
- サイトのタイトル（h1）
- Untitled NAV
- エントリータイトル（h1）
- エントリータイトル（h1）
- Untitled NAV
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
気になったところ（HTML）
- コンテンツ（記事）の中にもheaderやfooterが使えるのですね。
- section要素は使われていませんでした。
- サイドバーは、ウィジェットひとつずつがaside要素になっていました。
気になったところ（CSS）
- 2つのカラムにそれぞれ「float:left」と「float:right」が指定されていて、
- 2つのカラムを包んでいる部分>などに「clearfix」が使われていました ※
- それから、footer要素にclear:bothって書いてありました。
※
.wrapper:before,
.wrapper:after,
.entry-header:before,
.entry-header:after{
display: table;
content: "";
}
.wrapper:after,
.entry-header:after {
clear: both;
content: "";
}
/*clearfixが使われている要素にグレーの破線*/
.wrapper,
.entry-header{
margin: 5px auto;
border: 2px dashed dimgray; padding: 10px;
}
サンプル2：ページ最上部にナビゲーションメニューがあるテーマ
アウトライン（HTML5 Outlinerでチェック）
- サイトのタイトル（h1）
- サイトのタイトル（h1）
- Untitled SECTION（h1）
- Untitled SECTION（h1）
- エントリータイトル（h2）
- エントリータイトル（h2）
- Untitled ASIDE
- ウィジェットタイトル（h6）
- ウィジェットタイトル（h6）
- ウィジェットタイトル（h6）
- サイトのタイトル（h1）
気になったところ（HTML）
- section要素が使われています。要素内で見出しが使われていないと「Untitled～」ってなるみたいです。
- サンプル1とちがい、サイドバー全体がaside要素、ウィジェットひとつずつがarticle要素になっていました。
- こちらではページャーにnav要素が使われていません。
気になったところ（CSS）
- footerにもclearfixの記述がありました。サンプル1のレイアウト方法とちょっと違うようです。
.footer:before,
.footer:after,
#section:before,
#section:after{
content: " ";
display: table;
}
.footer:after,
#section:before,
#section:after{
clear: both;
content: " ";
}
.footer,
#section{
border: 2px dashed dimgray;
padding: 10px;
}
サンプル3：3カラム／ナビゲーションメニューが2つあるテーマ
アウトライン（HTML5 Outlinerでチェック）
- サイトのタイトル（h1）
- Untitled NAV
- Untitled NAV
- エントリータイトル（h2）
- エントリータイトル（h2）
- Untitled NAV
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
気になったところ（HTML）
- こちらもsection要素は使われていませんでした。
- aside要素は、サンプル1と同く、ウィジェットひとつずつに使われているみたいです。
気になったところ（CSS）
- フロートとフロートの解除はサンプル1と似ているのですが、
- clearfixの記述が少なくて、かわりにたくさんのdiv要素に対して「overflow:hidden」の指定がありました。
サンプル4：投稿日時の表示がおしゃれだったテーマ
アウトライン（HTML5 Outlinerでチェック）
- ウィジェットタイトル（h3）
- Untitled NAV
- エントリータイトル（h2）
- エントリータイトル（h2）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
気になったところ（HTML）
- サイトのタイトルに見出しタグが使われていなくて、ページ内にh1要素がありませんでした。
- アウトラインがどうしてこうなるのか（ウィジェットがいちばん上になってる）ちっともわからない！※
- このテーマではサイドバーにaside要素が使われていませんでした。
- コンテンツ（記事）内のフッターにfooter要素は使っていないみたいです。
- ソーシャルアイコンが並んでいたところ（メニュー4、5、6のところ）には、
nav要素が使われていませんでした。
※こんなかんじ
<!-- 省略 --> <body> <div id="container"> <header id="top"><!-- 省略 --></header> <nav><!-- 省略 --></nav> <div id="main" role="main" class="clearfix"> <div id="left"> <article class="post"> <header><h2 class="posttitle">エントリータイトル（h2）</h2></header> <!-- たくさん省略 --> </article> <article class="post"> <header><h2 class="posttitle">エントリータイトル（h2）</h2></header> <!-- たくさん省略 --> </article> <div class="pagination">ページャー（1,2...）</div> </div><!-- #left --> <div id="right"> <h3 class="widgettitle">ウィジェットタイトル（h3）</h3> <!-- 省略 --> <h3 class="widgettitle">ウィジェットタイトル（h3）</h3> <!-- 省略 --> <h3 class="widgettitle">ウィジェットタイトル（h3）</h3> <!-- 省略 --> </div><!-- #right --> </div><!-- #main --> <footer><!-- 省略 --></footer> </div><!--#container --> </body> </html>
気になったところ（CSS）
- いちばん大きなclear:bothはどうして書かなくてはいけないの？
サンプル5：見た目はサンプル1と似ていたけれど中身がぜんぜん違う、2カラムのテーマ
アウトライン（HTML5 Outlinerでチェック）
- Untitled BODY
- Untitled NAV
- Untitled SECTION
- エントリータイトル（h2）
- Untitled SECTION
- エントリータイトル（h2）
- Untitled SECTION
- エントリータイトル（h2）
- Untitled ASIDE
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
- ウィジェットタイトル（h3）
気になったところ（HTML）
- こちらも、サイトのタイトルに見出しタグが使われていなくて、ページ内にh1要素がありませんでした。
- 階層構造はこのテーマがいちばん複雑にみえます。
- サイドバーは、全体がaside要素、ウィジェットひとつずつがsection要素でした。
- コンテンツ（記事）内の一部にもsection要素がありました。
気になったところ（CSS）
- clearfixのcontentプロパティ、このテーマだけ「content:”.”」となっていました。中身があるのとないの、どういう違いがあるのでしょう？
/* Clearfix */
.group:after{content:"."; display: block; height: 0; clear: both; visibility: hidden; }
結局どうやって修正するのがベストなのでしょうか…
長々と書いてしまいましたが、こんなかんじで5種類のテーマの構造を見比べてみました。セクション要素の使い方も見出しタグの使い方も、さまざまなのですね。こんなに違うものだとは思っていなかったので、びっくりしました。
どれかを参考にして修正しようと思っていたのですが、どれがいいのだろう…。詳しい方のお話がききたいです。
