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

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

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

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

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

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

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

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

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

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

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

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

このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  
 

この記事のURL「https://dm2.co.jp/2017/05/wordpressstylecss.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2017/05/wordpressstylecss.html」をQRコードで表示「https://dm2.co.jp/2017/05/wordpressstylecss.html」
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。