WordPressでUDデジタル教科書体を使う

りん研究室ブログは数カ月前から「UDデジタル教科書体」を使用しています。

最近,この新しい教科書体フォントが読みやすさを手助けしてくれるということで話題になっています。記事見出しのように学力向上とどれだけつながるかは分かりませんけれども。

20190805「革命的に読みやすい、UDフォント 学力向上効果も期待」(朝日新聞)
https://www.asahi.com/articles/ASM83358VM83UTIL00H.html

この「UDデジタル教科書体」フォントは,2017年からWindows10に標準採用されていますので,お持ちのパソコンがWindows10搭載パソコンであれば画面表示に利用できます。ワープロ文書の書体として選択することもできます。

残念ながら,macOSの場合は別途購入する必要があります。

ところで,このサイトのようにブログで「UDデジタル教科書体」を使いたい場合には,Webフォントとして利用することになります。

これを提供しているのが「TypeSquare」というサービスです。

TypeSquare
https://typesquare.com

「UDデジタル教科書体」を提供している株式会社モリサワが運営しているサービスです。

基本的には有料サービスですが,有り難いことに無料プランも用意されており,1書体を限られた範囲で無料利用できます。書体は様々用意されていますが「UDデジタル教科書体」を選択も可能です。

たとえばWordPressというブログシステムで利用する場合,登録を済ませたあと,この説明ページを見ながら「専用タグ」と呼ばれる文字列を手に入れて,WordPressにコピペし,ブログ本文のフォント指定を「UDDigiKyokasho R」にすれば準備完了です。

  1. TypeSquareに登録しログイン
  2. 無料プラン設定で利用書体の選択と利用するブログのURLを登録
  3. 提示される「プラン専用タグ」をコピー
  4. WordPressの管理画面で「外観」>「テーマエディター」を開く
  5. テーマファイル内の「テーマヘッダー(header.php)」の中に専用タグをペースト
  6. テーマファイル内の「スタイルシート(style.css)」の中で「font-family: “UDDigiKyokasho R”;」を指定

以上が基本手順で,あとはそれぞれ適切な場所でペーストや指定ができているかを調整することになります。

同じ書体でも,ブログ本文の文字サイズや文字間隔によって読みやすさは変わります。

りん研究室のブログは,文字をガンガンと見せていくタイプのブログなので,段落全体がキュっと締まる印象に調整しています。そのため文字サイズも小さめで,わざと文字間隔も詰めています。

cssファイルの指定としてはこんな感じです。

	p{
	    font-family: "UDDigiKyokasho R";
	    font-size: 15px;
	    line-height: 1.8;
	    margin: 1.3em 0px;
	    letter-spacing: -0.8px;
	    text-align:justify
	}

ただ,せっかくの「UDデジタル教科書体」の見やすさを,逆に段落レイアウトで見難くしているかも知れません。これはどちらかというとWebサイトの印象デザインを優先させたやり方です。

ちなみにその他のWebフォントについては利用しているレンタルサーバー会社が提供してくれているWebフォント機能を利用していたり,Google Fontsを利用しています。

Google Fonts
https://fonts.google.com

何でもかんでも「UDデジタル教科書体」にすればよいわけでもありませんし,配慮するとしたら書体だけでなく配色についても考えなければなりません。

目指したいものが何か深く考えながら,適切なものを選択できるようにしていくことが大事なのかなと思います。

ちなみに色については…

MS Office に続きMac OS 用のCUDカラーパレットをこちらで配布しています
http://www2.cudo.jp/wp/?p=5014

でmacOS用のカラーパレットを配布しています。