WordPressで部分的にフォントを変える方法。

みなさんは一度はブログの一部のフォントを変えてみたいと思った事はありますか？
「ここのフォントを変えれば面白いなぁ。」みたいな（ブログやってなきゃねぇよw）
ただ実際に変更するとCSSなどの知識が必要になり、コピペで出来ると謳っていても実際にはその環境に合わせて変更しなければならない部分もあると思います。

そこで今回は実際にフォントをhtmlの属性だけで書き替えていく方法を紹介していこうと思います。

フォント変更の仕方

Webページでフォントを変更するは2つの方法があり、

• 最初からインストールされているフォント
• Webフォント

があります。このうちWebフォントは設定はある程度簡単なものの、一部のフォントを変更したい場合は出来ない気がしています。（著者の知識不足でもしかしたら出来るかも知れません。）

また、WebフォントはSEO的にも読み込みが遅くなることによって悪影響を与える可能性もあるそうです。
これは日本語という言語が多くある事によるものだそうです。

なので今回は一番オーソドックスなやり方？をやってみました。

具体的な方法

使用するhtmlのタグはspanタグです。これをWordpressの場合はコードエディターで入力していきます。

「SPAN」とは、単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。

グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。

クロノドライブ様より引用

これによって違うフォントを使用する部分と普通のデフォルトフォントの部分を区別します。区別した上でFont-Family属性を利用してフォントを変更していきます。

“font-family”ではフォント名を記述することで、その囲った部分のフォントをそのフォントにする事が出来ます。
このような感じですね。↓

<span style="font-family: HG創英角ﾎﾟｯﾌﾟ体, ヒラギノ丸ゴ ProN">
フォントを変える</span>

フォントを変えようとしている部分が既にspanタグで囲まれている場合は、既にある属性の後ろに半角スペースを入れて“style”の部分から書き足します。

WordPress上のやり方

まずビジュアルエディターでフォントを変えたい文字を入力

まずは文字を入力して行きます。特に考える事なく文字を入力しましょう。

コードエディターに移動する

spanタグ（コード）を追加する

ここでコードを入力します。必ずコードを入れるときは半角にしてから入力しょう。
最後の”</span>”も忘れずにやりましょう。

実際の字体

角ゴシックの字体

各ブラウザのデフォルトである角ゴシックです。特に目立ったものはありませんが、游ゴシックを使うWindows用にフォントを少し太くしています。

一応字のサイズを大きくする事も太くする事も斜めにする事も出来ます。

普通の字体はこんな感じです。
コードはこちら↓

<span style="font-family: 游ゴシック, YuGothic, Yu Gothic, メイリオ, ヒラギノ角ゴ ProN, sans-serif; font-weight:500">
フォントを変える</span>

丸ゴシックの字体

角ゴシックほど有名ではないですが、丸ゴシックというものもあります。個人的にはとても読みやすくて好きな字体の一つです。

一応字のサイズを大きくする事も太くする事も斜めにする事も出来ます。

普通の字体はこんな感じです。
コードはこちら↓

<span style="font-family: HG丸ゴシックM-PRO, ヒラギノ丸ゴ ProN W6">
フォントを変える</span>

明朝体の字体

このように明朝体にすることができます。iOSではヒラギノ明朝 ProNを利用し、Windowsでは游明朝を利用します。

一応字のサイズを大きくする事も太くする事も斜めにする事も出来ます。

普通の字体はこんな感じです。
コードはこちら↓

<span style="font-family: 游明朝, ヒラギノ明朝 ProN, serif">
フォントを変える</span>

ポップな字体

少しポップな感じを出したい場合はこんな字体にする事が出来ます。
丸っこくて少し幼い感じとでも言いますでしょうか？w
これはこれでいろんな使い方が出来ると思います。

一応字のサイズを大きくする事も太くする事も斜めにする事も出来ます。

因みにiOSでは適切なフォントが存在しない為、ヒラギノ丸ゴ“を使用しています。

普通の字体はこんな感じです。
コードはこちら↓

<span style="font-family: HG創英角ﾎﾟｯﾌﾟ体, ヒラギノ丸ゴ ProN">
フォントを変える</span>

行書体の字体

少し改まった感じがするのがこの行書体です。明朝体にも似てはいるものの、少し異なった感じが出ています。

同じ文字を明朝体で表示するとこんな感じになります。

「少し改まった感じがするのが行書体です。明朝体にも似てはいるものの、少し異なった感じが出ています。」

一応字のサイズを大きくする事も太くする事も斜めにする事も出来ます。

お気づきの方もいるかも知れませんが、iOSでは行書体のフォントが内蔵されていません。なのでフォントが見つからずに明朝体で表示されます。
（カスタムフォントを入れればいいと言う方もいるかも知れませんが、iOSのカスタムフォントはブラウザに適応出来ません。）

こちらも普通の字体はこんな感じです。
コードはこちら↓

<span style="font-family: HGP行書体">
フォントを変える</span>

まとめ

普通フォントを変更する場合はCSSを利用して、サイト全体に適応させます。
なぜなら一々htmlに記述するのは非効率で、しかも保守点検がしにくいからです。
なので情報が少ないですが多分需要がないんでしょうねｗ

また実はこの記事、それぞれのブラウザできちんと表示されるかのテストの意味合いもありますw
なのでもし「このOSのこのブラウザではダメだったよ」みたいなものがあればぜひお教え頂きたいです。順次テストして更新して行きます。