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度目の合格。参加写真撮影会の一部始終を大公開
  2. ウルトラマンフェスティバル2017 振り返りネタバレレビュー
  3. 映画「劇場版ウルトラマンジード」感想・レポート(少々ネタバレ有)
  4. ウルトラマンジード カプセルコンプリートの最短方法を考える
  5. スパム対策プラグイン「Throws SPAM Away」の使い方・使用方法

関連記事

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

    ブログ運営

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

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

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

    ブログ運営

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

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

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

    ブログ運営

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

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

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

    ブログ運営

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

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

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

    ブログ運営

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

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

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

    ブログ運営

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

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

コメント

  • コメント (0)

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

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

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

最近の記事

  1. 熱海ニューフジヤホテル宿泊レビュー。部屋・バイキング・駐車場など
  2. マンホールカード第6弾「焼津市」 配布場所・入手方法について
  1. 初めての竹島水族館。定休日 料金 クーポン 駐車場 見所など

    イベント・遊び場・公園

    初めての竹島水族館。定休日 料金 クーポン 駐車場 見所など
  2. 子供をウルトラマン好きにさせるべき3つのオトクな理由

    ウルトラマン

    子供をウルトラマン好きにさせるべき3つのオトクな理由
  3. 子育て・育児日記

    スタジオマリオで七五三写真を安く撮るなら超早撮りに限る
  4. キッズ時計 時刻ボード・メッセージボードの作り方

    子育て・育児日記

    キッズ時計 時刻ボード・メッセージボードの作り方
  5. ウルトラマンフェスティバル2017 振り返りネタバレレビュー

    ウルトラマン

    ウルトラマンフェスティバル2017 振り返りネタバレレビュー
PAGE TOP