Wordpressでサイト運営 コラム

エックスサーバーでモリサワフォントが無料利用可能に!手順解説

ついにエックスサーバーでも、モリサワフォントが利用できるようになりました!わずか3分で簡単に設置できましたので、その手順をご案内していきます。

サイトの印象は文字で変わる!フォントが変わるだけでイメージも変わる

サイトの大部分を占めている文字の書体を変えるだけで、サイトの見栄えも上質になったり、より内容に合うイメージに近づけることができます。今日からこのサイトの文字も、モリサワフォントに切り替えたことにお気づきでしょうか?

TVCM、チラシ、TV番組のテロップなど、日本のデザイナーに最も愛用されているモリサワフォントを使うことで、あなたのサイトのイメージが洗練されるのでぜひ活用してみましょう。

エックスサーバーでのモリサワフォント(TypeSquare Webfonts)を利用条件

エックスサーバーでモリサワフォントを利用するには、いくつかの条件がありますので、確認しましょう。

エックスサーバーでモリサワフォントを利用条件

  1. 無料
  2. 現在27フォント利用可能(投票上位3フォントが追加で全30フォントが使用可能予定)
  3. 1ドメインのみ
  4. 月間ページビュー25,000PV以下

エックスサーバーでは、無料でモリサワフォント27書体が利用できます。7/31までみんなの押しフォント総選挙が開催中で、Twitterで投票された上位3フォントも総選挙後利用できるようになります。総選挙参加者には、アマゾンギフト券・MORISAWA PASSPORTなどの豪華商品が抽選で当たるキャンペーン中なので、参加してみては。

[blogcard url=”https://www.xserver.co.jp/webfontcp/”]

月間PVが25,000を超えるとモリサワフォントが停止されますが、元々設定していたフォントに戻るだけでサイトが見れなくなるわけではないので安心です。アクセス数が多いメディアやブログには活用できませんが、事務所サイト・サロンサイト・お店サイトのようなビジネス用のサイトであれば、利用できるのではないでしょうか。

エックスサーバーでモリサワフォント(TypeSquare Webfonts)を利用する方法

1)サーバーパネルでWebフォント設定を追加する


今日から、エックスサーバーのサーバーパネルにログインをすると、「ホームページ」設定の一番下に「Webフォント設定」というメニューが追加されています。

「Webフォント設定の追加」タブをクリックし、モリサワフォントを使いたいドメインを一覧から選ぶと設定完了です。

2)WordPressに「TypeSquare Webfonts for エックスサーバー」プラグインをインストールする

WordPressの管理画面のプラグインの新規追加で「TypeSquare Webfonts for エックスサーバー」で検索するとすぐに見つかります。「今すぐインストール」をクリックしてインストールしましょう。インストールが完了したら、「有効化」ボタンクリックでプラグインを有効化しておきます。

3)TypeSquare Webfonts for エックスサーバープラグインで好きなフォントを設定する

プラグインには、あらかじめ相性の良いフォントの組み合わせが「フォントテーマ」として用意されています。とことんこだわりたいフォントマニアな方以外は、このフォントテーマ一覧から好みに合うものを選ぶだけで、モリサワWebフォントの設定が完了です。

サイトのフォントが切り替わっているか確認してみましょう。

フォントがモリサワフォントに表示されない場合の対処法

WordPressのテーマによっては、プラグインをそのまま利用しただけではフォントが切り替わらない場合があります。このサイトも、最初はh1〜h6の見出ししかモリサワフォントで表示されませんでした。

原因は、WordPressのテーマが細かくフォントを設定していることで、優先順位がプラグインより上位になってしまっていることです。
スタイルシートでは、より細かく設定されている命令が優先されるという「詳細性の優位」判定があります。

  1. bodyなどの全体的な設定よりidやClassの設定が優先される
  2. 要素を特定したidやClassの方が特定しないセレクタより優先される

これを解決するために、「TypeSquare Webfonts for エックスサーバー」プラグインでは、「上級者向けの設定」が用意されています。

最初の設定では、見出しはh1からh3、本文はhentyクラスが指定され、headタグ内に次のようなスタイルシートを書き込んでいます。

ブラウザーのコンソール画面を利用して、使用中のWordPressテーマのフォントを指定しているフォントのスタイルシート命令を確認してみましょう。


このテーマでは、「henty」クラスより下層の「entry-content」クラスで本文フォントを指定しているので、プラグインの「上級者向けの設定」で、「本文タグ」を「.henty」から「.entry-content」へ書き換えると本文もモリサワフォントで表示されるようになりました。

テーマによっては、ウィジットの見出し、サイドバーの見出し、フッターの見出し・・・と個別にフォントをスタイルシートで指定していることがあり、細かく設定されていると、プラグインだけでは表示が切り替わらないこともあります。その場合は、テーマ内フォント指定部分(例:font-family: HiraMaruPro-W4 Osaka, sans-serif;)を削除すると簡単に解決できます。テーマが更新されると削除した部分が復活してしまうのですが、テキストエディターで「font-family:」を検索して削除するだけなので、この方法でもまぁいいのではないでしょうか。

どうしてもうまくいかない時は、ご相談ください。office FITPlusではフォントの切り替えなどの小さな案件から承っています。

高速で初心者にも使いやすい管理画面でモリサワフォントまで使えるエックスサーバーなら、初めてのサイト運営のハードルもグンと下がってWordPressサイト運営がたのしくなりますよ。



この記事がお役に立てたら
いいね ! で最新情報を手に入れましょう

Previous Post Next Post

Related Posts