さくらインターネットのモリサワフォントプラグインの導入と使い方

やっぱりきれいで読みやすい。

さくらインターネットで無料で使えるWordPressモリサワフォントを使ってみての感想です。簡単に使えるので、さくらのスタンダード以上の契約をしているなら試してみるのもいいと思います。というわけで導入手と使い方を書いておきます。

利用するにはさくらのレンタルサーバでスタンダード以上の契約で、かつWordPressを使っている必要があります(利用条件や書体の一覧はこちらの記事にあります)。

さくらインターネットで無料で利用できるモリサワフォントを使ってみた
さくらインターネットで無料で利用できるモリサワフォントを使ってみた
さくらインターネットレンタルサーバで無料で使えるモリサワフォントを使ってみました。フォントはWebフォント TypeSquare ので提供されているもので、レン...

導入手順

具体的な手順はWebフォントプラグイン機能 – さくらのサポート情報に書かれているので悩むことはないと思います。

  • WordPress用プラグインの有効化
  • [コントロールパネル]のWebフォント設定で使いたいドメインを選択

導入に必要なことはこの2点だけ。

プラグインはモリサワのフォントサービスが始まった後にクイックインストールでWordPressをインストールしていれば最初から入っているので有効化するだけ。そうでなければ[プラグイン]から新規プラグインをダウンロードします。[sakura webfonts]で検索して「今すぐインストール」。そして有効化します。

さくらサーバ用モリサワフォントプラグイン

さくらサーバ用モリサワフォントプラグイン

つぎに[コントロールパネル]のWebフォント設定で使いたいドメインを選択します。使えるのは1契約につき1ドメインだけなので、使いたいドメインを選択します。

さくらサーバ用モリサワフォント設定画面

モリサワフォント利用設定

さくらサーバ用モリサワフォント設定画面

フォントを利用したいドメインを選ぶ

基本設定

設定は左メニューの[TypeSquareWebfonts]から行います。

さくらサーバ用モリサワフォントプラグイン

さくらサーバ用モリサワフォントプラグイン

サイト全体にテーマを適用するには、プルダウンメニューからフォントテーマを選んで【フォントテーマを更新】するだけです。カスタムテーマを作成していない状態では初期に用意されている8種類が表示されます。その下にある[上級者向けのカスタマイズ]では、割り当てるクラスを個別に指定することもできます。

テーマ適用設定

テーマ適用設定

個別のページでテーマを指定したい場合

個別のページでテーマを指定したい場合は[フォントテーマ個別表示設定]で【表示する】を選びます。これで各投稿ページの一番下にテーマ選択のパーツが追加され、ページごとにフォントテーマを指定することができます。

さくらインターネットで使えるモリサワフォントプラグイン個別ページ設定画面

投稿時にテーマ選択を表示させる設定

さくらインターネットで使えるモリサワフォントプラグイン個別ページメニュー

個別ページに表示されるテーマ選択

[フォントテーマ設定]で選択しないで、個別ページのみに適用することもできます。特定のページだけ、あるいはカテゴリーにだけフォントを使用するということもできます。ただ、サイト全体は普通のフォントのままなので、違和感が出ないように気を付ける必要はあります。

フォントテーマを作る

フォントテーマを新たに作りたいときは、TypeSquareWebfontsの下に表示されている【カスタムフォントテーマ】から行います。

  • 見出し
  • リード
  • 本文
  • 太字
さくらサーバで利用できるモリサワフォントのカスタムテーマ作成

カスタムテーマ作成

さくらインターネットで使えるモリサワフォントプラグインのカスタムテーマ設定

カスタムテーマ設定

ここで作成したテーマに対し、適用したいタグや要素の指定は[TypeSquareWebfonts]から行えます。

(このページには最初から用意されているテーマのベーシック(見出ゴMB31 / リード:カクミン R / 本文:新ゴ R / 太字:新ゴ M)を適用しています)

スポンサーリンク
336
336

シェアする

フォローする