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

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

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

そのため、このプラグインを有効化することが利用の条件かと勘違いしてしまい、そのまま使い続けていました。

ただ個人ブログの場合、そこまで凝ったデザインフォントを使う場面がほとんど無く、普段はせいぜい見出しに使うくらいです。そうなると、プラグインを入れてまで使う必要があるのか?という疑問が生まれます。

プラグインを外したらモリサワフォントを使えなくなるという思い込みがあってジレンマに陥っていましたが、なんと、Webフォントを使う方法は2種類用意されていることに気づきました。

もうひとつの方法ならプラグインを削除して、CSS対応で好きな場所で使えるようになります。

高品質なモリサワフォントは使いたい、だけどプラグインの数は減らしたい、という場合は、ぜひもうひとつの方法をお試しあれ。

エックスサーバー:Webフォントの使い方は2種類ある

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

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

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

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

専用のプラグイン「TypeSquare Webfonts for エックスサーバー」を使って設定するだけで、簡単にWebフォントを適用できます。

タイトル、リード、本文、太字の4か所に、それぞれ使用するフォントを選択してひとつのテーマを作り、テーマに合わせてサイト内で適用されます。

テーマはもともと用意されているものと、オリジナルのテーマを作ることができます。

サイトの雰囲気に合わせたフォントを最初に決めておくため、記事の編集作業ではフォントのことを気にせず作業ができる手軽さがあります。

上級者向けにカスタマイズできるようになってはいますが、自由度は低いです。

※ 今回の記事は次の「HTML記述形式」で使う方法をメインにしているため、プラグインの使い方は割愛します。

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

HTMLに記述する方法を使えば、サイト内で自由に設定が可能になります。CSSで特別な見出しやボックスデザインに使って楽しめます。

HTMLで使う方法

HTMLで使うには、最初に準備が必要です。

もしも先にプラグイン「TypeSquare Webfonts for エックスサーバー」を導入している場合は、無効化しておきます。

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

HEADタグ(<head>~</head>)内の、</head>タグの直前に次のコードをコピーして貼り付けます。

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

Cocoonでheadタグ内にコードを貼り付ける場所(パターン1)

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

Cocoonでheadタグ内にコードを貼り付ける場所(パターン2)

設定前にバックアップを取るようにしてください。

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

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

最近では「パターン1」の方法でコードを貼り付けるのがメジャーになっているようです。

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

これで準備完了です。

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

CSSを編集する

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

例えば…

第1章 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"; }

モリサワWebフォントの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をコピーしました