THE THOR の全体の文字サイズは設定より変更が可能となっています。
記事ごと、文章ごとの文字サイズはビジュアルエディタより操作が可能です。しかしここに大きな矛盾というか操作性の欠落があるのでそれを解決しましょう。
※カスタマイズは自己責任でお願いします。
※やってみたら様々な問題があったので全て読んでいただけると幸いです。
このカスタマイズはTHE THORのバージョンアップにともない使用を中止しました。参考資料としてお楽しみください。
THE THOR の文字サイズを変更する設定
まず標準の設定を見ていきましょう。
※この記事でいう文字サイズとは記事内の文章（段落）の文字サイズをさします。
サイト全体の文字サイズを変更する設定
全体のフォントサイズを選択という項目で選べるのは以下の3つ。
- 小(default)
- 中
- 大
こちらの設定では文章の文字サイズだけではなく見出しなどを含むページ全体の文字サイズが変更できます。
当サイトでは小(default)を設定しています。後述になりますが中サイズにしても良いかなと思っています。さすがに大サイズは大きすぎると感じました。
記事内文章のサイズを変更する
こちらは記事内の文字サイズのみを変更する方法です。
フォントサイズで選べるサイズは以下の7種類
8pt / 10pt / 12pt / 14 pt / 18pt / 24pt / 36pt
ここではデフォルトで11ptという文字サイズが設定されており、特に指定をしなければ記事内の文章は11ptのサイズで表示されます。少し小さくしたいときは10pt、大きくしたいときは14ptなどを選択して文章ごとにサイズを変更していきます。
ここで「あれ？」と思いませんか。
デフォルトのサイズが用意されていない。
そう最初は11ptが設定されているのに、変更するサイズに11ptはないのです。
一度14ptなどに変更したフォントサイズはビジュアルエディタで11ptに戻すことができません。謎仕様です。（テキストエディタでサイズを指定するかコードを削除すれば11ptにもどります）
さらに単位の問題があります。
こちらの設定ではpt（ポイント）が単位として使われています。
文字のサイズでは様々な単位が使われます。例えば歯(H)、Q、pt、mm、pxなどです。
僕はサイト製作のプロではないので制作上、どの単位が一般的なのかは知りませんがpxで指定するのが一番わかりやすいのではないかと思います。
しかし設定項目の単位を変更できるほどのスキルがありませんのでptをpxに換算しつつカスタマイズしていきます。
文章サイズを変更する理由
- 文章サイズを変更したい理由は上記の問題のため、デフォルトの数値を10ptまたは12ptにして操作性を上げたいという理由がひとつ。
- 個人的な好みで少し小さくしたというのがひとつ。
- 文章サイズを小さくすることによって見出しなどとのサイズ差（ジャンプ率）が大きくなります。見た目にメリハリができ可読性があがるのではないかと思います。（設定で中サイズを選べばさらに差が大きくなりメリハリがつきます。）※小さすぎて読みづらくならないよう注意
前述した外観からの設定だと見出しも段落も一律にサイズが変更されてしまうので、3番目の目的が達成されません。
今回は段落の文字サイズをスマホ表示10pt/PC表示12ptに変更します。(12pt=16px)
CSSでページ内の段落文字サイズを変更する
追加CSSを使ってサイト全体の段落文字サイズを変更します。
※思いも寄らぬ場所の文字サイズが変更されてしまう可能性もあるので注意してください。
段落文字サイズを変更するCSS
CSSを追加CSSに記入します。
/*段落フォントサイズpc12sp10*/
p {
font-size: 12pt;
}
@media screen and (max-width : 767px){
p {
font-size: 10pt;
}
}
数値を変更すると文字サイズが変わります。
変更が適用されない場合はキャッシュのクリアなどを行ってください。
別記事にある文章文字のカラー変更とCSSをまとめて併用できます。
・THE THOR（ザ・トール）文字 段落 のカラーを変更する方法
THE THOR で 文字の色 を変更するカスタマイズを行いました。 テーマについてTHE THOR この記事で言う「文字の色」とは記事中の文字、通常の文章のカラーのことです。段落とも呼ばれます。 その[…]
以上です。
このカスタマイズでの問題点
一見すると上手くいったようなカスタマイズですが問題点があります。
問題点は2つ。
- ビジュアルエディタ上では段落文字サイズが11ptで表示されている。
PC表示は12ptになるが見出しなどは変わらないためメリハリがデフォルト（11pt）より小さくなる。
①の問題はプレビューでしっかり確認すればOKです。②の問題はメリハリが弱くなるだけでなく、スマホ表示で少しだけ文字を大きくしようとして12ptを使用した場合、PC表示では通常のサイズとなってしまいます。逆にPC表示で少し大きくしようとして14ptを使用した場合はスマホ表示で思った以上に大きくなってしまいます。もしかしたら12pt（16px）がよく使用されるのはスマホでもPCでも大きすぎず小さすぎない共通のサイズだからかもしれません。
※スマホサイズ小、PCサイズ中（または大）にすることでジャンプ率を保てます。
スマホ表示での見た目を重視して、今回はスマホ10pt/PC12ptという変則的なサイズで運用を試してみますが今後変更するかもしれません。
文章の最適な文字サイズについて
横書き文章の一行の文字数は15文字〜35文字程度適切というのが定説となっています。
※もちろん諸説あります。
かなり幅が広いです。例えば子ども向けであれば文字数少なめ、学術書のようなものであれば長めなど用途によって変わってくると思います。
単純に視線の横移動、次の行への移動で読んでいる場所を見失わないように長すぎない文字数にすること。逆に短すぎても横と縦の移動が頻繁に行われると読むのが疲れる。疲れると人は離脱します。流行もあるので一概には言えませんが、スマホで見るブログの文章一行の文字数は20文字前後が最適でしょうか？（いくつかの有名ブログを見た感想です。おそらく16px程度でptでいうと12pt）
当サイトのPC表示は1カラムのため一行が70文字程度になってしまっていますので再考の余地ありです。
あとがき
文章を読むという点では上記のようになるわけですが、個人的にはもうひとつ大事な点があります。それは見た目です。小さな文字のほうが塊感が出てパッと見が美しい。文字が大きいと安っぽさを感じます。完全に好みの問題です。←僕のカスタマイズの原点
今回のカスタマイズ(11ptから10ptに変更)で僕の使っているHUAWEI P20の画面では一行に23文字だったのが24文字になり1文字だけ増えました。一行単位で見ると言われてもわからないぐらい変化がありません。しかし全体で見ると文章部分に塊感が出たように感じます（プラシーボ）完全に自己満足です。
しかし基本が10pt（PC12pt）になるのでビジュアルエディタでの操作性はアップするし、中途半端な11ptという存在がなくなるので気持ちがスッキリしますw
※エディタ上での見た目は11ptのままなので注意！
