本日（6/29）さくらのレンタルサーバでモリサワのWebフォントが無料で利用可能になったというリリースがさくらインターネットから発表されました。
「さくらのレンタルサーバ」のWordPressにてモリサワのWebフォントを無料でご利用いただけるようになりました | さくらインターネット https://www.sakura.ad.jp/news/sakurainfo/newsentry.php?id=1330
このBlogはさくらインターネットのさくらサーバーを利用しているので、さっそくモリサワのWebフォントがどんなものか試してみました。
さくらサーバーでモリサワWebフォントを使用するまでの手順
モリサワのWebフォントを使用するまでに、大きく分けて2つの手順があります。
- ひとつは「WordPressにプラグインをインストールする」
- ひとつは「さくらサーバーのコントロールパネルでドメイン設定をする」
どちらの手順からスタートしても大丈夫かと思います。
今回は実際のアウトプット直前に操作するのはWordPressなので「さくらサーバーのコントロールパネルでドメインの設定をしてから、WordPressにプラグインを入れて使用してみる」という順番で試していきましょう。
コントロールパネルでドメインの設定をする
まずは、さくらサーバーのコントロールパネルにログインします。ログインIDは初期ドメイン、パスワードは任意で設定したものでログインします。
左カラムに「Webフォント」という項目が新しく追加されているのでそれをクリックします。
すると「* Webフォント利用PV数 *」という項目が表示されます。これはおそらくリリースにあった「月に25,000PVまでの利用が可能」という所の目安にするための数値が表示される部分かと思います。25,000なので、コーポレートサイトなどにはちょうどいいかもしれませんが、人気のあるブログだと結構厳しい数値ですね。
少しスクロールすると「* Webフォント利用ドメインの設定 *」という項目があるので、そこでWebフォントを利用するWordPressがインストールされているサイトのドメインを選択します。私の場合は「ishida-design.com」で使用するので、このドメインを選択しました。
コントロールパネル側で必要な作業はこれだけです。次は実際にWebフォントを使用したいWordPress側での設定になります。
Webフォント用のプラグインをインストールする
次にWordPressにプラグインをインストールします。
プラグインのインストール方法は皆さん知ってるかと思いますが、方法は大きく分けて2つあります。
- 公式サイトから「zip」をダウンロードする。
- WordPressのプラグインから検索してダウンロードする。
私の場合、発表されたリリースのリンクから飛んでいって作業したので「公式サイトでプラグインのzipをダウンロードし、それをWordPressの管理画面からアップロードする」という手順を踏みました。Webフォントのプラグインは以下からダウンロードできます。
TypeSquare Webfonts for さくらのレンタルサーバ
使用するWebフォントのセッティングを行う
いずれかの方法でインストールが完了すれば、あとはWebフォントを使用するための設定を行うだけです。
プラグインをインストールしたら管理画面の左カラムに＜TypeSquareWebfonts＞という項目が表示されるのでクリックします。
私の最初のイメージだと「WordPressの投稿画面で、任意の文字や数字を選択して自由に書体を変えられるのかな？」なんて思ってたのですが、どうやらそうではなくて、「タイトル」「リード」「本文」「強調文字」の大きなグループごとにプリセットを設定して使用するようです。
予め設定してある「フォントテーマ」と呼ばれるプリセットを選択して＜フォントテーマを更新する＞ボタンをクリックすれば、それだけですぐにWebフォントがサイトに適用されます。
初期は「ゴシック体」「明朝体」と書体の特徴ごとにバランス良く組まれたプリセットが用紙されています。また、＜フォントテーマ個別表示設定＞をONにすることで、記事や固定ページごとにWebフォントのプリセットを変更できるようなオプションも用意されています。
カスタムフォントテーマを使用して任意の書体を使い分ける
＜TypeSquareWebfonts＞の＜カスタムフォントテーマ＞をクリックすると、このような画面が表示されます。初期プリセットとは違い、「タイトル」「リード」「本文」「太字」それぞれ好きな書体を割り当てられるようになっています。
このカスタムフォントテーマを使って、好き勝手フォントを当ててみました。
こんな感じで、みんな大好きリュウミンや、
見出しゴも使えたりするん。
これははるひ学園。これを本文に使う猛者のブログがあれば見てみたい。こういうデザイン書体も多く収録されているので、使いドコロによっては効果的！！
こういうところで収益上がって、本来のモリサワ税が安くなったりしたら嬉しいなぁ。。
こういった使い方をするには、上級者向けのカスタマイズを使って、割り当てるタグ・クラスを変更して半ば強制的に使うしかなさそうです。
重いというデメリットはあれど、使い方次第で幅が広がる
ただ、やはりWebフォントを適用すると表示速度が目に見えて遅くなりました。
が、さくらサーバーのスタンダード以上のユーザーなら月間25,000PVまで使用できますし、一度試してみてはどうでしょうか。
無料でモリサワが使えるという点では非常に嬉しいですし、テキストを活かしたままデザイン性のあるページの再現も可能です。
ただ、使い勝手が割と限定されているので、自由の効いた使い方ができるというわけではないような気がしました。普通のWebフォントとしてfont-family指定で読み込んだりで自由に使用することはできれば本当はいいんですけどね。
ていうか、モリサワのライセンスをもう少し安くしてくれー。