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. 「富士山こどもの国」入場料金がぐぐっと安くなる!3つの方法
  2. しまだ音楽広場レポート 駐車場・混雑・施設・食事など
  3. うちの子供をグイッと引き寄せた、とある美容室の集客方法
  4. 子供をウルトラマン好きにさせるべき3つのオトクな理由
  5. ブログ開設1ヶ月。初心者が導入するべきワードプレスプラグイン6選

関連記事

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

    ブログ運営

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

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

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

    ブログ運営

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

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

  3. ブログ運営

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

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

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

    ブログ運営

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

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

  5. スパム対策プラグイン「Throws SPAM Away」の使い方・使用方法

    ブログ運営

    スパム対策プラグイン「Throws SPAM Away」の使い方・使用方法

    WordPress(ワードプレス)でのブログ運営も2ヶ月目に入りました…

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

    ブログ運営

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

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

コメント

  • コメント (0)

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

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

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

最近の記事

  1. 熱海ニューフジヤホテル宿泊レビュー。部屋・バイキング・駐車場など
  2. マンホールカード第6弾「焼津市」 配布場所・入手方法について
  1. 「ロカボ牛麺」「ロカボ牛ビビン麺」食べ比べての感想

    食事・外食

    「ロカボ牛麺」「ロカボ牛ビビン麺」食べ比べての感想
  2. ブログ運営

    Wikipediaに寄付した5年後、こんなメールが届きました
  3. アイカツ5周年記念イベント in 富士急 見どころ・内容など

    イベント・遊び場・公園

    アイカツ5周年記念イベント in 富士急 見どころ・内容など
  4. 小学生低学年の勉強・試験に役立つ検定資格試験ベスト3

    勉強・学習

    小学生低学年の勉強・試験に役立つ検定資格試験ベスト3
  5. WebSub/PubSubHubbubとは?ワードプレスに実装してみた結果

    ブログ運営

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