XserverのWordPressサイトにWebフォントを簡単設定する方法

ブログ運営

XserverのWordPressサイトにWebフォントを簡単設定する方法

サーバーにXserver(エックスサーバー)を使っているサイト・ブログは、Webフォント(ウェブフォント)が簡単に導入できるようになりました。

このブログもXserverを使っています。

XserverにおけるWebフォントの導入方法と、導入すると見え方がどう変わるのか。
この2点の疑問を、実際に導入する実験台となってレビューしてみようと思います。

Webフォント(ウェブフォント)とは

Webフォントとは、サーバー上にあるWebフォントファイルを読み込み、パソコン・スマートフォンなど、どの端末からホームページを見ても同じ文字デザインを表示する機能です。

通常、サイトに文字を表示する場合、端末にインストールされているフォントを呼び出すため、端末の種類によって見え方が違う場合がありました。

Webフォントは、指定したフォントファイルを読み込むことで、どの端末でも同じフォントを表示することができます。
そのため、サイト・ブログの運営者が見せたい、安定したデザインを提供することができるのです。

実際の導入方法

それでは、ワードプレスのブログ(このブログのことです)に実際に導入する方法をご案内していきましょう。

まずはXserverの管理画面(サーバーパネル)にログインしましょう。
画面下に「Webフォント設定」という項目があります。ここを左クリックです。

エックスサーバー管理画面 サーバーパネル

次に、Webフォントを導入するブログ・サイトを選択し、「設定する」ボタンを左クリック。

Webフォント 導入サイト・ブログの設定

ここで注意点が一つ。
Xserverはサーバーを1つ契約するだけで複数ドメインを運用可能ですが、Webフォントを導入できるのは1ドメインのみです。

と言っても同時に設定できるのは1ドメインという意味で、最初に設定したドメインからWebドメインを削除し、他のドメインに設定するということは全然可能。
あまり深く考えず、優先順位の高いものから設定していけば問題ないです。

次はワードプレスの管理画面に移動します。

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

TypeSquare Webfonts for エックスサーバーのインストール

その後、プラグインを有効化します。

TypeSquare Webfonts for エックスサーバーの有効化

管理画面サイドバーに「TypeSquare Webfonts」という項目ができました。
左クリックすると設定画面が開きます。

最初から設定がいくつか用意されています。

今回使えるようになったのは老舗書体メーカー「モリサワ」のWebフォント。
無難に「ベーシック」を選んでみます。

なお、こだわりがある人用に、「見出しタグ」「リードタグ」「本文タグ」「強調タグ」「個別記事フォント」をそれぞれ設定することもできます。

TypeSquare Webfonts for エックスサーバーの設定

フォントテーマの設定が完了しました。

TypeSquare Webfonts Plugin for エックスサーバー フォントテーマの設定に成功

では実際どう変わったのか見てみましょう。

これは前回の記事です。
Webフォントを使う前はこんな感じでした。

Webフォント 使用前

そして使用後はこのような具合。
見出しが太くなっているのがお分かりになるでしょうか。

Webフォント 使用後

次は和風にしてみました。
見出しの違いがはっきりと分かりますね。

Webフォント 和風

クリックするだけの簡単設定

特に複雑な操作はなく、クリックしていくだけでWebフォントの設定をすることができました。
今まで閲覧するPC側に依存していたフォント設定をWebで制御できるようになったのは画期的です。

唯一のデメリットは、Webフォントは月間2.5万PVまでのサイト・ブログに有効だということ。
これ以上のアクセス数があると、負荷が強いためか、自動的にWebフォントは解除されてしまいます。

その他にデメリットはありません。利用料金も無料です。
Xserverにサイト・ブログを持っている方は是非お試しください。

ピックアップ記事

  1. ウルトラマンシリーズ ダイキャストスイング レビュー
  2. ウルトラアスレチックららぽーと横浜店 料金やクーポンなど
  3. ぐりんぱで開催されたウルトラマンスタンプラリーに参加してみた
  4. ホーロー洗面台の割れを自分で修理・補修してみた
  5. ウルトラマンジード カプセルコンプリートの最短方法を考える

関連記事

  1. ブログ開設3ヶ月の収益公開。アドセンス収支・Amazonなど

    ブログ運営

    ブログ開設3ヶ月の収益公開。アドセンス収支・Amazonなど

    先月末でこのブログも開設から3ヶ月目を迎えました。既に6月も中旬に…

  2. WebSub/PubSubHubbubとは?ワードプレスに実装してみた結果

    ブログ運営

    WebSub/PubSubHubbubとは?ワードプレスに実装してみた結果

    突然ですが質問です。ブログ・ホームページを多くの人に見てもらうため…

  3. たった3つのルールでブログ月間10,000PVは達成できる

    ブログ運営

    たった3つのルールでブログ月間10,000PVは達成できる

    今年3月に始めたこのブログ。当初は閑古鳥が鳴く寂しい状況でしたが、5ヶ…

  4. ブログ運営

    Wikipediaに寄付した5年後、こんなメールが届きました

    何かを調べたいときに便利なのがWikipedia(ウィキペディア)。…

  5. 【実体験】ブログを5ヶ月放置するとアクセス数はどうなるのか

    ブログ運営

    【実体験】ブログを5ヶ月放置するとアクセス数はどうなるのか

    皆様お久しぶりです。約5か月間、ブログを放置しておりました。もはや…

  6. ブログ開設1ヶ月。初心者が導入するべきワードプレスプラグイン6選

    ブログ運営

    ブログ開設1ヶ月。初心者が導入するべきワードプレスプラグイン6選

    4月になりました。新年度です。先月の3月7日に初記事が投稿されたこ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

最近の記事

  1. 熱海ニューフジヤホテル宿泊レビュー。部屋・バイキング・駐車場など
  2. マンホールカード第6弾「焼津市」 配布場所・入手方法について
  1. ぐりんぱで開催されたウルトラマンスタンプラリーに参加してみた

    ウルトラマン

    ぐりんぱで開催されたウルトラマンスタンプラリーに参加してみた
  2. ウルトラマンオーブ 続編

    ウルトラマン

    ウルトラマンオーブ THE ORIGIN SAGA 最終回。そして続編
  3. マンホールカード第5弾「沼津市」の入手方法

    趣味・コレクション

    マンホールカード第5弾「沼津市」の入手方法
  4. アイカツ5周年記念イベント in 富士急 見どころ・内容など

    イベント・遊び場・公園

    アイカツ5周年記念イベント in 富士急 見どころ・内容など
  5. DXジードライザーを早めに予約した方が良い2つの理由

    ウルトラマン

    DXジードライザーを早めに予約した方が良い2つの理由
PAGE TOP