さくらのレンタルサーバでなんとモリサワの日本語Webフォントが使えるサービスが始まりました。
とりあえずはWordPressのプラグインで使えるようになっています。（月間PV2.5万以下が対象ですが、現在（2016/7）のところそれ以上でも使えるかもしれません。試す価値はあると思います）
使えるフォントは30種類（2016/6/30現在）
リュウミンR-KL,リュウミンM-KL,見出しミンMA31,A1明,新ゴR,新ゴM,ゴシックMB101B,見出しゴMB31,じゅん201,じゅん501,新丸ゴR,フォークR,フォークM,丸フォークR,丸フォークM,カクミンR,解ミン宙B,シネマレター,トーキング,はるひ学園,すずむし,新丸ゴ太ライン,正楷,CB1,隷書101,UD新ゴR,UD新ゴM,UD新ゴ コンデンス90L,UD新ゴ コンデンス90M,ナウGM,G2サンセリフーB
さっそく使ってみた感想ですが、日本語Webフォント特有のテキストの表示までの一呼吸の間がありますが、このサイトはそもそもWordPressの問題で表示速度が遅いというネックがありますので一概にWebフォントの問題とすることはできません。
SAKURAの説明では、本文2,731文字でWebフォントONの場合184ｋｂ、OFFで84ｋｂと説明しています。
またサブセット化がされていますのでかつての表示速度ほど遅延はないと思われます。
次に設定で、デフォルトの状態では本文にWebフォントが適用されません。その対処について説明します。
しばらくテスト的にこのサイトで試してみます。
設定方法
さくらサーバーのWebフォント取り扱い説明
2016年6月30日現在では、WordPressのプラグインを使用します。WordPressは簡単インストールのものでも、独自にインストールしたものでもOKです。
マルチドメインにも対応していますが、今のところは１ドメインのみ使用できます。
- さくらサーバーのサーバコントロールパネルにログインします。（いつもの設定画面です）
- 左側のメニューから『Webフォント』をクリックします
- 「Webフォント利用ドメインの設定」では「独自ドメイン設定」のセレクトボックススから自分が使用したいサイトのドメインを選択して「設定」ボタンをクリックします
- 登録ドメイン名に設定したいドメインが表示されていれば設定準備完了
- これからは、WordPressのプラグイン設定
WordPressのダッシュボードからプラグインの設定に入ります。
プラグインの検索ボックスに「sakurainternet」と入力
- プラグインが導入されたら、ダッシュボードのメニューにTypeSquareWebfontsのメニューが表示されます
- TypeSquareWebfontsのメニューを選択するといくつかのフォントをセットにしたテーマが選べます
- 独自にカスタマイズする場合は「カスタムフォントテーマ」にある『新しいカスタムフォントテーマを作成する』をクリックします
本文に指定したWebフォントが適用されない対処法
追記：注意！モリサワの日本語Webフォントをbodyに対して設定すると各タグに「typesquare_tags」のクラス名が付けられます。もしクラス名を使用してJavaScriptやjQueryなどを使用している場合不具合が出る可能性がありますので十分検証する必要があります。例えばjQueryでクラス名を動的に取得して命令をするときなど「typesquare_tags」クラス名が付け加わり問題が出ます。
前述の方法で見出し関連にはWebフォントが適用されますが、本文に適用されないことに気づくと思います。
これはデフォルトの設定では本文にWebフォントを適用するには「.hentry」というクラス名を設定する必要があるからです。
この設定はWordPressのダッシュボードの中の「TypeSquare Webfonts」メニューから「上級者向けのカスタマイズ」にあります。
見出しやリード、強調タグにはh1やstrongなど要素名を使うタイプセレクタが指定してあります。そのためプラグインの設定が完了すると即座にWebフォントが適用されます。
ところが、本文には「.hentry」というクラス名しか指定されていません。つまり「.hentry」というクラス名を付けたタグの中でしかWebフォントが適用されないことになります。これは、フォントファミリーのCSSの継承の問題があるためと思われます。
対処の方法として２つあります。
まず、WordPressのテーマをカスタマイズして、本文の中でWebフォントを使用したいタグに「.hentry」というクラス名を付与する方法です。最も手軽に実現するにはbodyタグに「.hentry」というクラス名を付けることです。
ただし、注意する点はフォントファミリーのCSSの継承問題です。bodyタグに「.hentry」を付けると全てのタグに継承されてそのWebフォントが適用されることになります。もし、見出し等でフォントを変更したい場合はそれぞれ細かくフォントファミリーの設定を行う必要があります。
もう一つの方法は、WordPressの「TypeSquare Webfonts」メニューから「上級者向けのカスタマイズ」で設定を変える方法です。
デフォルトでは、本文は「.hentry」だけになっていますので、「body」を加えれば、すべてのフォントが本文のWebフォントに変更されます。
継承を嫌うなら、「p」タグや「li」タグに限定するのも良いかと思います。
またはすでにWordPressで使用しているクラス名を指定しても良いでしょう。
おそらく「上級者向けのカスタマイズ」でカスタマイズする方法が効率的に作業が行えるものと思います。
フォントの太さの設定
同じフォントで太文字にする場合はCSSから「font-weight」を使用して設定するのではなく、「フォントファミリーの中から適当な太さのフォント名を選択する方法が取られています。これは「font-weight」でborldを指定すると本来の太文字にならず、ブラウザが勝手に肉厚に変更してしまうため意図したフォントにならないためです。モリサワの方ではその辺を意識して「font-weight」は使用しないようにと説明がありました。
尚、フォントファミリーから適切なフォントを選択するのは設定の「カスタムフォントテーマ」からフォントテーマエディッタを選択して「フォントファミリー名」と「フォント名」を指定します。
投稿記事ごとや固定ページごとにWebフォントを変更する方法
各投稿記事ごとにフォントを変更することもできます。
TypeSquare Webfontsの設定画面から下の方に「フォントテーマ個別表示設定」の項目があります。ここを表示に変更します。
次に投稿から「新規追加」または「投稿一覧」から編集したい記事を選択して記事を書くスペースの下に「TypeAquer Webfonts for SAKURA RS」の項目が表示されますので好きなテーマを選択します。
もし、この項目が表示されてない場合は、「投稿の編集」画面の一番上にある「表示オプション」のタブをクリックしてオプションの中から「TypeAquer Webfonts for SAKURA RS」にチェックを入れると表示されるようになります。
コメントを投稿するにはログインしてください。