フォントでそんなに雰囲気変わるの？ 

まずは見ていただいたほうが早いかと思いますので、ビフォーアフターをご覧下さい。 

◆Before 

◆After 

いかがでしょうか？ 
アフターの方が文字が柔らかい印象になったと思います。 

上記では数種類の書体しか利用されていませんが、ゴシック体、明朝体、デザイン書体など33書体が揃っているので、明朝体でエレガントな雰囲気に纏めたり、UDフォントを利用して可読性を重視する、といった事も可能です。 

気になった方は早速プラグインの導入へ進みましょう！ 

プラグインの導入 

WordPressの導入から始める方はヘルプページを参考に、WordPressの左メニューにTypeSquareWebfontsのメニューが表示されるまで進めて下さい！ 

既にWordPressをインストール済みの方は、プラグインの検索で「TS Webfonts for さくらのレンタルサーバ」と検索してインストールして下さいね。 

プラグインの設定 

プラグインを導入すると、下記3種類のメニューが表示されるので、それぞれ見ていきましょう。 

• 投稿記事フォント設定 
• サイトフォント設定 
• カスタムテーマ編集 

投稿記事フォント設定 

このメニューでは、名前のとおり投稿記事に対するWebフォント適用方法を設定できます。 

◆指定しない 
　フォントテーマを適用しません。 

◆共通テーマ指定 
　全ての投稿に設定したフォントテーマが適用されます。 

◆個別テーマ指定 
　投稿ごとに設定したフォントテーマが適用されます。 
　投稿画面でフォントセットを選ぶことができます。 

◆直接指定（上級者向け）
　CSSセレクターを指定して適用するウェブフォントを選べます  

フォントテーマとは？ 

上記で出てきたフォントテーマとは、「和風」や「ニュース」といったテーマに合うようなフォントが選ばれているセットの事です。 
フォントの組み合わせは40,920通りもあるので迷ってしまいそうですが、フォントセットがあると初めてフォントを使う方でも設定しやすいですね！ 

下記は用意されているフォントテーマを書き出してみたものですが、ちょっと想像しずらいので、プラグインをインストールしていただいて、実際に見てもらったほうが早いかもしれません！ 

テーマ名	設定フォント
ベーシック	見出し：見出ゴMB31 / リード：カクミン R / 本文：新ゴ R / 太字：新ゴ M
ニュース	見出し：ゴシックMB101 B / リード：カクミン R / 本文：UD新ゴ R / 太字：UD新ゴ M
ファッション	見出し：解ミン 宙 B / リード：丸フォーク M / 本文：フォーク R / 太字：フォーク M
ポップ	見出し：新丸ゴ 太ライン / リード：はるひ学園 / 本文：じゅん 201 / 太字：じゅん 501
和風	見出し：隷書101 / リード：正楷書CB1 / 本文：リュウミン R-KL / 太字：リュウミン M-KL
モダン	見出し：すずむし / リード：トーキング / 本文：ナウ-GM / 太字：ナウ-GM
小説	見出し：見出ミンMA31 / リード：解ミン 宙 B / 本文：A1明朝 / 太字：A1明朝
スマホ	見出し：UD新ゴ M / リード：新丸ゴ R / 本文：UD新ゴ コンデンス90 L / 太字：UD新ゴ コンデンス90 M
レトロモダン	見出し：解ミン 宙 B / リード：すずむし / 本文：しまなみ JIS2004 / 太字：リュウミン M-KL
カジュアル	見出し：G2サンセリフ-B / リード：フォーク M / 本文：ヒラギノ丸ゴ W4 JIS2004 / 太字：じゅん 501
フレンドリー	見出し：じゅん 501 / リード：トーキング / 本文：UDデジタル教科書体 R JIS2004 / 太字：じゅん 501

直接指定（上級者向け）とは？ 

この設定では、タグやid、classを指定してフォントを選ぶことが出来ます。が、HTMLやCSSのを理解されている方向けの設定方法です。 

設定される場合、CSSの反映には優先順位がありますので一括設定しようとコンテンツを包括しているidに設定してもうまく反映出来ない場合があります。 

もっと細かく設定したい！そんな場合には直接指定がおすすめです。

サイトフォント設定 

こちらの設定では、タイトルなど、Webサイト共通部分のフォント設定を行うことが出来ます。 
一部のテーマでは上手く反映出来ないことがありますので、ご注意下さい。 

• サイトタイトル 
• サイトキャッチコピー 
• ウィジェットタイトル 
• ウィジェット 

カスタムテーマ編集 

カスタムテーマ編集では、お好きなフォントを組み合わせてテーマの作成や編集が可能です。何度でもやり直しが出来るので、納得の行くまで試してみて下さいね！ 

文字の形を見てみたい 

フォントセットを作ってみたいけれど、文字の形がわからない。そんな時はさくらのレンタルサーバのWebフォントページがオススメです。 
フォント名のボタンを押すと表示サンプルが見られる仕組みがありますので、参考にしてみて下さい。 

Webフォントをプラグイン側の操作だけで楽ちん導入できる記事でしたが、いかがでしたでしょうか？ 
これなら簡単にできそう！と思って頂けたら嬉しいです。