Luxeritas タイトル見出しを左右の余白まで拡げる

文章を読む際に、人間の目は左右の往復の幅が大きいと疲れ易いとの事。
一行の長さは80バイト、日本語にして40文字以内に収めるのが良いとか。
40文字というと、16px のフォントで横幅 640px になります。
当サイトも左右に余白を設けて、この横幅に本文が収まる様にしています。
しかし、タイトルの見出しもこの幅になってしまい、1文字だけ改行されていたりすると何だか気持ち悪い。
タイトルはフォントサイズも違うし、この横幅を超えて文字数を増やそうというのが今回のテーマです。

Luxeritas のコンテンツ領域設定

Luxeritas の左右の余白の調整は「Luxeritas」→「カスタマイズ (外観)」→「コンテンツ領域とサイドバー」で行えます。
コンテンツ領域のパディングの「コンテンツ右」と「コンテンツ左」の値がメインカラム幅に対しての左右の余白になります。デフォルトは 68px。

Luxeritas の CSS ソース

コンテンツ領域のパディングがデフォルト 68px での Luxeritas が生成する CSS ソースを見てみると

@media (min-width:992px){
 .grid{
  padding-left: 68px;
  padding-right: 68px
 }
}

となっています。

@media (min-width:992px) というのは、横幅 992px 以上の端末でこの条件を適用するという事。
デスクトップやタブレットを横向きにした時が大体これに当たります。
スマホで見た時には上記設定より小さい値のパディングが自動的に適用される様です。
なので、今回は 992px 以上を対象にして修正して行きます。

子テーマの CSS を編集

子テーマのスタイルシートにタイトルの見出しを左右に拡げる値を書き込みます。
「Luxeritas」→「カスタマイズ (外観)」→「文字サイズ」の「記事のタイトル : H1」で指定した値がタイトルのフォントサイズです。
デフォルトの文字サイズ 28px の等幅フォントで固定ページと投稿ページのタイトルを左右に1文字ずつ2文字拡げたい場合は

@media (min-width:992px){
 article .grid h1{
  margin-left: -28px;
  margin-right: -28px
 }
}

実際には、フォントの種類やブラウザの環境によって見え方は変わってきます。
WordPress Luxeritas 文字サイズの設定で難儀する
margin の値をコンテンツ領域のパディングで指定した値と同じにすれば全幅見出しにも出来ます。
又、css の h1 の部分を h2 や任意の要素にクラス名を付けて置き換える事も出来ます。
文中で横幅を拡げて協調したい時等に使えるのではないでしょうか。
ただ、パディングの値以上を指定するとコンテンツ幅をはみ出してレイアウト崩れが起こるので注意して下さい。