WordPressの本文文字サイズを大きめにするには「style.css」に文字サイズ情報を変更する情報を追加する

2017.05.22
この記事は約4分で読めます。

cssmojiookiku.jpgWordPressで構築したWEBサイトの文字サイズを大きめに変更したいという要望を多く聞くようになった。パソコンで見る分には文字サイズをある程度自由に変更できるが、スマホの場合は文字が小さいと読みにくいからだ。
とくに中高年は老眼の影響もあり小さい文字が読みにくい。中高年ユーザーがスマホでも文字を読みやすくできるようにするのはWEBサイトのおもてなしとして重要性を増しているように感じる。
今回はWordPressのビズベクトルというデザインテーマの例で本文文字を大きくしてみた。

WordPressの本文文字サイズを大きくする方法

管理画面で「外観」→「テーマの編集」

WordPressの管理画面で「外観」→「テーマの編集」をクリックすると種々のテンプレートを直接編集できる画面になる。右下のメニューの一番下にある「style.css」を編集すると文字サイズなどの情報を変更できるようになる。

元々の「style.css」は以下のとおり

@charset “utf-8”;
/*
Theme Name: BizVektor Global Edition
Theme URI: http://bizvektor.com/en/
Description: BizVektor theme will allow you to build a high-quality web site. It is possible to change the color, to switch to a completely different design. In addition, it is also possible to increase the number of designs by plug-ins.
Author: Vektor,Inc.
Author URI: http://www.vektor-inc.co.jp
Version: 1.1.2

Tags: two-columns, right-sidebar, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style,theme-options
Text Domain: bizvektor-global-edition
License: GNU General Public License
License URI: license.txt

BizVektor Global Edition WordPress theme, Copyright (C) 2014 Vektor,Inc.
BizVektor Global Edition WordPress theme is licensed under the GPL.
*/
.sticky{
font-size:1em;
font-weight:nomal;
padding:0px;
margin:1px;
}
.bypostauthor{}
.bypostauthor #comments li.comment .commentBox { border-color:#ccc; }

この下に本文の文字サイズについての情報を貼り付ければよい。
今回は基本の文字サイズを16ピクセルとし、本文の文字サイズを18ピクセルとして。
具体的な設定は以下のとおりである。

/* 以下は実験でサイト全体のフォントサイズ変更 */
/* サイト全体 */
body {
font-size: 16px;
font-size: 1rem;
text-rendering: optimizeLegibility;
color: #333;
}

/* 記事本文の文字 */
.entry-content {
font-size: 18px;
font-size: 1.125rem;
}

▼WordPressの管理画面

cssmojiookikuwp.jpg

これはベースフォントが１６ピクセルの場合の設定である。

ベースフォントのサイズが違う場合は以下のように設定を変えることもできるようだ。

ベースフォントが１６ピクセルの場合

/* サイト全体 */
body {
font-size: 16px;
font-size: 1rem;
text-rendering: optimizeLegibility;
color: #333;
}

/* 記事本文の文字 */
.entry-content {
font-size: 18px;
font-size: 1.125rem;
}

ベースフォントが１４ピクセルの場合

/* サイト全体 */
body {
font-size: 14px;
font-size: 1rem;
text-rendering: optimizeLegibility;
color: #333;
}

/* 記事本文の文字 */
.entry-content {
font-size: 16px;
font-size: 1.14285714rem;
}

サンプルとして、tohda.jpのWordPressをベースフォント１６ピクセルに変更してみた。
http://www.tohda.jp/news/wp130.html

参考になれば幸いである。