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. 【2017年最新版】マンホールカードの導入自治体・入手方法
  2. 「褒めて伸ばす」は正解。作文で分かった子供の本当の気持ち
  3. 小学生低学年の勉強・試験に役立つ検定資格試験ベスト3
  4. マンホールカード第4弾配布開始。早速静岡市ゲット
  5. 横浜で水上バスを初体験。乗船中の風景や見どころをレポート

関連記事

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

    ブログ運営

    ブログ開設1ヶ月・2ヶ月目の収益大公開。アドセンス収支など

    2017年3月7日に開設したこのブログも3ヶ月目に入りました。1ヶ…

  2. Google検索で2つのキーワードが1位になった理由を考える

    ブログ運営

    Google検索で2つのキーワードが1位になった4つの理由

    今年の3月7日にブログを始めてから95日目。ほぼ3ヶ月を経過したと…

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

    ブログ運営

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

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

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

    ブログ運営

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

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

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

    ブログ運営

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

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

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

    ブログ運営

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

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

コメント

  • コメント (0)

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

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

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

最近の記事

  1. 熱海ニューフジヤホテル宿泊レビュー。部屋・バイキング・駐車場など
  2. マンホールカード第6弾「焼津市」 配布場所・入手方法について
  1. 小学生低学年の勉強・試験に役立つ検定資格試験ベスト3

    勉強・学習

    小学生低学年の勉強・試験に役立つ検定資格試験ベスト3
  2. 映画「劇場版ウルトラマンジード」感想・レポート(少々ネタバレ有)

    ウルトラマン

    映画「劇場版ウルトラマンジード」感想・レポート(少々ネタバレ有)
  3. ウルトラマン対決セット ウルトラマンオーブ激闘編!!レビュー

    ウルトラマン

    ウルトラマン対決セット ウルトラマンオーブ激闘編!!購入レビュー
  4. ウルトラマン

    ウルトラマンジード カプセルコンプリートの最短方法を考える
  5. ぐりんぱで開催されたウルトラマンスタンプラリーに参加してみた

    ウルトラマン

    ぐりんぱで開催されたウルトラマンスタンプラリーに参加してみた
PAGE TOP