このブログを書きながらOsukiniサーバーで立ち上げたWordPress。
テスト投稿をしたりプラグインを少し入れたくらいで、デザイン編集は何もしていないのですが、このほぼデフォルト状態で既にValidatorエラーが出ているのが気に食わないので、直そうと思います。

バリデーション

バリデーションとは、プログラミング言語やマークアップ言語の記述が文法的に正しいかどうかをチェックすること。
サイトを作る人ならページのソースを見たことがあると思いますが、このソースの構文をチェックできるツールがあります。
HTMLの規格を決めているW3Cという団体が「Markup Validation Service」を提供しているので、ここが本家になります。あとは「(X)HTML5 Validator」というところも人気のようです。

Firefoxのアドオン「Html Validator」

サトはFirefoxのアドオンを使っています。いちいち別サイトを開いてURLコピペでチェック～とかしなくても、そのページの「ソースを表示」だけでチェックすることができるので楽です。
というかこれに慣れてしまって他に移る気がしないだけなんだけどね(´ﾟ艸ﾟ)

Html Validator :: Add-ons for Firefox
Html Validator for Firefox and Mozilla

で、前置き説明が長くなってしまいましたがここからが今日のテーマ。
Html Validatorを使ってWordPressサイトのトップページ(テーマはTwenty Twelve)のソースをチェックするとこんな感じ。

エラーがいくつか出てきました。そのうちの1つ目を解決してみようと思います。

hgroup要素

35行目がおかしいと言っているこのエラー。説明文が長いですが、最初の1文だけ読んでしまえば「hgroup要素はもう廃止されてますよ！」

The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading, or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class="subheading" element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.

該当するソース部分は下記の行番号2の部分。サイト名とサイト説明文を囲っている「hgroup」。

        

                
テストブログ
                
Just another WordPress site
        

「hgroup」は、ここでいうh1やh2など、連続して見出しがあるときにそれらをまとめるための要素なのですが、今年の4月に廃止されたんですよね。
(参考: plan on removing hgroup from spec)
今のところブラウザでの表示に影響は出ていないのですが、エラーが出るのはなんとなく気持ち悪いので、hgroupを削除します。

Twenty Twelveを書き換える

見出しのグループ化はdiv要素で代用しましょう。

header.phpを修正する

子テーマでのcssファイルの扱い方は前回紹介した通りですが、phpファイルに変更を加える場合は、まず親テーマのファイルをそのまま子テーマにコピーし、子テーマのファイル内で修正を加えます(functions.phpを除く。それについてはまた別の機会に)。

今回はheader.phpに手を加えます。
親テーマであるTwenty Twelveのheader.phpを子テーマのディレクトリにコピペ(ファイル名は必ず同じにすること！)。
36行目あたりに下記の記述があります。

hgroupをdivに書き換えます。クラス名は何でもいいですが、わかりやすいように「hgroup」にします。
要素についての細かい説明は省きますが、マークアップ例の通り、サブタイトルであるh2はpに書き換えます。

スタイルシートに追記する

サブタイトルはsite-headerクラスでデザインが指定されているので、その内容をp要素にも反映させます。
スタイルシートの「.site-header h2」を「.site-header p」に置き換えましょう。
まず親テーマのstyle.cssファイルから「.site-header h2」を探します。545行目あたりから…

.site-header h1,
.site-header h2 {
        text-align: center;
}
.site-header h1 a,
.site-header h2 a {
        color: #515151;
        display: inline-block;
        text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
        color: #21759b;
}
.site-header h1 {
        font-size: 24px;
        font-size: 1.714285714rem;
        line-height: 1.285714286;
        margin-bottom: 14px;
        margin-bottom: 1rem;
}
.site-header h2 {
        font-weight: normal;
        font-size: 13px;
        font-size: 0.928571429rem;
        line-height: 1.846153846;
        color: #757575;
}

それから1450行目

.site-header h1,
.site-header h2 {
        text-align: left;
}

1653行目

.site-header h2 {
        color: #000;
        font-size: 10pt;
        text-align: left;
}
.site-header h1 a,
.site-header h2 a {
        color: #000;
}

これらの「h2」を「p」に書き換えたものを、子テーマのstyle.cssに追記します(親テーマを上書き保存するのではなくてね)。
前回作成したcss(タイトルの色を変えたりしたやつ)に書き足したら、下記のような感じになると思います。

/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/

@import url("../twentytwelve/style.css");

/* =Basic structure
-------------------------------------------------------------- */

/* Header */
.site-header h1 a,
.site-header p a {
        text-align: center;
}
.site-header h1,
.site-header p {
        color: #008000; /* サイトタイトル(リンク)のカラー */
        display: inline-block;
        text-decoration: none;
}
.site-header h1 a:hover,
.site-header p a:hover {
        color: #ff0000; /* サイトタイトル(マウスオーバー時)のカラー */
}
.site-header p {
        font-weight: normal;
        font-size: 13px;
        font-size: 0.928571429rem;
        line-height: 1.846153846;
        color: #757575;
}

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
        .site-header h1,
        .site-header p {
                text-align: left;
        }
}

/* =Print
----------------------------------------------- */

@media print {
        .site-header p {
                color: #000;
                font-size: 10pt;
                text-align: left;
        }
        .site-header h1 a,
        .site-header p a {
                color: #000;
        }
}

これらをサーバーにアップロード。

Validatorで確認する

もう1度サイトのソースをチェックしてみます。

エラーが1つ消えました！


——————–

バリデーションの話もしつつ要素の話もしつつ子テーマの話もしつつだと長くなりすぎて上手く書けなかった…
HTMLやCSSの細かい話までもっていくと焦点がずれるので、そこは個々で確認をお願いいたします。サトも人様に説明できるレベルではないかもしれないので(笑)。

ていうかサーバーの勉強早くしろって話ですよねごめんなさい。