このブログはテーマとして、最初、公式無料テーマのTwenty Seventeenを使おうと思ったのですが、ちょっと奮発して、Dolce & Vivaceの有料テーマ、ESPERANZAを使ってみることにしました。
このテーマは見た目はいいのですが、いくつか問題があるので、カスタマイズしないといけません。
一つは、文字の大きさが小さいことです。文字を小さくすると、見た目がいいのですが、読みづらいです。写真中心のブログならいいですが、文章を読んでもらうブログの場合、文字が小さいと、途中で投げ出されてしまう確率が高くなります。
それから、Twitterのツイートに記事のＵＲＬを入れた場合に表示される記事のアイキャッチ画像が表示されません。正しい表現で言うと、Twitterカードが表示されません。
文字サイズを変更する方法
ブログのタイトルの文字サイズ
これは「テーマオプション」でできます。「基本設定」に「ロゴテキスト （Webフォント）」というところがありますので、そこで「24 px」となっているのを好きな大きさに変えればいいです。私は、「36 px」にしました。
ちなみに、記事をスクロールダウンしても、ブログのタイトルは追従してきます。個人的には、ちょっとうっとうしいのですが、サイト名を覚えてもらうにはよいかもしれません。
ブログのタイトル以外の文字サイズを変更する
ブログのタイトルは「テーマオプション」の「基本設定」で簡単にできますが、それ以外は、「テーマオプション」の「Advanced」にある「独自スタイルシート(CSS)」にコードを書くか、「外観 ＞ Editor」にコードを書いて変更します。
「独自スタイルシート(CSS)」と「Editor」でどう違うかというと、前者に書くコードは、各ページのheadタグのところに出力されますが、Editorに書いたコードは「style.css」と言うファイル内のコードになるという点が違います。
動作は同じになるので、好みの問題です。私は、ページソースを見たら、自分の書いたCSSのコードが簡単に見えてしまうと言うのが嫌なので、Editorの方でコードを追加しました。
ちなみに、子テーマを作って、そちらを編集するという方法はやめた方がいいです。なぜかというと、どうやらESPERANZAは子テーマに対応していないようで、子テーマを作って有効化すると、画面が真っ白になります。
もしそうなってしまった場合、親テーマと子テーマの両方を削除して下さい。画面が戻ると思います。そして、再度、親テーマのESPERANZAをインストールして下さい。
メニューの文字サイズ
メニューの文字サイズが少し小さいです。何の話かというと、画面上の「サンプルページ」等の文字列のことです。まずこれをちょっと大きくしましょう。私は16pxに設定しましたが、15pxでもよいかもしれません。
.menu a {
font-size:16px;
}記事のタイトルの文字サイズ
下記のコードを追加します。私は「25px」にしましたが、これぐらいがちょうどいいかと思います。
h1.entry-title {
font-size:25px;
}記事本文の文字サイズ
下記のコードを追加します。私は「16px」にしました。そうすると、行間が狭くなりすぎるので、行間は「1.8em」にしてみました。
.post,.page {
font-size:16px;
line-height:1.8em;
}記事内に入れたh2やh3のところの文字サイズ
HTMLがわかっていて、記事内に手書きでh2やh3のタグを入れる場合、文字サイズが小さすぎて、読みにくいです。下記は、これを適切な文字サイズにするコードです。
h2はこれです。文字サイズは「23px」としました。
.post h2 {
font-size:23px;
}
こちらがh3です。文字サイズは「20px」としましたが、どうやら、そのままでは太字にはならないようなので、同時に太字にしてみました。
.post h3 {
font-size:20px;
font-weight:bold;
}つらつら文字を書いているだけで、h2やh3のタグをその中に入れたりしない人は、このコードを追加する必要性はありません。
ウィジェット内の文字サイズ
ウィジェットの文字サイズは、殺人的に小さいので、もしサイドバーのウィジェットに書かれている文章を読んでもらいたいのなら、文字サイズを変えた方がいいです。下記のコードが、ウィジェットの中の文字サイズを変えるコードになります。なお、行間も空けないと、読みにくいので、行間は「1.6」にしました。
.section {
font-size:110%;
line-height:1.6;
}ウィジェットのタイトルの文字サイズ
ウィジェットのタイトルは短いし、あまりしっかり読むこともないので、その文字サイズを変える必要性はあまりありませんが、いっそのこと、そこも変えてしまいましょう。下記のコードで変えられます。私は「120%」に設定しました。
.widget h2 {
font-size:120% !important;
}「!important」は必須です。
関連記事（You may also like...）一覧の記事タイトルの文字サイズ
.similar-entry-title a {
font-size:1.2rem;
}スマホ画面用の設定
パソコン画面用の設定は以上ですが、このままだと、スマホの画面では、うまく表示されません。そこで、スマホ画面用の設定を追加する必要があります。以下に紹介するコードは、上のコードの後に追加する形で書いて下さい。上のコードが前に書かれていることが前提ですので、その点間違いのないようにしましょう。
そして、その追加コードは下記のコードで囲みます。
@media (max-width: 600px) {
※スマホ用の追加コードはここに書く。
}スマホ画面でのメニューの文字サイズ
メニューの文字サイズは、何もしないと驚異的に小さいです。上記の設定で大きくなったと思いますが、それでもまだ小さいです。そこで、7vwと、ちょっと大きめのサイズにしてみました。vwで指定したのですが、嫌なら別にpxでもいいです。
.menu a {
font-size:7vw;
}スマホ画面でのh1の改行幅
スマホの画面では、改行が行われた際に、行間が狭すぎて、ちょっと読みにくいです。そこで、以下のコードを入れましょう。
h1.entry-title {
line-height:1.7em !important;
}「!important」は必須です。
スマホ画面での記事の文字サイズ
スマホの画面でもの記事の文字サイズですが、16pxでも読めなくはありません。しかし、16pxでは、ちょっと小さいのではないかと私は思います。そこで、6vwにしてみました。もちろん、pxで指定してもいいと思います。改行幅も指定しておかないと、読みにくいですから、1.8emにしてみました。
.post,.page {
font-size:6vw;
line-height:1.8em;
}スマホ画面でh2が改行されると重なる問題を解決する
上のパソコンのコードのままでは、スマホ画面でh2が改行されると行が重なります。これを解決するために、行間を広げます。
.post h2 {
line-height:1.7em;
}スマホ画面でh3が改行されると重なる問題を解決する
h3でも同じことが起きますので、同じように解決します。
.post h3 {
line-height:1.7em;
}スマホ画面でのウィジェットの中の文字サイズ
これが最大の問題です。文字が小さすぎるので、大きくしないと行けません。記事本文と同じ6vwでもいいのですが、微妙に小さくして5.5vwにしてみました。
.section {
font-size:5.5vw;
}これで格段に読みやすくなったと思います。
文字サイズ変更コードのまとめ
こんなのを一つ一つ設定するのは面倒くさいという方は、下記のコードをまとめてコピーして、sytle.cssやオプションの「追加コード」に貼り付けて下さい。
/* メニューの文字を大きくする。例えば、サンプルページとか。 */
.menu a {
font-size:16px;
}
/* 記事のタイトルを大きくする。 ----------------------------- */
h1.entry-title {
font-size:25px;
}
/* 記事の文字を大きくする。 ----------------------------- */
.post,.page {
font-size:16px;
line-height:1.8em;
}
/* 記事内に入れたh2のところの文字を大きくする。 ----- */
.post h2 {
font-size:23px;
}
/* 記事内に入れたh3のところの文字を大きくする。 ----- */
.post h3 {
font-size:20px;
font-weight:bold;
}
/* ウィジェット内の文字を大きくする。 --------------------- */
.section {
font-size:110%;
line-height:1.6;
}
/* ウィジェットのタイトルの文字を大きくする。 --------------------- */
.widget h2 {
font-size:120% !important;
}
/* 関連記事（You may also like...）一覧の記事タイトルの文字サイズを大きくする。 ------ */
.similar-entry-title a {
font-size:1.2rem;
}
/* レスポンシブ設定 ---- */
@media (max-width: 600px) {
/* スマホ画面でメニューの文字を大きくする。例えば、サンプルページとか。 */
.menu a {
font-size:7vw;
}
/* スマホ画面でh1が長くて改行されると改行幅がほとんどないので、行間を空ける。 ----- */
h1.entry-title {
line-height:1.7em !important;
}
/* スマホ画面でも記事の文字サイズを16pxにすると、小さすぎるので、もっと大きくする。 ----- */
.post,.page {
font-size:6vw;
line-height:1.8em;
}
/* スマホ画面でh2が長くて改行されると重なるので、行間を空ける。 ----- */
.post h2 {
line-height:1.7em;
}
/* スマホ画面でh3が長くて改行されると重なるので、行間を空ける。 ----- */
.post h3 {
line-height:1.7em;
}
/* スマホ画面でのウィジェットの中の文字を大きくする。 ----- */
.section {
font-size:5.5vw;
}
}まとめて貼るだけなので、簡単でしょう？
Twitterカードを表示するコードは次回紹介します。