Shortcodes Ultimate でオレティメットショートコードを創る！
本当に便利なWebフォントのホントの話！やっぱりXサーバーはいいネ！
inowayです。
あ、今回は
まだまだ紹介したいオレティメットショートコードはいっぱいあるんですけどね。
ちょっと休憩です。
あまりにも
なので今回は
という内容でお贈りします。
え？
ああ、スイマセン。
結局、カスタマイズ記事ですね。
しかもまた
まあいつも言ってますが、
ブログ、サイトを用いた情報発信ビジネスやアフィリエイトを楽しく続けよう。
inoway
というテーマのもと、そのための誰でも簡単に出来るスキルアップと楽しく更新出来るモチベーション維持のためのカスタマイズ紹介です。
諦めたらそこで試合終了ですよ。
と
スラムダンクの井上雄彦先生ごめんなさい。ちなみに私の本名は井上先生と１字違いです(どーでも情報)
さあ、
それでは気を取り直して参りましょう♪
オヤジギャグが多いのは私がオヤジだからです。
そもそもWebフォントとは何ぞや？
そうですね。
まずそこがわからないと何のことやらチンプンカンプンです。
なのでザックリと説明します。
いや、してもらいます。
Webフォントとは？
WebフォントはWWWのコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化（レンダリング）をともなうクライアントが文字表示を行うシステムおよびそのフォントである。 CSS3.0 fonts moduleで、この機能の標準が提供された。
https://ja.wikipedia.org/wiki/WebフォントWikipedia
ふむふむ。
なるほどね〜。
さすがわ
それでは次のステップへ進みましょう！
まてコラ、全然わからんぞオイ！
あ、奇遇ですね。
私もサッパリわかりませんでした。
なんかアレですよね。
説明口調というか何というか・・・
関連する前提知識ありきで述べてますよね？
辞書みたい。
Wikipedia とはそーゆーものです。
という事で、もっとわかりやすいように私が私の考えと言葉でwebフォントについて説明します。
えー、webフォントのフォントってのは文字です。
文字のデザインですね。
ゴシック対とか明朝体、そんな感じのいわゆる書体ってやつです。
丸文字とか筆記体なんかもそのくくりですね。
で、その書体デザイン(フォント)をネット上、いわゆるweb上でみんなで共有できるように置いてあるもの。
それがwebフォントです。
置いてある？
ええ。
サーバーとかにデータとして。
基本的に企業や団体が所有していますが、個人のデザイナーが自身のホームページなんかで公開していたりします。
世界的に有名なとこでGoogleが提供しているGoogleフォント、日本では株式会社モリサワのモリサワフォントがありますね。
ふ〜ん。
でもオレには関係ないね。
オレのブログ、WordPressだし。
ビジュアルエディタで豊富なフォントが使えるプラグイン入れてるし。
ああ、フォントファミリーですね。
あれ、便利ですよね。
日本語フォントはありませんがローマ字はヨリドリミドリですし。
おう、それそれ。
オレはそれのナントカNEWロマンってのよく使うぜ。
日本語がキレイな明朝体で表示されるからな。
それね。
確かにいい感じですよね。
ちょっとローマ字が小さいですが。
ただ、その前に
フォントファミリーで選べる文字って言うなれば
その書体で表示されるかどうかは相手先の環境次第というか。
キ、キス以上の女子？
君の脳内誤変換レベルは【ミス異常の星】ですね。
違います。
下水道のヌシでも
全国の城之内さんゴメンナサイ。
つまりは
その文字、その書体が表示されるかは相手先(訪問者)が使用してるPCやスマホの機能次第ということです。
極端な話、Windowsでは表示されるけどMacではダメなフォントとか普通にありえます。
そのような場合はあなたが意図的に読ませたいフォントでは見せられない事になります。
それが機種依存文字の恐怖です。
まあ、とか言う前にに日本語のフォントがほぼ選択不可能な時点で我々ジャパン国のブロガーやアフィリエイターには不便ですけどね。
Webフォントの仕組み
じゃあ一体どうすればみんな共通のフォントで表示させられるのか？
みんな同じパソコンを使えばいい
(ノウナイニチョクセツモジヲオクルノダ)
もういっそのこと全員ころ…
そーゆー方法もあるのかも知れませんね。
ただ、物騒だし現実的ではないので人類は違う仕組みを作り出しています。
それがWebフォントの仕組みです。
さきほど説明したとおり、Webフォントは共有して使用するためにインターネット上の世界(サーバー内にデータとして)に置いてあります。
で、それを自分のサイトやブログで使える状態にすると、設定した文章をネットの中でWebフォントに置き換えて表示してくれるんです。
つまり、あなたの記事やコンテンツに訪問者がアクセスすると
たとえばさっきのフランケンと宇宙人と死神のセリフ。
それぞれ３種類のWebフォントで表示されてますが私のPCやブログシステム(
全てネット上の別サーバーからWebフォントに上書き表示されてるのです。
日本語フォントを使いたい！！
ですよね。
基本的に日本語で書いてますもん。文章。
その日本語テキスト、いわゆる自分のサイトの文章を文字デザインのプロが作成した読みやすい書体で読んでもらえたらいいと思いません？
はたまた インパクト や 個性ある書体 で伝えたい言葉を表現したくありません？
私は
自分が生み出した文章、作りだしたコンテンツは私というアーティストが創作した一個の作品だと思ってます。
なので内容のほうは自分が読んでも面白いと思える出来です。
それを視覚的にも表現の幅を広げて楽しんでもらいたいという思いで【
人もサイトも見た目が９割と言いますし(言い過ぎ？)
ほら、どんなに面白くて感動的な内容でも第一印象でゴメンナサイされたら読んでもらえませんしね〜。
と、いうわけでさっそく日本語のWebフォントを使用しましょう。
実装のしかたはけっこう簡単らしいですよ。
【コピペでカンタン、Webフォント♪】
とかググればいくらでも出てきます。
やろうと思えばどんなブログやサイトでも使えるのかな？
なんかPHPとかいうプログラム？
に何かを書き込んでHTMLタグるんだったかな？
ごめん、ググったけど私には無理でした(笑)
なんか怖いし。
全然かんたんじゃねー。
というのが感想です。
まあ、媒体の環境にもよるんでしょうが・・・
そんなこんなで諦めムードのなか、ある一通のお知らせメールが届きました。
この度エックスサーバーでは、 すべてのサーバープランを対象に、書体メーカーの老舗である「モリサワ」の Webフォントが無料でご利用可能な「Webフォント」機能の提供を開始いたしました。
「Webフォント」機能のご利用により、 画像編集ソフトでテキストを加工することなく、 手軽にサイトの見映えを向上させることが可能です。
利用可能な書体には「明朝体」「ゴシック体」などのベーシックなものから 「デザイン書体」まで幅広いジャンルを取り揃えており、 サイトの内容やデザインに合わせた柔軟な活用が可能です。Xserver
「Webフォント」機能のご利用により、 画像編集ソフトでテキストを加工することなく、 手軽にサイトの見映えを向上させることが可能です。
利用可能な書体には「明朝体」「ゴシック体」などのベーシックなものから 「デザイン書体」まで幅広いジャンルを取り揃えており、 サイトの内容やデザインに合わせた柔軟な活用が可能です。Xserver
これね。
もうさすがわＸサーバー様としか言いようがないです。
やっぱ選ばれるワケはあるなと。
ただでさえページスピードを上げるモジュールや国外IPアドレスからのアクセス制限セキュリティ、極めつけはサイト暗号化通信の実装(https化)まで無料でサービスしときながらのコレですよ。
どんだけユーザー目線やねん！！
と、怒りにもにた喜びがあふれてきます。
しかもモリサワフォント。
いろんな企業サイトでも使われてる日本で一番有名なWebフォントです。
なにはともあれ、Webフォントが契約サーバー側がサービスとして提供してくれる機能になっているんです。
コレなら私にも利用出来そうだと思いましたね。
てゆーか出来ました(笑)
プラグインで誰でもWebフォントを
XサーバーでのWebフォントの使用にはイロイロと制限があります。
まあ具体的に重要なのは２つですが。
[icon image="point1-1-g"]Webフォントを設定できるドメインは初期ドメイン、独自ドメインの中から1つだけです。
これは簡単に説明すると１サイトでしか使えませんよという意味です。
サブドメインもドメイン1つとしてカウントされます。
[icon image="point1-2-g"] 月間PV数 25,000PVまで
ひと月のサイトのPV数が 25,000PVを超えるとその月は設定が解除されます。
通常の個人サイトでは問題無いかなと思います。
以上です。
ちなみにPV上限オーバーで解除されても通常のフォントに戻るだけですので心配いりませんね。
で、使い方は？
これも２つあります。
HTMLサイトでも使える方式と
どちらにしても最初はXサーバーの管理画面からWebフォント設定で適用サイトを設定しなくてはなりません。
超簡単ですが。
で、私はプラグインでの導入を選びました。
理由は使用方法と管理が簡単そうだったからです。
極力複雑なプログラム的カスタマイズを避けたいというのもあります。
なので私はプラグイン【TypeSquare Webfonts for エックスサーバー】でWebフォントを実装してます。
TypeSquare Webfonts for エックスサーバーの使い方
こちら、
そしてダッシュボードから有効化。
続いてプラグイン設定で適用。
普通です。
これだけでWebフォントがあなたのサイトに。
X サーバー以外にもモリサワフォントのプラグインサービスがあるようですね。
しかし私は超絶Ｘサーバー推しです。
設定画面を見るとわかりますが、わりと自由にフォントの適用箇所を選べます。
ちょっとしたHTMLタグの知識が必要になりますが難しくはありません。
画面は私の設定でテーマは【オレジナル】としてます(笑)
ちなみに全てのテキスト(本文)には適用させていません。
記事の文章全体をWebフォントに置き換えると読み込みにけっこうな時間がかかるので。
重くなる ってやつです。
とくに日本語フォントはローマ字などの英語フォントと比べて字数が多いぶん相当なデータ量なのです。
漢字とか半端ない種類ですからね。
ですので使うには処理能力の高い環境がオススメです。
そんな意味も込めて私のオススメはＸサーバー。
いろいろ使って比べてみるのがベストでしょうが、最初から正解を選べれば失敗はありませんからね。
ちなみに私はここしか使ってないですが、なんでみんながオススメするのかはすぐわかりました(笑)
もちろん満足です。
この先もinowayはＸサーバー。
