エックスサーバーを使用してる人なら無料で使用することができるWebフォント「モリサワ」
モリサワWebフォントのことはあまり詳しくないですが調べてみると、なかなかお値段のするフォントなのですね。
そのモリサワのWebフォントがエックスサーバーを使用してると無料で使用できるので使い方を学んでみました。
使用する条件としてPV数が関係するので、それも踏まえて説明していきます。
エックスサーバーのWebフォントを使える条件
エックスサーバーのWebフォントの使い方の前に知っておきたい「Webフォントを使える条件」があります。
エックスサーバーのWebフォントが使える「Webフォント設定」はサーバーアカウント全体で月間75,000PVまで使用が可能です。
そしてWordPressの場合の使える条件はプラグインの説明を確認すると月間25,000ページビューまでご利用になれます。となっています。
PV数が上限を超えた場合はエックスサーバーのWebフォントは使用されずに、ブラウザ標準のフォントやサイトで使用してるフォントが表示されるようになります。
PVが達してしまうとエックスサーバーのWebフォントは適用から外れてしまうようです。いきなり使用していたエックスサーバーのWebフォントが解除されて慌てないために「Webフォント設定」にてPV数の目安が分かるようになってるのでWebフォント設定と合わせて下記で紹介します。
エックスサーバーのWebフォント設定の使い方
エックスサーバーのWebフォントを使いたい場合の「Webフォント設定」の使い方です。
下記の手順でエックスサーバーの「Webフォント設定」まで進みます。
- サーバーパネル
- Webフォント設定
- Webフォント設定の追加
そしてWebフォント設定の追加で「設定対象ドメイン」を選択します。
これでエックスサーバー側の設定は完了です。
Webフォント設定をしてみると分かるのですが、設定をした後にWebフォント設定画面には「月初から昨日までの合計PV数は 0PV/75,000PVです。」のようにPV数が表示されます。
Webフォント設定からエックスサーバーのWebフォント使用PV上限に対しての現在PV数を確認できるので、Webフォントを使用する「目安」とした使い方ができます。
xserverのWebフォントの使い方は2種類
実際にエックスサーバーのWebフォントを使用するWebサイト側での使い方ですが2種類あります。
- WordPressサイトの場合
- HTMLサイトの場合
上記の2種類の使い方があるので、初めにWordPressサイトの場合の「プラグイン」の使い方から紹介します。
エックスサーバーを使用してWordPressを使い始めたときに初めからエックスサーバーのプラグインが入っていたと思います。
エックスサーバーのプラグイン名は「TypeSquare Webfonts for エックスサーバー」
「TypeSquare Webfonts for エックスサーバー」を必要ないと思い削除してしまっていても下記からダウンロードできます。
typesquare webfonts for エックスサーバーの使い方
TypeSquare Webfonts for エックスサーバーをWordPressにインストールして有効にすると管理画面のサイドメニューに「TypeSquare Webfonts」と表示されます。
表示された「TypeSquare Webfonts」をクリックするとエックスサーバーのWebフォント設定に進めます。
上の画像のようにTypeSquare Webfonts for エックスサーバーの設定画面では元から作成してあるフォントテーマを13種類使うことができます。
13種類から使いたい「フォントテーマ」を選んで「フォントテーマを更新する」をクリックするとエックスサーバーのWebフォントが反映されます。
Webフォントを部分ごとに使えるように自分でフォント種類を組み立ててオリジナルのWebフォントテーマにした使い方もできます。
その場合は13種類あるフォントテーマ項目の一番上にある項目の「新しくテーマを作る」から作成します。
テーマタイトルを決めます。
そして
Webフォントの適用箇所
- タイトル
- リード
- 本文
- 太字
上記Webフォント適用箇所にエックスサーバーのWebフォントの「書体」「フォントファミリー」「フォント名」を選んでWebフォントのセットをします。
セットできたら「フォントテーマを更新する」で作成完了。
フォント設定クラスについて
※画像の「hoge」は適当に指定しただけなので、HTMLのタグで指定をしてください。
Webフォントの適用箇所に出てきた「タイトル」「リード」「本文」「太字」が適用される箇所というのは「フォント設定クラス」に表示されてるタグの部分に適用されます。
それなのでエックスサーバーのWebフォントを適用したくないとか、逆に追加したい部分がある場合は「フォント設定クラス」からタグを削除したり追加してクラス設定してコントロールができます。
例えば上記画像のようなシンプルなフォントで書かれた文章から「フォント設定クラス」を使うと下記のようなWebフォントの変更をする使い方ができます。
本文の箇所の設定したWebフォントを適用するHTMLタグで囲みます。<strong>タグの部分は強調タグの部分として使用したり、他に新たにタグを追加してWebフォントの使い方をコントロールしていく適用のさせ方ができると思います。
また「フォント設定クラス」の下の「個別記事フォント設定」から「記事ごとにフォント設定」にチェックを入れれば、記事ごとにエックスサーバーのWebフォント適用する使い方ができます。
プラグインの使い方がややこしいなと思えばHTMLで使う方法にすると簡単に使えるかと思います。
WebフォントをHTMLで使う方法
エックスサーバーのWebフォントを使うサイトがHTMLサイトの場合に必要になってくるHTMLを記述して使う方法です。
HTMLサイトを主にしてますが、WordPressを使ったサイトにもHTMLを使う方法で使用することができます。
<script type="text/javascript" src="//webfonts.xserver.jp/js/xserver.js"></script>
まずはscriptをエックスサーバーのWebフォントを使いたいHTMLページの</head>直上に記述します。
そしてエックスサーバーのWebフォントを適用したいHTML要素にCSSでフォントファミリーをあてていきます。
<h2>Webフォントで表示される文</h2>
例えばページ内のh2タグにWebフォントを適用するとします。
h2 {
font-family: "Kointai-M";
}
CSSでh2タグに対してfont-familyの値を選んで指定したWebフォントが表示できます。
個人的にはHTMLとCSSでWebフォントを表示させるほうが慣れてるので使い方が楽でした、
エックスサーバーのWebフォント一覧
エックスサーバーで使用できるWebフォントは「モリサワフォント」です。
使用できるモリサワのWebフォントを一覧にしてみました。
font-familyでWebフォントを指定するスタイルの一覧とWebフォントの書体例の一覧にしてます。
使用できるWebフォントの種類は30種類です。
Webフォントスタイル一覧
Webフォントスタイル一覧の「日本語で記述」または「英語で記述」のどちらかをCSSで記述します。
日本語で記述 | 英語で記述 |
---|---|
リュウミン R-KL | Ryumin Regular KL |
リュウミン B-KL | Ryumin Bold KL |
黎ミン M | Reimin Medium |
A1明朝 | A1 Mincho |
新ゴ 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 |
丸フォーク 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 |
TBUDゴシック R | TBUDGothic R |
TBUDゴシック E | TBUDGothic E |
UD新ゴ コンデンス90 L | UD Shin Go Conde90 L |
UD新ゴ コンデンス90 M | UD Shin Go Conde90 M |
参考:エックスサーバー
Webフォント書体一覧
次にWebフォントスタイルの一覧で指定したら実際に表示されるWebフォントの書体の一覧です。
ー明朝体ー
リュウミンR-KL
リュウミンB-KL
黎ミンM
A1明朝
ーゴシック体ー
新ゴ R
新ゴ B
ゴシックMB101B
見出ゴMB31
中ゴシックBBB
ー丸ゴシック体ー
じゅん 201
じゅん 501
新丸ゴ R
ーデザイン書体ー
丸フォーク M
フォーク M
シネマレター
はるひ学園
G2サンセリフ-B
那欽
竹 B
ぶらっしゅ
トーキング
すずむし
ー装飾書体ー
新ゴ シャドウ
ー筆書体ー
教科書ICA M
陸隷
TB 古印体
ーUD書体ー
TBUDゴシック R
TBUDゴシック E
UD新ゴ コンデンス 90 L
UD新ゴ コンデンス90 M