MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインエックスサーバーのWebフォントの使い方:フォント一覧付き2019.08.05エックスサーバーエックスサーバー活用HOMEレンタルサーバーエックスサーバーエックスサーバーのWebフォントの使い方:フォント一覧付きエックスサーバーを使用してる人なら無料で使用することができるWebフォント「モリサワ」モリサワWebフォントのことはあまり詳しくないですが調べてみると、なかなかお値段のするフォントなのですね。そのモリサワのWebフォントがエックスサーバーを使用してると無料で使用できるので使い方を学んでみました。使用する条件としてPV数が関係するので、それも踏まえて説明していきます。Webフォント書体一覧エックスサーバーのWebフォントを使える条件エックスサーバーのWebフォントの使い方の前に知っておきたい「Webフォントを使える条件」があります。エックスサーバーのWebフォントが使える「Webフォント設定」はサーバーアカウント全体で月間75,000PVまで使用が可能です。WordPressの場合の使える条件はプラグインの説明を確認すると月間25,000ページビューまでご利用になれます。PV数が上限を超えた場合はエックスサーバーのWebフォントは使用されずに、ブラウザ標準のフォントやサイトで使用してるフォントが表示されるようになります。AdvertisementPVが達してしまうとエックスサーバーのWebフォントは適用から外れてしまうようです。使用していたエックスサーバーのWebフォントが解除されて慌てないために「Webフォント設定」にてPV数の目安が分かるようになってるのでWebフォント設定と合わせて下記で紹介します。エックスサーバーのWebフォント設定の使い方エックスサーバーのWebフォントを使いたい場合の「Webフォント設定」の使い方です。下記の手順でエックスサーバーの「Webフォント設定」まで進みます。サーバーパネルWebフォント設定Webフォント設定の追加そしてWebフォント設定の追加で「設定対象ドメイン」を選択します。これでエックスサーバー側の設定は完了です。0PV/75,000PVです。」のようにPV数が表示されます。AdvertisementWebフォント設定からエックスサーバーのWebフォント使用PV上限に対しての現在PV数を確認できるので、Webフォントを使用する「目安」とした使い方ができます。実際にエックスサーバーのWebフォントを使用するWebサイト側での使い方ですが2種類あります。上記の2種類の使い方があるので、初めにWordPressサイトの場合の「プラグイン」の使い方から紹介します。エックスサーバーを使用してWordPressを使い始めたときに初めからエックスサーバーのプラグインが入っていたと思います。エックスサーバー」を必要ないと思い削除してしまっていても下記からダウンロードできます。Webfonts」と表示されます。Webfonts」をクリックするとエックスサーバーのWebフォント設定に進めます。エックスサーバーの設定画面では元から作成してあるフォントテーマを13種類使うことができます。13種類から使いたい「フォントテーマ」を選んで「フォントテーマを更新する」をクリックするとエックスサーバーのWebフォントが反映されます。AdvertisementWebフォントを部分ごとに使えるように自分でフォント種類を組み立ててオリジナルのWebフォントテーマにした使い方もできます。その場合は13種類あるフォントテーマ項目の一番上にある項目の「新しくテーマを作る」から作成します。テーマタイトルを決めます。上記Webフォント適用箇所にエックスサーバーのWebフォントの「書体」「フォントファミリー」「フォント名」を選んでWebフォントのセットをします。セットできたら「フォントテーマを更新する」で作成完了。フォント設定クラスについて※画像の「hoge」は適当に指定しただけなので、HTMLのタグで指定をしてください。適用される箇所というのは「フォント設定クラス」に表示されてるタグの部分に適用されます。それなのでエックスサーバーのWebフォントを適用したくないとか、逆に追加したい部分がある場合は「フォント設定クラス」からタグを削除したり追加してクラス設定してコントロールができます。上記画像のようなシンプルなフォントで書かれた文章から「フォント設定クラス」を使うと下記のようなWebフォントの変更をする使い方ができます。本文の箇所の設定したWebフォントを適用するHTMLタグで囲みます。<strong>タグの部分は強調タグの部分として使用したり、他に新たにタグを追加してWebフォントの使い方をコントロールしていく適用のさせ方ができると思います。Advertisementまた「フォント設定クラス」の下の「個別記事フォント設定」から「記事ごとにフォント設定」にチェックを入れれば、記事ごとにエックスサーバーのWebフォント適用する使い方ができます。プラグインの使い方がややこしいなと思えばHTMLで使う方法にすると簡単に使えるかと思います。WebフォントをHTMLで使う方法エックスサーバーのWebフォントを使うサイトがHTMLサイトの場合に必要になってくるHTMLを記述して使う方法です。HTMLサイトを主にしてますが、WordPressを使ったサイトにもHTMLを使う方法で使用することができます。src="//webfonts.xserver.jp/js/xserver.js"></script>まずはscriptをエックスサーバーのWebフォントを使いたいHTMLページの</head>直上に記述します。エックスサーバーのWebフォントを適用したいHTML要素にCSSでフォントファミリーをあてていきます。<h2>Webフォントで表示される文</h2>例えばページ内のh2タグにWebフォントを適用するとします。"Kointai-M";}CSSでh2タグに対してfont-familyの値を選んで指定したWebフォントが表示できます。個人的にはHTMLとCSSでWebフォントを表示させるほうが慣れてるので使い方が楽でした、エックスサーバーのWebフォント一覧エックスサーバーで使用できるWebフォントは「モリサワフォント」です。使用できるモリサワのWebフォントを一覧にしてみました。font-familyでWebフォントを指定するスタイルの一覧とWebフォントの書体例の一覧にしてます。使用できるWebフォントの種類は30種類です。Webフォントスタイル一覧Webフォントスタイル一覧の「日本語で記述」または「英語で記述」のどちらかをCSSで記述します。次にWebフォントスタイルの一覧で指定したら実際に表示されるWebフォントの書体の一覧です。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2018.09.13エックスサーバーのサーバーパネルに用があって行った時の事です。Xアクセラレータの他にも高速化設定ができるのを見つけました。2018.08.14エックスサーバーの申し込みをするときの登録方法の説明です。2019.03.19エックスサーバーのXアクセラレータVer.2が提供開始になったとエックスサーバーからお知らせがきました。2019.04.02エックスサーバーで子テーマを作成する方法です。WordPress.。