第42話。エディターからの書体変更は意味が無い?CSSでのHTMLフォントファミリー指定は無駄!

書いたブログ記事をパソコンで見ると当たり前ですが太字部分はキチンと太字として表示されてます。しかし同じ記事をスマホで見ると何故か全てが太字表示になっていてせっかく強調表現で重要箇所に太字を使ったのに全くその意味が無い・・・

これはスマホが古くて機種をアップデートしていなかったのが原因でした。スマホで記事やデザインを確認する際は出来れば二つ以上のスマホを使用しての確認をおススメします。

と思って書体に少し手を加えようといつものようにネット検索でその原因を調べながら軽くエディターからの修正を始めたのですが、その際になんとなくフォントファミリーで別の書体を選択したけど見たところ記事の書体は変更してる気配がない?なんで?これがきっかけでここから解決するまでに3日も苦しむ事となります。管理人はフォントに大した拘りは有りませんが良い機会なので今回は勉強がてらにブログ記事の書体を変更していきます。

最初に結論ですがCSSでのHTMLを弄ってフォントファミリー指定してもユーザー側の環境によりその通りに表示されないのです。

WindowsやMac、スマホ、タブレットと表示させるツールは色んな種類があります。ツールの状態や環境は違いますので指定したフォントが入って無いツールではいくらCSSで指定しても当然表示されません。

書体にこだわり折角高いお金で購入したフォントを設定し記事にしてもユーザー側にはそのフォントが入って無いので、意図した書体ではなく入っている代替えフォントで表示されることになります。

ネットで溢れているCSSでのHTMLフォントファミリー指定で書体を設定して試しても何故か上手く反映されない原因はそこかも知れません。

CSSでのHTMLフォントファミリーでここまでして指定する意味ある??

CSSでのフォント指定コードはユーザー側に指定フォントが入って無い場合を前提にその対策として以下のように、読み込み優先される左側から第一候補、第二候補、第三候補と順番に記入していきます。更に英語フォント用が先で日本語フォント用はその後に記載、最後の指定には必ず総称フォントを指定・・・他にも書き方の細かい決まりが色々・・・

body { font-family: ‘Arial’,YuGothic,’Yu Gothic’,’Hiragino Kaku Gothic ProN’,’ヒラギノ角ゴ ProN W3′,’メイリオ’, Meiryo,’MS ゴシック’,sans-serif; }

それでも表示されるかどうかはユーザーの環境による。

ここまでして書体を指定する意味って・・・

書体変更にwebフォントを選択した理由

プラグインもしくはwebフォントでも書体を変更することが出来ます。

プラグインについて

プラグインは途中で開発が止まったり他のプラグインとの相性が悪い場合やサイト表示が遅くなるなどのデメリットが起こる可能性があるのでそれを避けるためプラグインを使わないwebフォントを選択しました。

※後から気付きましたがエックスサーバーからwebフォントを利用するとマニュアルの手順を踏む段階で自動的にプラグインがインストール設定されます。

webフォントについて

webフォントは文字を画像化しないのでSEOに強いと言われていて、ユーザー側の端末環境にも影響されずどのユーザーからも同じデザインが閲覧出来ます。

今回利用するのはエックスサーバーで設定可能なwebフォントでモリサワが提供する「TypeSquare」から33種類を無料利用可能というものを取り入れることにしました。「TypeSquare」で提供されてるwebフォントは必要な文字だけを読み込んでくれる仕組みだから表示もスピーディーと記載されています。

ただし月間7.5万PVを超えるとwebフォントの適用が強制的に外されブラウザ標準フォント表示に戻ります。

フォントサイズ設定と書体表示の失敗例

文字の大きさ

WordPressにログインして投稿の記事編集画面にあるエディターから編集します。画像の箇所から修正出来ます。

文字サイズは8pt~36ptまで7段階から選べます。因みにこの記事を書いてる文字の何も弄っていないレギュラーサイズは11ptです。文字サイズは大きさを知りたい文字を選択するとエディターのフォントサイズのところにptで出て来ます。

文字の大きさと太さのサンプル

8ptの文字はこの大きさ
太字はこの太さ
10ptの文字はこの大きさ
太字はこの太さ
12ptの文字はこの大きさ
太字はこの太さ
14ptの文字はこの大きさ
太字はこの太さ
18ptの文字はこの大きさ
太字はこの太さ
24ptの文字はこの大きさ
太字はこの太さ
36ptの文字はこの大きさ
太字はこの太さ
文字の太さを知りたい場合は、その文字を選択するとフォントサイズのところに太さがptで表示されます。
画像はレギュラーサイズの文字を選択しているところでフォントサイズ11ptとなっています。

エディターの書体は上手く機能しない?

文字の書体はエディターのフォントファミリーから簡単に選べますが表示は閲覧ユーザーの環境に依存する為設定してもまともに表示されません。
以下にフォントファミリーのサンプルをひとつずつ設定して一応乗せてますが、表示の中におそらく書体が全く同じで被ってるのが幾つもあると思います。それは最初にも説明した通り指定されているフォントデータが入って無いのが原因です。
これはエディターのフォントファミリー以外、CSSでのHTMLフォントファミリー設定でも同じ現象が起こります。

エディターフォントファミリー設定がまともに表示され無いサンプル(下段が太字設定です。)

Lato

MIMOMIDE blog
MIMOMIDE blog

Century Gothic

MIMOMIDE blog
MIMOMIDE blog

Franklin Gothic Medium

MIMOMIDE blog
MIMOMIDE blog

Gulim

MIMOMIDE blog
MIMOMIDE blog

Impact

MIMOMIDE blog
MIMOMIDE blog

Verdana

MIMOMIDE blog
MIMOMIDE blog

Georgia

MIMOMIDE blog
MIMOMIDE blog

Times New Roman

MIMOMIDE blog
MIMOMIDE blog

Courier New

MIMOMIDE blog
MIMOMIDE blog

Comic Sans MS

MIMOMIDE blog
MIMOMIDE blog

メイリオ

ミモミデブログ
ミモミデブログ

游ゴシック

ミモミデブログ
ミモミデブログ

ヒラギノ角ゴ

ミモミデブログ
ミモミデブログ

ヒラギノ丸ゴ

ミモミデブログ
ミモミデブログ

MS Pゴシック

ミモミデブログ
ミモミデブログ

MS ゴシック

ミモミデブログ
ミモミデブログ

MS P明朝

ミモミデブログ
ミモミデブログ

MS 明朝

ミモミデブログ
ミモミデブログ

游明朝

ミモミデブログ
ミモミデブログ

ヒラギノ明朝

ミモミデブログ
ミモミデブログ

游明朝体

ミモミデブログ
ミモミデブログ

エックスサーバーからのwebフォント設定やり方

エックスサーバー側の設定

(既にWordPress運用中での設定)

  1. エックスサーバーのサーバーパネルにログインしてWebフォント設定をクリック。
  2. Webフォント設定の追加から設定したいドメインを選択し設定するをクリック。

これでエックスサーバー側の設定は完了です。

WordPress側の設定

  1. ダッシュボードから外観カスタマイズをクリック。
  2. 追加CSSをクリック。
  3. ボックスにコードを追加記載。今回は以下のコードを入力して目立たせたいhタグの書体を変更しました。
  4. 公開をクリック。
h1{ font-family: “TBUDゴシック R”; }
h2{ font-family: “TBUDゴシック R”; }
h3{ font-family: “TBUDゴシック R”; }
h4{ font-family: “TBUDゴシック R”; }

ベースとなるサイト全体の書体変更(THE THOR)

今使っているテーマのTHE THORにはサイト全体の基本書体を簡単に変更できる機能が備わっているので今回はそちらから設定していきます。

  1. ダッシュボードから外観カスタマイズをクリック。
  2. 基本設定[THE]をクリック。
  3. 基本設定[THE]の中の基本スタイル設定をクリック。
  4. フォントサイズと書体を選択したら公開をクリック。

今回はフォントサイズを小にして書体はメイリオを選択しました。


きたっしー
うぉたっっっっうぉあだっっーー!
ニョロリン
さっきから大きか声ば出してどがんしたとね!?
きたっしー
僕を3日も苦しめたパソコンを成敗してやったーー!!
ニョロリン
ありゃりゃ~そのPC先週買ったばっかりやん。成敗したらダメやんね?もうどうするとね?
きたっしー
しょうがないから今日のところはダブル平手打ち往復100回で許してやった。ワッハッハ
ニョロリン
もう中途半端ね!成敗て言うとはね!?このドデカハンマーでPCを!うぉりゃ~りゃ~~!!
きたっしー
キャー!PCが壊れる~、、辞めてニョロリンー!
ニョロリン
もー気の小さか男ばい、、