エックスサーバーでサーバーをレンタルすると、モリサワWebフォントが使えます。
「WordPress簡単移行」を使ってサイト移転したせいか、新規にオープンしたサイトには、最初からプラグインの「TypeSquare Webfonts for エックスサーバー」がインストールされていました。
このプラグインを使うのが利用の条件かと思い込み、有効化して使い始めましたが、実際にはHTMLを使って自由に使う方法もありました。
この記事では、２種類の使い方を備忘録も兼ねてご紹介したいと思います。
Webフォント機能を使う準備（サーバー側)
エックスサーバーのWebフォント機能を使うには、サーバーパネルにログインして「Webフォント設定」を追加しておく必要があります。
- エックスサーバーにアクセスし、サーバーパネルにログインします。
- 「Webフォント設定」をクリックします。
- 「Webフォント設定の追加」のプルダウンメニューから設定するドメインを選択し「設定する」ボタンクリックします。
以上でエックスサーバー側の設定は完了です。
これからブログをはじめる方におすすめ ＞＞ 初心者のためのブログ始め方講座
どちらか選ぼう！ Webフォントの使い方は2種類
準備が整ったら、次は実際にサイトで使う方法です。
エックスサーバー提供のWebフォントを使う場合、使い方には２通りのパターンが用意されているので、どちらの方法で使うかを決めておきましょう。
１つはWordPress用のプラグインを使う方法で、もう１つは自由に設定可能なHTML記述形式です。
プラグインを使う場合は最初に『テーマ』を決めるだけです。
その後の作業はプラグインにお任せなので、難しいことを考えずに使いたい人にお勧めです。
「もっと自由に使いたい！」とか、HTML＆CSSの知識があるならば、HTML記述形式がお勧めです。
HTMLで使ったほうが、圧倒的に自由度が高いです。こちらはプラグインを増やしたくない人にもお勧めです。
私の場合、最初はプラグインを使っていましたが、途中でHTML記述形式に変えました。
途中で使い方を変えると、それまでプラグインが自動的に表示していたフォントの反映がなくなるので、使い方を決めるなら早い段階で決めたほうが良いと思います。
【Webフォント機能の利用条件】
- 33書体を月間7.5万PVまで利用できます。
月間7.5万PVを超える場合はWebフォントの適用は外れ、ブラウザ標準でのフォント表示に戻ります。
エックスサーバー提供のWebフォントを使う方法
タイプ1： プラグインを使う （対象：WordPress）
まずは、専用のプラグイン「TypeSquare Webfonts for エックスサーバー」をインストールし、有効化しておきましょう。
TypeSquare Webfonts の設定をする
- ダッシュボードを開き、追加されたメニュー「TypeSquare Webfonts」をクリックします。
- フォントテーマのプルダウンメニューからテーマを選択し、「フォントテーマを更新する」をクリックしてください。
Webフォントが反映する場所
プラグインを使った場合、次の４か所にテーマごとのフォントが反映します。
タイプ2： HTML記述形式 （対象：一般サイト、WordPress）
HTMLに記述する方法を使えば、サイト内で自由に設定が可能になります。
CSSで特別な見出しやボックスデザインに使って楽しめます。
（準備）HEADタグにコードを貼り付ける
<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>上記コードを、Webフォントで表示したいページのHEADタグ(<head>～</head>)内に貼り付けます。
</head>タグ直前に貼り付けるよう推奨されています。
Cocoonの場合…
テーマCocoonを使っている場合、貼り付ける場所は２通りあります。
どちらか好きなパターンで貼り付けてください。
パターン1
［Cocoon設定］→［アクセス解析・認証］→［ヘッド用コード］内に貼り付けます。
パターン2
- ダッシュボード［外観］→［テーマファイルエディタ］
- 編集するテーマに［Cocoon-Child］（子テーマ）が選択されていることを確認します。もしも親テーマになっていたら、子テーマに選択し直してください。
- 「tmp-use」→「head-insert.php」を選択します。
- 最終行にコードを貼り付け、［ファイルを更新］します。
最近では「パターン1」の方法でコードを貼り付けるのが主流のようです。
アクセス解析用のコードとゴチャ混ぜにしたくない場合など、何かしらの事情がある場合の選択肢として「パターン2」を覚えておくとよいと思います。
これで準備完了！
あとは、CSSを使ってスタイルを設定します。
CSSを編集する
Webフォントを適用したいタグやクラスにfont-familyを使って指定します。
第1章 Webフォントの使い方
上記のサンプルは、Webフォント「シネマレター」を適用したものです。
<h1>Webフォントの使い方</h1>h1{
font-family: "シネマレター";
background: #e0f2f1;
padding: 6px 10px;
}使える33書体：CSS指定用コード＆フォント見本
指定できるフォントと、CSS指定用コードです。
日本語で指定する場合は「”」(ダブルクォート)で囲む必要があります。
/* 日本語で指定する場合 */
p{ font-family: "リュウミン R-KL"; }
/* 英語で指定する場合 */
p{ font-family: Ryumin Regular KL; }| 日本語で記述 | 英語で記述 | フォント見本 |
|---|---|---|
| リュウミン R-KL | Ryumin Regular KL |  |
| リュウミン B-KL | Ryumin Bold KL |  |
| 黎ミン M | Reimin Medium |  |
| A1明朝 | A1 Mincho |  |
| しまなみ | Shimanami |  |
| 新ゴ R | Shin Go Regular |  |
| 新ゴ B | Shin Go Bold |  |
| ゴシックMB101 B | Gothic MB101 |  |
| 見出しゴMB31 | Midashi Go MB31 |  |
| 中ゴシックBBB | Gothic Medium BBB |  |
| じゅん 201 | Jun 201 |  |
| じゅん 501 | Jun 501 |  |
| 新丸ゴ R | Shin Maru Go Regular |  |
| 秀英にじみ丸ゴシック B | Shuei NijimiMGo B |  |
| 丸フォーク M | Maru Folk Medium |  |
| フォーク M | Folk Medium |  |
| シネマレター | Cinema Letter |  |
| はるひ学園 | Haruhi Gakuen |  |
| G2サンセリフ-B | GSanSerif-B |  |
| 那欽 | Nachin |  |
| 竹 B | Take Bold |  |
| 新ゴ シャドウ | Shin Go Shadow |  |
| ぶらっしゅ | Brush-U |  |
| トーキング | Talking |  |
| すずむし | Suzumushi |  |
| 教科書ICA M | Kyoukasho ICA Medium |  |
| 陸隷 | Likurei |  |
| TB古印体 | Kointai-M |  |
| さくらぎ蛍雪 | SakuraKeisetsu |  |
| TBUDゴシック R | TBUDGothic R |  |
| TBUDゴシック E | TBUDGothic E |  |
| UD新ゴ コンデンス90 L | UD Shin Go Conde90 L |  |
| UD新ゴ コンデンス90 M | UD Shin Go Conde90 M |  |
