レンタルサーバ webサイト/データ

【新コントロールパネル】Webフォントプラグイン機能

対象プラン
さくらのレンタルサーバスタンダードプレミアムビジネスビジネスプロマネージド

このマニュアルでは、メーリングリストのメンバの編集についてご案内しています。

前提条件

  • Webフォント機能はさくらのレンタルサーバ内に設置されたWordPress内でのみ使用可能なプラグイン形式で提供しております。
    そのため、お客様が利用されているWordPressのテーマによっては正常に動作しない場合もございますのでご了承ください。
  • 33書体を7.5万ページビューまで表示できます。
    ビジネス、ビジネスプロ、マネージドサーバの各プランはPV制限はありません。
    ※サーバーの管理に支障をきたす場合、他のお客様に影響を及ぼすような状態が確認された場合には、
    一時的に制限させていただくことがあります。
  • このページではWordPressプラグインでWebフォントを表示する機能についてご説明します。
    WordPress以外のサイトでご利用になる場合は、Webフォント機能のサポートサイトをご覧ください。

注意事項

  • 近日、3書体追加に対応したプラグインをバージョンアップで提供予定です。
    提供に際してご注意があります。利用方法とご注意はこちらをご確認ください。

ページの先頭へ

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

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

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

ページの先頭へ

Webフォントの設定

Webサイト/データから『Webフォント』をクリックします。

new_web_030.png

『ドメインを追加』をクリックします。

利用ドメインをプルダウンから選択し『設定』をクリックします。

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

ページの先頭へ

新規インストール

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

010.png

020.png

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

030.png

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

100.png

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

ページの先頭へ

追加インストール

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

010.png

060.png

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

070.png

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

080.png

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

090.png

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

040.png

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

050.png

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

ページの先頭へ

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

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

010.png

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

040.png

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

110.png

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

120.png

タイトル、リード、本文、太字に設定したいフォントをプルダウンから選択します。
※それぞれ設定されるクラスはTypeSquare Webfontsメニューの「上級者向けのカスタマイズ」に
記載されているクラスになります。
この部分を編集することで任意のクラスにWebフォントを適用することも可能です。

130.png

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

140.png

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

ページの先頭へ

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

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

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

150.png

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

160.png

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

ページの先頭へ

【近日リリース予定】プラグインバージョン3.0以降の使い方

プラグインバージョン3.0以降の使い方をご紹介します。

注意事項

  • バージョン2.0以前で利用できた「フォント設定クラス」の機能はリニューアルされて投稿記事フォントの直接指定機能となりました。
    このため、プラグインを3.0以降にバージョンアップするとカスタムしていた内容がクリアされますのでご注意ください。

青字のリンクをクリックすることで各メニューが展開します。

フォントテーマをサイト全体に設定する場合、共通テーマ設定をクリックします。

好きなテーマを選択して「投稿フォント設定を保存する」をクリックします。

ページの先頭へ

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

カスタムテーマ編集をクリックし、テーマタイトルを入力後各箇所にお好みのフォントを設定します。
本バージョンよりフォント名が実際のWebフォントで表示されるようになりました。
選び終わったら「テーマを保存する」をクリックします。

共通テーマ設定のプルダウンを選択すると作成したテーマが選択できます。

ページの先頭へ

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

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

投稿記事フォント設定内の「個別テーマ指定」を選択し、
「投稿フォント設定を保存する」をクリックし保存します。

WordPressの投稿画面の下部にテーマを選択するエリアが表示されます。

ページの先頭へ

サイトフォント設定

プラグインバージョン3.0以降の新機能で、サイトのタイトルやキャッチコピーにWebフォントを適用できます。

「サイトフォント設定」を選択します。

各箇所に対してWebフォントを選択し、「サイトフォント設定を保存する」をクリックし保存します。

ページの先頭へ

直接指定(上級者向け)

以前のバージョンで利用できたフォント設定クラスの機能は、リニューアルされて直接指定(上級者向け)となりました。
なお、バージョンアップすることで設定していたフォント設定クラスが一度消去されますのでご注意ください。

投稿記事フォント設定の「直接指定(上級者向け)」をクリックし、フォント選択
適用箇所の順に入力します。
CSSセレクタで指定してください。