【OnePress】でサイト全体の文字種と文字サイズを変更する方法

きれいなトップページができるのが最大のウリの【OnePress】。でも・・・通常の投稿や固定ページ(特に本文)の文字って小さくないですか??

調べたら14px。現在結構メジャーなのは16pxですから、やはりちょっと小さくて、若い人?でないと「字が小さくて読めない!!」ってなりそうですね(多分に漏れず私もそのうちの一人です)。

しばらく【OnePress】を使ったこのサイトデモを触ってて感じたのが、デザインを決めるCSSの記述が何となくおおざっぱであり、時にとても細かかったりするところ。

以前に公開した半角英字で入力した文字が、表示すると全て大文字になってしまう現象の解消方法でも紹介した通り、細かいところはとことん細かい仕様になっています。

これについては今回も同じではありますが、ひとまず細かく設定されている部分以外の文字列をざっくりと16pxにしてしまおうというのが今回の対処方法になります。

方法としてはCSSの基本に従って、テーマのCSSファイルの末尾、もしくはテーマカスタマイザー(管理画面から「外観」→「カスタマイズ」で出てくる画面一番下)の追加CSSへ以下の記述をコピペすればOKでは。

/***** サイト全体の文字種と文字サイズ *****/
body {
	/* 文字種 */
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
	/* 基本文字サイズ */
    font-size: 16px;
	/* 基本文字サイズに対する倍率 */
    font-size: 1rem;
}

いたって簡単なコードではありますが、一応解説しておくと、

bodyという一番大枠(ページ全体)に対して、文字種、基本文字サイズ、基本文字サイズに対する倍率を割り当てています。「ん?基本文字サイズだけ設定すれば倍率なんていらないのでは?」と思われた方、半分正解です!!

というのは、前述したようにこのテーマはおおざっぱなところもあれば細かいところもあって、場所によってはどちらでも記述があるんです。そのため、文字サイズが限定されているところについては絶対値(基本文字サイズ)を、倍率で指定されているところには倍率が適用されるよう両方記述しているんです。

ただこの方法は、body(ページ全体)の中にあって、特別な文字サイズや文字種が指定されていない部分にのみ適用されるので、例えばウィジェットのリンク文字などでは指定があるため適用されません。このあたりはデベロッパーツールと見比べながら訂正していくしかないでしょう。

とはいえこれで少なくとも本文内の文字は大きくなりますから、格段に見やすくなるには違いがありませんから、まずはこのコードを適用しておけば、あとは後々でもいいと思います。

また、直接関係ないですが、こうした変更(追記)を親テーマの中で行ってしまうと、親テーマが更新された際に上書きされて台無しになることもありますので、子テーマを使用することをおすすめします(子テーマは当サイト内の「子テーマと翻訳ファイルのダウンロード」で無料提供してますし、同ページに適用方法も掲載していますので、参考にしていただければと思います)。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)