無料イラスト【イラストAC

本当に便利なWebフォントのホントの話!やっぱりXサーバーはいいネ!

2017年8月20日楽しみながら継続するための簡単カスタマイズWebフォント,WordPress,カスタマイズ,サーバー,プラグイン


inowayです。


あ、今回は Shortcodes Ultimateショートコード アルティメット の記事ではないです(笑)


まだまだ紹介したいオレティメットショートコードはいっぱいあるんですけどね。


ちょっと休憩です。

オレティメットショートコードとは?

Shortcodes Ultimate でオレティメットショートコードを創る!


あまりにも WordPressワードプレス のブログカスタマイズ記事が続いたので。


なので今回は趣向しゅこうを変えて・・・


Webウェブフォントでブログをカスタマイズ!!



という内容でお贈りします。


え?


ああ、スイマセン。


結局、カスタマイズ記事ですね。


しかもまた WordPressワードプレス のカスタマイズです。結局は。


まあいつも言ってますが、主旨しゅしとしては


ブログ、サイトを用いた情報発信ビジネスやアフィリエイトを楽しく続けよう。
inoway
inoway

というテーマのもと、そのための誰でも簡単に出来るスキルアップ楽しく更新出来るモチベーション維持のためのカスタマイズ紹介です。


諦めたらそこで試合終了ですよ。

優しいジェイソン


安西先生あんじぇいそんせいの有名な格言が示すように、継続し続けることが最高のスキルでありマインドです。

スラムダンクの井上雄彦先生ごめんなさい。ちなみに私の本名は井上先生と1字違いです(どーでも情報)
 
 さあ、

それでは気を取り直して参りましょう♪

本当フォントうに便利なWebウェブフォントのホントの話!
オヤジギャグが多いのは私がオヤジだからです。
 


真の思考低そもそもWebフォントとは何ぞや?


そうですね。


まずそこがわからないと何のことやらチンプンカンプンです。


なのでザックリと説明します。


いや、してもらいます。


Webフォントとは?

WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化(レンダリング)をともなうクライアントが文字表示を行うシステムおよびそのフォントである。 CSS3.0 fonts moduleで、この機能の標準が提供された。

https://ja.wikipedia.org/wiki/WebフォントWikipedia


ふむふむ。


なるほどね〜。


さすがわ Wikipediaウィキペディア 先生、非常にわかりやすいですね♪


それでは次のステップへ進みましょう!


まてコラ、全然わからんぞオイ!


あ、奇遇ですね。


私もサッパリわかりませんでした。


なんかアレですよね。


wiki ウィキって。


説明口調というか何というか・・・


関連する前提知識ありきで述べてますよね?


辞書みたい。

Wikipedia とはそーゆーものです。

という事で、もっとわかりやすいように私が私の考えと言葉でwebフォントについて説明します。

えー、webフォントのフォントってのは文字です。

文字のデザインですね。

ゴシック対とか明朝体、そんな感じのいわゆる書体ってやつです。

丸文字とか筆記体なんかもそのくくりですね。

で、その書体デザイン(フォント)をネット上、いわゆるweb上でみんなで共有できるように置いてあるもの。

それがwebフォントです。

置いてある?

ミイラ男
 


ええ。


サーバーとかにデータとして。


基本的に企業や団体が所有していますが、個人のデザイナーが自身のホームページなんかで公開していたりします。


世界的に有名なとこでGoogleが提供しているGoogleフォント、日本では株式会社モリサワのモリサワフォントがありますね。

 

 

ふ〜ん。

でもオレには関係ないね。

オレのブログ、WordPressだし。

ビジュアルエディタで豊富なフォントが使えるプラグイン入れてるし。

 

キョンシーのイラスト素材

ああ、フォントファミリーですね。


あれ、便利ですよね。


日本語フォントはありませんがローマ字はヨリドリミドリですし。


フォントファミリー選択機能 

 

おう、それそれ。

オレはそれのナントカNEWロマンってのよく使うぜ。

日本語がキレイな明朝体で表示されるからな。

 


狼男アイコン

それね。


確かにいい感じですよね。

ちょっとローマ字が小さいですが。

ただ、その前に

フォントファミリーで選べる文字って言うなれば機種依存文字きしゅいぞんもじみたいなもんですよね。

その書体で表示されるかどうかは相手先の環境次第というか。

 

キ、キス以上の女子?

魔王様
ドキンコ!ドキンコ!


君の脳内誤変換レベルは【ミス異常の星】ですね。

違います。

下水道のヌシでも下衆ゲス城之内じょうのうちでもありません。

機種依存文字きしゅいぞんもじです。
全国の城之内さんゴメンナサイ。

つまりは

その文字、その書体が表示されるかは相手先(訪問者)が使用してるPCやスマホの機能次第ということです。

極端な話、Windowsでは表示されるけどMacではダメなフォントとか普通にありえます。

ドコモとau、ソフトバンクで絵文字が共通ではないため[su_alpi code="mail1″]メール[/su_alpi]メールハートが表示されないとかそんなイメージです。

そのような場合はあなたが意図的に読ませたいフォントでは見せられない事になります。

それが機種依存文字の恐怖です。

まあ、とか言う前にに日本語のフォントがほぼ選択不可能な時点で我々ジャパン国のブロガーやアフィリエイターには不便ですけどね。

Webフォントの仕組み


じゃあ一体どうすればみんな共通のフォントで表示させられるのか?


みんな同じパソコンを使えばいい
(ノウナイニチョクセツモジヲオクルノダ)
もういっそのこと全員ころ…

そーゆー方法もあるのかも知れませんね。


ただ、物騒だし現実的ではないので人類は違う仕組みを作り出しています。


それがWebフォントの仕組みです。


さきほど説明したとおり、Webフォントは共有して使用するためにインターネット上の世界(サーバー内にデータとして)に置いてあります。


で、それを自分のサイトやブログで使える状態にすると、設定した文章をネットの中でWebフォントに置き換えて表示してくれるんです。


つまり、あなたの記事やコンテンツに訪問者がアクセスすると読み込み時間ロードちゅうの間にネット上で共通で表示されるデザイン書体として読者の端末で表現されるのです。


たとえばさっきのフランケンと宇宙人と死神のセリフ。


それぞれ3種類のWebフォントで表示されてますが私のPCやブログシステム(WordPressワードプレス)はこれらのフォントを搭載していません。


全てネット上の別サーバーからWebフォントに上書き表示されてるのです。


 日本語フォントを使いたい!!


ですよね。


基本的に日本語で書いてますもん。文章。


その日本語テキスト、いわゆる自分のサイトの文章を文字デザインのプロが作成した読みやすい書体で読んでもらえたらいいと思いません?


はたまた インパクト や 個性ある書体 で伝えたい言葉を表現したくありません?


私は常々つねづね思ってました。


自分が生み出した文章、作りだしたコンテンツは私というアーティストが創作した一個の作品だと思ってます。


なので内容のほうは自分が読んでも面白いと思える出来です。


それを視覚的にも表現の幅を広げて楽しんでもらいたいという思いで【振り仮名ふりがな】や【縁取りふちどり】のショートコードを作成して実装しています。



人もサイトも見た目が9割と言いますし(言い過ぎ?)


ほら、どんなに面白くて感動的な内容でも第一印象でゴメンナサイされたら読んでもらえませんしね〜。


と、いうわけでさっそく日本語のWebフォントを使用しましょう。


実装のしかたはけっこう簡単らしいですよ。


【コピペでカンタン、Webフォント♪】


とかググればいくらでも出てきます。


やろうと思えばどんなブログやサイトでも使えるのかな?


なんかPHPとかいうプログラム?


に何かを書き込んでHTMLタグるんだったかな?


ごめん、ググったけど私には無理でした(笑)


なんか怖いし。


全然かんたんじゃねー。


というのが感想です。


まあ、媒体の環境にもよるんでしょうが・・・


そんなこんなで諦めムードのなか、ある一通のお知らせメールが届きました。


この度エックスサーバーでは、 すべてのサーバープランを対象に、書体メーカーの老舗である「モリサワ」の Webフォントが無料でご利用可能な「Webフォント」機能の提供を開始いたしました。


「Webフォント」機能のご利用により、 画像編集ソフトでテキストを加工することなく、 手軽にサイトの見映えを向上させることが可能です。


利用可能な書体には「明朝体」「ゴシック体」などのベーシックなものから 「デザイン書体」まで幅広いジャンルを取り揃えており、 サイトの内容やデザインに合わせた柔軟な活用が可能です。Xserver

 

これね。

もうさすがわXサーバー様としか言いようがないです。

やっぱ選ばれるワケはあるなと。

ただでさえページスピードを上げるモジュールや国外IPアドレスからのアクセス制限セキュリティ、極めつけはサイト暗号化通信の実装(https化)まで無料でサービスしときながらのコレですよ。

どんだけユーザー目線やねん!!

と、怒りにもにた喜びがあふれてきます。

しかもモリサワフォント。

いろんな企業サイトでも使われてる日本で一番有名なWebフォントです。


なにはともあれ、Webフォントが契約サーバー側がサービスとして提供してくれる機能になっているんです。

コレなら私にも利用出来そうだと思いましたね。

てゆーか出来ました(笑)

プラグインで誰でもWebフォントを

 
XサーバーでのWebフォントの使用にはイロイロと制限があります。

まあ具体的に重要なのは2つですが。 

 [icon image="point1-1-g"]Webフォントを設定できるドメインは初期ドメイン、独自ドメインの中から1つだけです。

これは簡単に説明すると1サイトでしか使えませんよという意味です。

サブドメインもドメイン1つとしてカウントされます。
[icon image="point1-2-g"] 月間PV数 25,000PVまで

ひと月のサイトのPV数が 25,000PVを超えるとその月は設定が解除されます。

通常の個人サイトでは問題無いかなと思います。

以上です。

ちなみにPV上限オーバーで解除されても通常のフォントに戻るだけですので心配いりませんね。



で、使い方は?

 

これも2つあります。

HTMLサイトでも使える方式とWordPressワードプレスの専用プラグインをインストールして機能拡張として導入するスタイルです。

どちらにしても最初はXサーバーの管理画面からWebフォント設定で適用サイトを設定しなくてはなりません。

超簡単ですが。

で、私はプラグインでの導入を選びました。

理由は使用方法と管理が簡単そうだったからです。

極力複雑なプログラム的カスタマイズを避けたいというのもあります。


危ないしめんどいし。

WordPressワードプレスのプラグインは増やせば増やすほど処理能力の問題でいろんなとこに影響が出る恐れがありますがWebフォントの魅力に負けてしまいました(笑)

なので私はプラグイン【TypeSquare Webfonts for エックスサーバー】でWebフォントを実装してます。

TypeSquare Webfonts for エックスサーバーの使い方

こちら、WordPressワードプレスの公式プラグインとして登録されてるので WordPress プラグインディレクトリ より普通にインストール出来ます。

そしてダッシュボードから有効化。

続いてプラグイン設定で適用。

普通です。

これだけでWebフォントがあなたのサイトに。

TypeSquare紹介 WordPressプラグインディレクトリ

 


X サーバー以外にもモリサワフォントのプラグインサービスがあるようですね。

 

 


しかし私は超絶Xサーバー推しです。


 

TypeSquareオレジナル設定
TypeSquareオレジナル設定

 


設定画面を見るとわかりますが、わりと自由にフォントの適用箇所を選べます。


ちょっとしたHTMLタグの知識が必要になりますが難しくはありません。


画面は私の設定でテーマは【オレジナル】としてます(笑)


ちなみに全てのテキスト(本文)には適用させていません。


記事の文章全体をWebフォントに置き換えると読み込みにけっこうな時間がかかるので。


重くなる ってやつです。


とくに日本語フォントはローマ字などの英語フォントと比べて字数が多いぶん相当なデータ量なのです


漢字とか半端ない種類ですからね。


ですので使うには処理能力の高い環境がオススメです。


そんな意味も込めて私のオススメはXサーバー。


いろいろ使って比べてみるのがベストでしょうが、最初から正解を選べれば失敗はありませんからね。


ちなみに私はここしか使ってないですが、なんでみんながオススメするのかはすぐわかりました(笑)


もちろん満足です。


この先もinowayはXサーバー。


本当ふぉんとうオススメです。