Lognote

ネット集客に強い整体院サイトを制作

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

公開日:2017-06-22
最終更新日:

無料SSLサービスに引き続き、エックスサーバーがまたやってくれました!

なんと、あの有名な日本語Webフォントのモリサワフォントを無料でWebサイトに利用できるサービスを開始したのです!

ヤマカワ
これは試さずにはいられない!

ということで、WordPressへのモリサワフォント導入方法を紹介したいと思います。

そもそもWebフォントとは?

Webフォントは、通常のテキストデータとは異なり、フォントファイルを読み込んで出力しています。

閲覧するデバイスや解像度の違いによって生じるジャギーなどの心配もなく、まるで画像加工ソフトで編集したようなとてもきれいな文字を表示させることが可能です。

モリサワフォントって?

モリサワフォントは、フォントといえばモリサワといわれる程有名な老舗のフォント制作会社で、1年契約のPASSPORT1でも49,800円する高額フォントでもあります。

趣味でイラストを書いたり動画の制作をしたり、購入さえすれば専門職の方だけではなく個人でも自由に使えるのが魅力です。

ガジェット系商品紹介でも有名なYouTuber瀬戸弘司さんは、実際に動画内で表示する字幕にモリサワフォントを使用されています。

エックスサーバーの日本語Webフォント導入の流れ

それでは、実際にWebフォントをサイトに設定してみます。

導入は以下の流れでおこないます。

  • サーバー管理パネルで使用ドメインを設定する
  • WordPressに専用プラグインをインストールする
  • フォントの設定をする

サーバー管理パネルで使用ドメインを設定する

エックスサーバーのサーバー管理パネルに、新しく[Webフォント設定]というものが追加されているのでこちらをクリックします。

xserver-morisawa-01

[Webフォント設定の追加]からドメインを選択。

xserver-morisawa-02

Webフォントを設定できるドメインは1アカウントにつき1サイトのみで、1ヶ月に25,000PVを超えると強制的に標準のフォントに戻ります。

xserver-morisawa-03

WordPressに専用プラグインをインストールする

WordPressのプラグイン ⇒ 新規追加から「TypeSquare Webfonts for エックスサーバー」を検索してインストールします。

xserver-morisawa-04

フォントの設定をする

プラグインの設定ページから使いたいフォントテーマを選択します。

xserver-morisawa-05

[新しいテーマを作成する]を選択すると、タグごとにフォントを変更することができます。

xserver-morisawa-06

書体の見本は「書体見本一覧」をご参照ください。

ここまででサイトのフォントが変更されているかと思いますが、このサイトではなぜかうまく反映されませんでした。

Webフォントがうまく反映されない場合

Webフォントの設定方法として、プラグインを使うほかに直接CSSで指定するHTML記述形式があります。

私の場合、こちらの方法だと即反映されました。まずは簡単なプラグインを試してみて、それでダメなようならHTML記述形式で設定するといいかもしれません。

まず、ヘッダーのHEADタグ(<head></head>)の間に下記コードを追加します。

<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>

Webフォントを反映させたいセレクタにfont-familyを指定します。

25,000PVを過ぎたら自動的に標準のフォントに切り替わるように、モリサワ以外のフォントも指定しておきましょう。

h1 {
    font-family: "新ゴ R", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
}

各フォントのfont-familyについては「各WebフォントのCSS指定用コード」をご参照ください。

モリサワWebフォント表示例

このブログで実際にモリサワWebフォントに変更してみました。

xserver-morisawa-07

こちらの例では本文テキストに「新ゴ R」を指定しています。

少し丸みを帯びており、「Noto Sans Japanese」に比べてしっかりくっきり表示される印象です。

サイトの雰囲気が一気に変わりますので、エックスサーバーをご利用の方はぜひ一度試してみてください。

追記:2017年8月8日

使えるWebフォントに「中ゴシックBBB」「すずむし」「新丸ゴ R」の3つが追加されました。

xserver-morisawa-08

かわいい感じのフォントなので、女性向けブログにぴったりですね。

WordPressサイト運営に特化したお勧めサーバーTOP3

ブログは蓄積型の財産です。大事なデータ情報を守るためには信頼性の高いレンタルサーバー選びが大切です。

中でもエックスサーバーは、独自SSL無料提供を初め、高速・多機能・高安定。月額900円からと圧倒的コストパフォーマンスに優れ、初心者の方にも一番にお勧めしたいサーバーとなっています。

以下、エックスサーバー社が運営するWordPressサイト運営に特化したレンタルサーバーを紹介します。

高速・多機能・高安定のエックスサーバー高速・多機能・高安定のエックスサーバー

高速・多機能・高安定のエックスサーバー

レンタルサーバー選びに迷ったらまずお勧めしたいレンタルサーバーです。エックスサーバーを選んでおけば、大抵のサイト運営はまず間違いないでしょう。900円/月で200GB~とコスパも抜群!無料で独自SSLが設定できるのもエックスサーバーだけ!

WordPressの運用に特化したwpxWordPressの運用に特化したwpx

WordPressの運用に特化したwpx

wpxはエックスサーバー社が運営している「WordPress」専用サーバーです。専用というだけありエックスサーバー以外のCMSは利用できません。その代わりコストは低めでWordPress以外のCMSは使わないという方にお勧めです。

業界トップクラスの超高速無制限サーバーX2業界トップクラスの超高速無制限サーバーX2

業界トップクラスの超高速無制限サーバーX2

エックスサーバー社運営の上位サーバーX2。100GBで1,800円/月とエックスサーバーに比べるとコスパは落ちますが、FastCGIやXキャッシュによる業界トップクラスの超高速処理を実現しているため、アクセスが大量に発生しそうな方にお勧めのサーバーです。

以上、「超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!」という記事をお届けしました。

-WordPress

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

mts-simple-booking-c-fatal-error-thumbnail

「MTS Simple Booking-C」フェイタルエラーの解決方法

Web予約カレンダーを設置するプラグイン「MTS Simple Booking-C」にフェイタルエラーが出てしまいました...

wordpress-comment-voice-thumbnail

動画も可!WordPressのコメント機能を使った口コミ掲載方法

整体院サイトをリニューアルする中で、「お客様の声」を掲載するための専用ページをどのようにするか迷...

views-display-thumbnail

WordPressで記事ごとに閲覧回数を表示する方法

「自分のブログもそこそこ読まれるようになってきたなー」 そんなとき、どれくらい読まれているのか訪問者に見せたく …

advanced-code-editor-thumbnail

テーマ編集で行数を表示するWordPressプラグイン「Advanced Code Editor」

WordPress内でテーマを編集するとき行数表示がなくて不便だなと感じることはないでしょうか。今日はそんな悩 …

mb-substr-wordpress-thumbnail

WordPressの抜粋表示には「mb_substr」ではなく「the_excerpt」を使った方がいい理由

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようにな …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい