サイトを作成した時の備忘録です。

自分もそんなに詳しいわけではないのですが、この投稿はHTML、CSS、WordPressについて少し知識のある方向けの内容になっています。

このサイトはWordPressというCMSで作成しています。使っているテーマはタイポグラフィに拘ったという点がウリというだけあって、テキストがとっても綺麗に表示されます。（2019.8追記 使用テーマを変更しました。）

が。

Windowsだと游明朝でテキストが表示されていると思うのですが、この游明朝ってとても綺麗なフォントだとは思うのですが、ちょっと細くてウェブでは読みにくいような気が個人的にはしてしまうのです。それと、Androidでは明朝体が表示されない。

そこで、Webフォントを使うことにしました。

Googleフォントでも日本語フォントがありますが、今回はAdobe Fonts（旧Typekit）を使うことにしました。

Adobe IDを作成すると、サブスクリプションを購入しなくてもCreative Cloud 無償メンバーシップが利用できるんですね。その中にAdobe Fontsも含まれています。利用できるフォントはものすごく制限されますが、Webフォントとしての利用でしたらフォントを何種類も使ったらサイトが重くなってしまいますし、無償メンバーシップで利用できるフォントに、明朝体なら源ノ明朝や平成明朝があるので、これで充分だと思います。

ちなみにCreative Cloud 無償メンバーシップで利用できる日本語フォントは、

• 源ノ明朝
• 平成明朝 Std
• 貂明朝
• 源ノ角ゴシック
• 平成角ゴシック Std
• 平成丸ゴシック Std

「源ノ角ゴシック CJK」というゴシック体もあるのですが、こちらは「源ノ角ゴシック」に中国語や韓国語で使用される文字を加えたものだそうなので、実質6種の日本語フォントが利用できる、ということでいいと思います。

参考：「源ノ角ゴシック」と「源ノ角ゴシック CJK」との違いは？

Adobe FontsをWebフォントとして利用する方法はこちら。

Webサイトへのフォントの追加

ちなみに、このサイトではサイト全体に源ノ明朝、ブログや小説のタイトル部分には貂明朝を使っています。

源ノ明朝（Regular）のスタイルは以下の通り。

font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;

ですので、WordPressの場合は、子テーマのstyle.css、あるいはカスタマイザーの追加CSSに次のように記述します。

（游明朝やヒラギノの設定はなくてもいいのかもしれませんが、デフォルトの設定にあったものは残して源ノ明朝を追加した形にしています。）

body {
	font-family: Georgia, source-han-serif-japanese,　'游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
	font-weight: 400;
	font-style: normal;
}

先頭のフォント設定から反映されるので、この順だと英数字については欧文フォントのGeorgia、ひらがな、カタカナ、漢字については日本語フォント源ノ明朝で表示するという指定になります。
ただし、Georgiaがインストールされていないデバイスでは英数字についても源ノ明朝で表示されます。Androidだとそうなります。

表示例（画像にしています）

AndroidのようにGeorgiaというフォントがインストールされていないデバイスなら以下のように表示されます。

別に、Geogiaを削除してしまって、源ノ明朝を先頭にもってきても構いません。これはサイトを作る人の好みで。ただ、Geogiaというフォント、小説同人誌のノンブルによく使っていたのですが、この数字がなんとなく好きなので残しています。

小説をサイトに掲載する場合、スタイルの指定では日本語フォントを先頭に持ってきた方が、三点リーダーやダーシ（ダッシュ）の表示がいい感じになるのですが、その話についてはまた後日まとめられたらなーと思います。

【追記】まとめました。→ 三点リーダー,二倍ダーシ（ダッシュ）

ちなみに、Adobe FontsはWebフォントだけでなく、Creative Cloud デスクトップアプリケーションをインストールすれば、Adobe以外のWordや一太郎、イラストや漫画を描くためのソフトになりますがメディバンペイントなどでも使えます（他にも利用できるソフトがあるのかもしれませんが、自分が知っているのはこのあたり）。

（ただ、自分の環境が原因なのだろうとは思いますが、このデスクトップアプリケーションが重いのですよね……。）