[エックスサーバー]モリサワWebフォント:プラグインを使わずに使う方法があった!

エックスサーバーでサーバーをレンタルすると、モリサワWebフォントが使えます。

「WordPress簡単移行」を使ってサイト移転したせいか、新規にオープンしたサイトには、最初からプラグインの「TypeSquare Webfonts for エックスサーバー」がインストールされていました。

このプラグインを使うのが利用の条件かと思い込み、有効化して使い始めましたが、実際にはHTMLを使って自由に使う方法もありました。

この記事では、2種類の使い方を備忘録も兼ねてご紹介したいと思います。

Webフォント機能を使う準備(サーバー側)

エックスサーバーのWebフォント機能を使うには、サーバーパネルにログインして「Webフォント設定」を追加しておく必要があります。

  1. エックスサーバーにアクセスし、サーバーパネルにログインします。
  2. Webフォント設定」をクリックします。
  3. Webフォント設定の追加」のプルダウンメニューから設定するドメインを選択し「設定する」ボタンクリックします。

以上でエックスサーバー側の設定は完了です。

これからブログをはじめる方におすすめ >> 初心者のためのブログ始め方講座

どちらか選ぼう! Webフォントの使い方は2種類

準備が整ったら、次は実際にサイトで使う方法です。

エックスサーバー提供のWebフォントを使う場合、使い方には2通りのパターンが用意されているので、どちらの方法で使うかを決めておきましょう。

1つはWordPress用のプラグインを使う方法で、もう1つは自由に設定可能なHTML記述形式です。

プラグインを使う場合は最初に『テーマ』を決めるだけです。

その後の作業はプラグインにお任せなので、難しいことを考えずに使いたい人にお勧めです。

「もっと自由に使いたい!」とか、HTML&CSSの知識があるならば、HTML記述形式がお勧めです。

HTMLで使ったほうが、圧倒的に自由度が高いです。こちらはプラグインを増やしたくない人にもお勧めです。

私の場合、最初はプラグインを使っていましたが、途中でHTML記述形式に変えました。

途中で使い方を変えると、それまでプラグインが自動的に表示していたフォントの反映がなくなるので、使い方を決めるなら早い段階で決めたほうが良いと思います。

【Webフォント機能の利用条件】

  • 33書体を月間7.5万PVまで利用できます。
    月間7.5万PVを超える場合はWebフォントの適用は外れ、ブラウザ標準でのフォント表示に戻ります。
\ 詳細をみる/

エックスサーバー提供のWebフォントを使う方法

タイプ1: プラグインを使う (対象:WordPress)

まずは、専用のプラグインTypeSquare Webfonts for エックスサーバー」をインストールし、有効化しておきましょう。

TypeSquare Webfonts の設定をする

  1. ダッシュボードを開き、追加されたメニュー「TypeSquare Webfonts」をクリックします。
  2. フォントテーマのプルダウンメニューからテーマを選択し、「フォントテーマを更新する」をクリックしてください。

Webフォントが反映する場所

プラグインを使った場合、次の4か所にテーマごとのフォントが反映します。

  • タイトル
  • リード
  • 本文
  • 太字

タイプ2: HTML記述形式 (対象:一般サイト、WordPress)

HTMLに記述する方法を使えば、サイト内で自由に設定が可能になります。

CSSで特別な見出しやボックスデザインに使って楽しめます。

TypeSquare Webfonts for エックスサーバーを有効化している場合は無効化しておきましょう。

(準備)HEADタグにコードを貼り付ける

<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>

上記コードを、Webフォントで表示したいページのHEADタグ(<head>~</head>)内に貼り付けます。
</head>タグ直前に貼り付けるよう推奨されています。

Cocoonの場合…

テーマCocoonを使っている場合、貼り付ける場所は2通りあります。

どちらか好きなパターンで貼り付けてください。

パターン1

[Cocoon設定]→[アクセス解析・認証]→[ヘッド用コード]内に貼り付けます。

パターン2
設定前にバックアップを取るようにしてください。
  1. ダッシュボード[外観]→[テーマファイルエディタ]
  2. 編集するテーマに[Cocoon-Child](子テーマ)が選択されていることを確認します。もしも親テーマになっていたら、子テーマに選択し直してください。
  3. 「tmp-use」→「head-insert.php」を選択します。

  4. 最終行にコードを貼り付け、[ファイルを更新]します。

最近では「パターン1」の方法でコードを貼り付けるのが主流のようです。

アクセス解析用のコードとゴチャ混ぜにしたくない場合など、何かしらの事情がある場合の選択肢として「パターン2」を覚えておくとよいと思います。

これで準備完了!

あとは、CSSを使ってスタイルを設定します。

CSSを編集する

Webフォントを適用したいタグやクラスにfont-familyを使って指定します。

例えば…

第1章 Webフォントの使い方

上記のサンプルは、Webフォント「シネマレター」を適用したものです。

<h1>Webフォントの使い方</h1>
h1{
    font-family: "シネマレター"; 
    background: #e0f2f1;
    padding: 6px 10px;
}

Webフォントはフォント本来の太さで表示する関係上、Bタグやfont-weightなどの太字設定は無効となります。
太字を適用したい場合は、太字にしたい範囲を別のタグで囲み、現在のフォントよりも太いWebフォントを適用します。

<p>Webフォントは<b>美しい!</b></p>
p{ font-family: "新ゴ R"; }
b{ font-family: "新ゴ B"; }

使える33書体:CSS指定用コード&フォント見本

指定できるフォントと、CSS指定用コードです。

日本語で指定する場合は「”」(ダブルクォート)で囲む必要があります。

/* 日本語で指定する場合 */
p{ font-family: "リュウミン R-KL"; }

/* 英語で指定する場合 */
p{ font-family: Ryumin Regular KL; }
日本語で記述英語で記述フォント見本
リュウミン R-KLRyumin Regular KL
リュウミン B-KLRyumin Bold KL
黎ミン MReimin Medium
A1明朝A1 Mincho
しまなみShimanami
新ゴ RShin Go Regular
新ゴ BShin Go Bold
ゴシックMB101 BGothic MB101
見出しゴMB31Midashi Go MB31
中ゴシックBBBGothic Medium BBB
じゅん 201Jun 201
じゅん 501Jun 501
新丸ゴ RShin Maru Go Regular
秀英にじみ丸ゴシック BShuei NijimiMGo B
丸フォーク MMaru Folk Medium
フォーク MFolk Medium
シネマレターCinema Letter
はるひ学園Haruhi Gakuen
G2サンセリフ-BGSanSerif-B
那欽Nachin
竹 BTake Bold
新ゴ シャドウShin Go Shadow
ぶらっしゅBrush-U
トーキングTalking
すずむしSuzumushi
教科書ICA MKyoukasho ICA Medium
陸隷Likurei
TB古印体Kointai-M
さくらぎ蛍雪SakuraKeisetsu
TBUDゴシック RTBUDGothic R
TBUDゴシック ETBUDGothic E
UD新ゴ コンデンス90 LUD Shin Go Conde90 L
UD新ゴ コンデンス90 MUD Shin Go Conde90 M

タイトルとURLをコピーしました