Twenty Twelveの文字サイズ等の変更

現在、このブログで使っているのはTwenty Twelveと言うWordPress公式テーマです。しかし、文字サイズがちょっと小さめで読みにくいと思っていました。そこでTwenty Twelveのスタイルシートをざっと見て、文字サイズなどを変更することにしました。

まず、構造を調べるとどうやら、モバイル・ファーストの構造でした。しかし、body要素に割り当ててある文字サイズを変更すると、全てのデバイスできれいに文字が大きくなる仕組みになっていました。これなら簡単で、そのままでもいいのですが、やってみると少し理想からはずれるようなので、デバイスごとに簡単な調整を加えました。

それでまず基本の文字サイズですが、こうしました。

body {
	font-size:6vw;
}

最初16pxで指定したところ、大体良かったのですが、やはり、スマホ画面で文字が微妙に小さいのです。そこで、6vwにしました。

vwというのは、view widthの略で、画面の横幅を100vwとしてサイズを決める時の単位です。6vwなら、画面の横幅の100分6の横幅の文字サイズと言うことになります。

当然そうなると、パソコン画面で文字が巨大になってしまいます。そこで、画面サイズにより切り分け、パソコン画面で16pxになるようにしました。

Twenty Twelveでは、下記の切り分け方をしています。

@media screen and (min-width: 600px) 

@media screen and (min-width: 960px) 

この際、幅600px以上の画面はパソコンの文字サイズでいいかなと考えて、下記のようにしてみました。

@media screen and (min-width: 600px) {

body {
	font-size:16px;

}

あと記事のタイトルの文字サイズが小さすぎるし、太字にもなっていません。これを修正しました。

h1.entry-title {
	font-size:2rem !important;
	font-weight:bold;
}

最初は、記事ページだけでいいかと思って・・・

.single h1.entry-title

で指定してみましたが、やはりフロントページもちゃんとしないと変でしたので、前述のようなコードに変えました。

「!important」はないとだめみたいです。

remというのはroot emの略で、基本となる文字サイズの何倍にするかで決める際に使う単位です。%だと基本の文字サイズを基準にせず、親要素に対する倍率になるのです。

あと、記事内の見出しに、h2やh3もたまに使うので、これも文字サイズを指定し、かつ、飾りも付けておきました。

.entry-content h2 {
	font-size:1.7rem !important;
	border-left:5px solid #00ff00;
	border-bottom:2px solid #00ff00;
	padding-left:5px;
}

.entry-content h3 {
	font-size:1.5rem;
	border-bottom:5px dotted #00ff00;
	padding-left:5px;
}

h2の方はboder-leftで文字列の左側に縦に太さ5pxの緑色(#00ff00)の実線(solid)を引いて、border-bottomで文字の下に2pxの太さの緑色(#00ff00)の実線(solid)を横に引いてみました。左の縦線に文字がくっつきすぎるので、padding-leftで5pxの間隔を空けました。

h3の方は下の横線だけですが、こちらは点線(dotted)にしました。点線の太さはいろいろ試しましたが、5pxとしました。10pxにするととても笑えましたが、やめておきました。こちらは点線の左端と合わせるため、padding-leftを5pxとしてあります。これがないと、文字が飛び出て変です。

これでちょっとはh2とh3が見やすくなったかもしれません。

あと前から気になっていたのは、リンク色が青色なのはいいのですが、薄すぎることです。これでは青ではなく水色ですよね。今回しっかり青色にしてやりました。コードはこれです。

a {
	color:#0000ff;
}

たったこれだけですが、まさに理想のリンク色になりました。

まとめると、子テーマまたは「外観>カスタマイズ」の「追加CSS」のどちらかに以下のコードを追加すればいいです。

body {
	font-size:6vw;
}

@media screen and (min-width: 600px) {

body {
	font-size:16px;

}

}

h1.entry-title {
	font-size:2rem !important;
	font-weight:bold;
}

.entry-content h2 {
	font-size:1.7rem !important;
	border-left:5px solid #00ff00;
	border-bottom:2px solid #00ff00;
	padding-left:5px;
}

.entry-content h3 {
	font-size:1.5rem;
	border-bottom:5px dotted #00ff00;
	padding-left:5px;
}

a {
	color:#0000ff;
}

それにしても、Twenty Twelveはシンプルなコードになっていて、扱いやすいです。Twenty Seventeenなんて、コードが複雑すぎて、死にますね(笑)。しかし、これで、読みにくいTwenty TwelveもTwenty Seventeen並に読みやすくなったと思います。

以上、WordPressのブログで、テーマとしてTwenty Twelveを使っている方の参考になれば、幸いです。

関連ページ:
Change Font Size on Blog (Twenty Twelve) (WordPress Development Stack Exchange)
Twenty Twelve How to increase font-size without making page wider (WordPress.org)