エックスサーバー(Webフォント・和風)

ハワイの鳥

書体の老舗「モリサワ」のきれいなWebフォントを使ってみたよー!

「エックスサーバーのWebフォント機能って何?」「Webフォントの設定方法は?」というかたへ。

エックスサーバーでブログを運営する私が、Webフォント機能を試してみました! 感想と設定方法をご紹介します。エックスサーバーは、有料のデザインWebフォントも無料で使えますよ!


この記事を書いた人

・ウェブの初級資格を保有、PCインストラクター経験が少しあり
・ブログに本気で取り組む、A8アフィリエイトBASE(2020年)を1年間受講し学んだ
・賢威8 WordPress版を選び、挫折しないでブログを作成できた

エックスサーバーのWebフォント機能とは

エックスサーバー(Webフォント・デザイン)

出典:Xserver(エックスサーバー)公式サイト

ハワイの鳥

エックスサーバーは、画像文字のような、デザイン・ウェブフォントも無料で使えるよ!

Xserver(エックスサーバー)のWebフォント機能とは、書体の老舗「モリサワ」のデザイン書体を、無料で使える機能です。モリサワ有料の「TypeSquare」の中から、33書体を使えますよ!

きれいなデザインWebフォントを使って、洗練された見やすいサイトを作りましょう。Webフォント機能を使える対象・メリットは、次のとおりです。

Webフォント機能の詳細

  • 対象:X10 X20 X30プラン
  • ドメイン数:3ドメインまで使用可(サブドメインを含む)
  • 備考:サイトが月間75,000PVを超えると、Webフォント適用が解除される

Webフォント機能を使うメリット

  • デザイン画像のような文字も簡単に使える
  • 文字の隙間が明確でくっきり。スマホもクリアで見やすくなる
  • パソコンでもスマホでも、同じフォントで見られる
  • 遊び心がある書体も使える

エックスサーバーで使える書体例

エックスサーバー(Webフォント・明朝)

出典:Xserver(エックスサーバー)公式サイト

Xserver(エックスサーバー)で無料で使える、モリサワのWebフォントは33種類。スタイリッシュでいいなと感じた、おすすめのWebフォントをご紹介しましょう。まずは、明朝体です。おしゃれな雰囲気ですね!

エックスサーバー(Webフォント・新ゴシック)

出典:Xserver(エックスサーバー)公式サイト

Webデザイナーにも人気がある、新ゴシック体です。文字体で、サイトの雰囲気ががらりと変わりますよ。

エックスサーバー(Webフォント・デザイン)

出典:Xserver(エックスサーバー)公式サイト

デザイン文字も選べます。ほかとはちがう、個性的な雰囲気のサイトを作ることができますね!

エックスサーバー(Webフォント・デザイン2)

出典:Xserver(エックスサーバー)公式サイト

個性的! 遊び心がある文字も使えますよ。

エックスサーバー(Webフォント・UD書体)

出典:Xserver(エックスサーバー)公式サイト

UD書体は、文字の隙間が明確で、くっきりとしています。スマホの小さな文字も、はっきりと見られますね。

Webフォントの設定方法

ブログ作成イメージ

ハワイの鳥

WordPressサイトは、エックスサーバーのプラグインを入れると使えるよ!

Webフォント機能の設定方法を図解します。方法は下記の2種類ですが、今回は、1のWordPressサイトに、プラグインを入れて設定する方法をご紹介します。手順は次のとおりです。

  • WordPressでプラグインを入れて設定する方法
  • html形式のサイトで設定する方法
  1. ドメインを選び、Webフォント設定を追加する
  2. プラグイン「TypeSquare Webfonts for エックスサーバー」を有効化する
  3. フォントを設定する

1. ドメインを選び、Webフォント設定を追加する

エックスサーバー(Webフォント・設定)

出典:Xserver(エックスサーバー

Xserver(エックスサーバー)のサーバーパネルにログインし、「Webフォント設定」をクリックします。

エックスサーバー(Webフォント設定2)

出典:Xserver(エックスサーバー

Webフォントを設定するドメインを選びます。対象ドメインの右にある、「選択する」をクリックします。

エックスサーバー(Webフォント設定3)

出典:Xserver(エックスサーバー

Webフォント設定の追加」タブをクリックして開きます。

エックスサーバー(Webフォント設定4)

出典:Xserver(エックスサーバー

設定する」ボタンが表示されるので、クリックしましょう。

2. プラグイン「TypeSquare Webfonts for エックスサーバー」を有効化する

エックスサーバー(Webフォント・プラグイン追加)

つづいて、WebフォントのWordPressプラグインを有効化します。エックスサーバーでWordPressサイトを作ると、最初から「TypeSquare Webfonts for エックスサーバー」が入っています。

もしも入っていない場合には、プラグインを追加します。WordPressにログイン後、左の項目「プラグイン」をクリックし、「新規追加」ボタンをクリックします。

エックスサーバー(Webフォント・プラグイン追加2)

右上の検索窓に「TypeSquare Webfonts for エックスサーバー」と入力します。プラグインが表示されたら、「今すぐインストール」ボタンをクリックします。

※図の「有効ボタン」の場所に「今すぐインストール」が表示されます。

エックスサーバー(Webフォント・プラグイン有効化)

プラグイン「TypeSquare Webfonts for エックスサーバー」が追加されます。「有効化」をクリックしましょう。

3. フォントを設定する

エックスサーバー(Webフォント設定5)

つづいて、フォントを設定します。WordPressの左の項目「設定」の「TypeSquare Webfonts」をクリックします。

エックスサーバー(Webフォント設定6)

フォントテーマを更新する」ボタンをクリックします。

フォントを設定する(テーマを選ぶ方法)

エックスサーバー(Webフォント・和風)

モリサワWebフォントを設定してみましょう。2種類の方法をご紹介します。まずは、テーマを選ぶ簡単な方法です。

テーマを設定しない」の右端をクリックすると、さまざまな書体テーマを選べますよ! 和風のスタイルに設定してみました。

エックスサーバー(Webフォント・和風設定)

テーマを選んだら、「フォントテーマを更新する」ボタンをクリックします。

エックスサーバー(Webフォント・和風表示)

選んだテーマのWebフォントが適用されました。「和風」の文字体ですね!

エックスサーバー(Webフォント・表示2)

フォントテーマ「はんなり」を選んでみました。雰囲気ががらりと変わりますね。

フォントを設定する(新しいテーマを作成する方法)

エックスサーバー(Webフォント・テーマ作成)

オリジナルの新しいテーマを作成したい場合は、「新しくテーマを作成する」を選びます。

エックスサーバー(Webフォント・テーマ作成2)

タイトル、リード文、本文に、希望の書体を設定してみましょう。設定したら、「フォントテーマを更新する」ボタンをクリックします。

Webフォントの表示

丸ゴシック体に設定してみました。サイト表示の雰囲気が変わりました。

Webフォントの解除方法

エックスサーバー(Webフォント・設定)

出典:Xserver(エックスサーバー

ハワイの鳥

Webフォントの解除は、設定したときの逆だよ!

Xserver(エックスサーバー)のWebフォント機能を解除する方法も簡単です。サーバーパネルにログインし、「Webフォント設定」をクリックします。

エックスサーバー(Webフォント・解除2)

出典:Xserver(エックスサーバー

Webフォントを解除したいドメイン右の「選択する」をクリックします。

エックスサーバー(Webフォント・解除3)

出典:Xserver(エックスサーバー

削除」ボタンをクリックします。

エックスサーバー(Webフォント・解除4)

出典:Xserver(エックスサーバー

Webフォント設定を削除しますか? と表示されるので、「削除する」ボタンをクリックします。

エックスサーバー(Webフォント・解除5)

出典:Xserver(エックスサーバー

Webフォント設定の解除が完了です。

エックスサーバー(Webフォント・解除)

出典:Xserver(エックスサーバー

WordPressにログインし、プラグインを無効化します。Webフォント機能を使わない場合は、プラグインを削除しておきましょう。

ハワイの鳥2

使っていないプラグインは削除すると、WordPressのセキュリティ上安心だよ。

まとめ

エックスサーバー公式サイト(キャンペーン)

出典:Xserver(エックスサーバー)公式サイト

ハワイの鳥

きれいな書体で、オリジナルのブログを作ろう!

Xserver(エックスサーバー)のWebフォント機能を図解しました。エックスサーバーは、老舗書体「モリサワ」の有料デザインフォントを無料で使えるので、お得ですよ!

書体を選んで、スタイリッシュな自分だけのサイトを作ってみましょう。


あわせて読みたい記事

エックスサーバー(Xserver)にしてよかった! エックスサーバーがおすすめの理由です。