解放区在住氷翠 緑の閃光

よくみかける言語設定【WordPress】

2016-03-08 22:24

<html lang="ja">

というもの。
さして重要ではないものだと思っていたのだけど、「HTML5」が出てきてから少しづつ重要になってきています。
Goole等の検索エンジンでもこれがあるとないのとでは言語の重要性が違ってきています。そのため、これを設定しておくと、そのユーザーの言語は何か?検索している言語は何か?

<html <?php language_attributes(); ?>>

これだけ。
ユーザー関数ですが、出力されるようになっているので、「echo」とか使う必要はありません。

また、これはこのWordpressに限ったことではありませんが、現在のHTMLの主流は「HTML5」ということで、さらに現在ではパソコンだけでなく、スマホやタブレットという端末も存在しています。そこで大きく関わってきます。

この言語設定をしない状態でそれぞれの端末で確認をしたところ、「<h2>」タグでスタイルを設定、単純に「padding」指定でこのブロックに対して余白を付けただけです。
ところが、何故か文字が上にずれている。
文字を「<p>」タグで囲んで「margin」を0にして背景色を付けてみるとよくわかります。文字が背景色より上に飛び出した状態になっています。
つまり、これは文字のベースラインがずれているということ。
どういうことか?
文章は基本的に英語ベースになっているのです。
その場合、日本語のベースラインより、アルファベットは下に下がった状態で表記されるので、日本語は上にずれた状態になっていまいます。
これを解消するために、「このページは日本語ベースですよ」っていうのをブラウザにわからせる必要があります。
それを行っているのが

<html lang="ja">

となるわけです。
これを付けてあげることで、ベースラインは日本語のものになり、上下のpadding設定が同じようにしてあげると、上下のアキは均等になります。
もちろん、文字が1行のときは、できれば「line-height:1em」をつけてあげた方がいいかと。