お名前.comの共用サーバーを利用して「モリサワWebフォント」を無料で試してみる

お名前.com共用サーバーSDにはモリサワWebフォントが標準搭載されています。ブログのフォントデザインに飽きた時や、ユーザビリティを考えた時に変えてみるのもいいかも知れません。




今回はどんなフォントがあってどんなデザインなのか試してみましたので記事にします。

モリサワWebフォントとは？

時代のニーズに合った商品を提供しつづけ、多くのデザイナーの人気と信頼を獲得してきた書体メーカーの老舗「モリサワ」が提供するWebフォントです。

Webフォントとは？

インターネットを通してフォントを配信し、ブラウザ上で指定したフォントを表示できるのがWebフォントです。Webフォントには様々なメリットがあります。

モリサワWebフォントのデザインサンプル一覧はこちらから確認できます。

モリサワWebフォントを使えるようにする

まずは共用サーバーのコントロールパネルからWebフォントが使えるように設定します。モリサワWebフォントは1ドメイン限定で使用できます。共用サーバーを契約するまでの手順などは別記事に書いています。

Webフォント設定

お名前.com共用サーバーのコントロールパネルを開いてサーバー設定にあるWebフォントをクリック。

右端にあるアクションの設定をクリック。

ご自分のブログドメインを選択して同意項目にチェックを入れ、確認画面へ進むをクリック。

決定をクリックすれば設定完了です。

プラグイン「TS Webfonts for お名前.com」のインストール

次にワードプレスの管理画面の左メニューからプラグインをクリック。

上部にある新規追加をクリック。

メニューバー右にある検索ボックスにTS Webfonts for お名前.comと入力。プラグインが表示されますので今すぐインストールをクリック。

インストールが完了すれば有効化をクリックで完了です。

TypeSquareWebfontsの使い方

TS Webfonts for お名前.comのインストール＆有効化が完了すると、管理画面左メニューにTypeSquareWebfontsが表示されます。クリックしてテーマを設定します。

フォントテーマからお好きなテーマを選んで、テーマを更新するをクリックすればモリサワフォントが反映されます。

試しに和風を選択してテーマ更新してみました。クリックで拡大できます。

和風テーマは、（見出し：新正楷書 CBSK1 リード：解ミン月 B 本文：リュウミン M-KL 太字：リュウミン EB-KL）のはずですが、見出しと太字しか判別できません。。

他のテーマも試しましたが本文が反映されませんでした。ワードプレスのテーマによりhtmlやcssの記述が違いますのでその仕様のせいかも知れません。

初期設定をあまりいじりたくないので今回はhtmlとcssを追加して表示させました。

テーマは和風ですが、うーんバランス的に好みではないです(笑)

テーマ作成の仕方

テーマー作成は、見出し、リード、本文、太字を自由に組み合わせて設定できます。それぞれ適用したい項目を選択するだけです。

上級者向けカスタマイズ

上級者向けカスタマイズは適用したいクラスを指定できます。記事ごとにフォント指定したい場合は有効化するにチェックを入れます。

htmlとCSSに直接記述してモリサワWebフォントを使う方法

プラグインを使わず直接htmlとCSSに記述する場合は、headタグの中に以下を追加します。

CSSに任意のクラス名とfont-familyを追加します。フォント名に日本語が混ざっている場合はダブルクォーテーションで囲います。!importantはスタイルを優先させる記述です。

あとは本文や見出しなどフォントを変えたい箇所にクラス指定するだけです。例えば下のようにクラス指定します。

公式HPにもやり方が掲載されていますので参考にして下さい。

あとがき

私も今回始めてWebフォントを試しましたが、サイトデザインを崩さず利用端末に依存しないので、試行錯誤しながらしっくりくるフォントがあれば取り入れたいと思います。

サイトやブログのコンテンツによりフォントを変えるだけでガラリと印象が変わります。今回のTypeSquareWebfontsにも、可読性が高いと評判のヒラギノフォントが一つでも入っていれば良かったのですがね(笑)

お名前.comレンタルサーバーへ申し込む