206091582
201919531

Webフォントプラグイン機能

対象サービス・プラン
Image
 

ここではWebフォントプラグイン機能の設定を紹介します。

前提条件

前提条件

  • Webフォント機能はさくらのレンタルサーバ内に設置されたWordPress内でのみ使用可能なプラグイン形式で提供しております。
    そのため、お客様が利用されているWordPressのテーマによっては正常に動作しない場合もございますのでご了承ください。
  • 30書体を2.5万ページビューまで表示できます。
  • このページではWordPressプラグインでWebフォントを表示する機能についてご説明します。
    WordPress以外のサイトでご利用になる場合は、Webフォント機能のサポートサイトをご覧ください。

ページの先頭へ

設定手順(新規インストール)

サーバコントロールパネルログイン

サーバコントロールパネルへログインします。

ドメイン名 初期ドメイン または 追加されたドメイン
パスワード サーバパスワード
仮登録完了のお知らせに記載のパスワード。
紛失・ご不明の場合は「サーバパスワードの再発行」をご確認ください。

Webフォントの設定

『Webフォント』をクリックします。

 

Webフォントを設定するドメインを「プルダウン」より選択して『設定』をクリックします。

登録ドメイン名に設定したいドメインが表示されていれば完了です。

『クイックインストール』をクリックし、WordPressをインストールします。

WordPressのインストール方法は以下のマニュアルをご参照ください。

WordPressインストール完了後、WordPress管理画面へログインします。
インストール済みプラグインからTS Webfonts for SAKURA RSを有効化します。

左メニューにTypeSquareWebfontsのメニューが表示されるのでクリックします。

web_font-img-120.png

フォントテーマメニューから好きなテーマを選択して、『フォントテーマを更新』するをクリックします。

web_font-img-080.png

フォントテーマを更新したサイトにアクセスし、表示を確認します。

ページの先頭へ

設定手順(追加インストール)

サーバコントロールパネルログイン

サーバコントロールパネルへログインします。

ドメイン名 初期ドメイン または 追加されたドメイン
パスワード サーバパスワード
仮登録完了のお知らせに記載のパスワード。
紛失・ご不明の場合は「サーバパスワードの再発行」をご確認ください。

Webフォントの設定

『 Webフォント 』をクリックします。

 web_font-img-010.png

Webフォントを設定するドメインを「プルダウン」より選択して『 設定 』をクリックします。

登録ドメイン名に設定したいドメインが表示されていれば完了です。

設定したドメインのサイトのWordPress管理画面へログインし、『 プラグイン新規追加 』をクリックします。

プラグインの検索ボックスに「TypeSquare Webfonts Plugin for さくらのレンタルサーバ」と入力します。

web_font-img-091.png

TS Webfonts for さくらのレンタルサーバをインストールします。

web_font-img-101.png

インストールが完了したら有効化します。

web_font-img-191.png

左メニューにTypeSquareWebfontsのメニューが表示されるのでクリックします。

web_font-img-120.png

フォントテーマメニューから好きなテーマを選択して、『フォントテーマを更新』するをクリックします。

web_font-img-080.png

フォントテーマを更新したサイトにアクセスし、表示を確認します。

ページの先頭へ

カスタムフォントテーマの設定手順

Webフォントが設定されたWordPressの管理画面へログインします。

左メニューから『TypeSquareWebfonts』をクリックします。

web_font-img-120.png

プルダウンより『新しくテーマを作成する』を選択します。

web_font-img-130.png

テーマタイトルを設定します。
(任意の文字列が使用できます。サイトには表示されません)

web_font-img-140.png

タイトル、リード、本文、太字に設定したいフォントをプルダウンから選択します。

それぞれ設定されるクラスはTypeSquare Webfontsメニューの「上級者向けのカスタマイズ」に記載されているクラスになります。
この部分を編集することで任意のクラスにWebフォントを適用することも可能です。

web_font-img-170.png

フォントを選択したら『フォントテーマを更新する』をクリックします。

web_font-img-180.png

フォントテーマを更新したサイトにアクセスし、表示を確認します。

ページの先頭へ

フォントテーマ個別表示設定

個別の投稿、固定ページの編集画面にフォントテーマ設定機能を表示できます。

プラグインのトップから「上級者向けのカスタマイズ」をクリックします。

web_font-img-160.png

「有効化する」のチェックボックスをONにし、『個別記事フォント設定を更新する』をクリックします。

web_font-img-160-1.png

投稿ページへアクセスすると、ページ下部にフォントテーマを選ぶメニューが追加されます。
投稿ごとにフォントテーマを変更することが可能です。

さくらのサポート情報

メニューを閉じる