Raindropsテーマは、Google Fontをサポートします。投稿本文に google-font-noto-sans-japanese クラスを指定するだけで表示できます。
通常は メタタグなどと、
|
1 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> |
スタイル指定が必要になりますが、
|
1 |
font-family: 'Open Sans', sans-serif; |
Raindropsの場合だと、上記の Open Sans の場合だと、
フォント名を小文字にして、スペースをハイフンに置換します
|
1 |
open-sans |
これに、グーグルフォント識別用の、google-font- というプレフィックスを付けます。
|
1 |
google-font-open-sans |
このルールで、フォントクラスを追加していただくと、自動的にフォントが適用されます。
（ただし、代替フォントは、常にsans-serifになります。）
このクラスが使えるのは、投稿本文の他
管理画面メニュー / 外観 / カスタマイズ / サイト基本情報 / サイトタイトルのCSS クラス
管理画面メニュー / 外観 / カスタマイズ / 外観 / 投稿 / 投稿タイトル CSSクラス でも使うことが出来ます。
例
Open Sans Condensed
この記事は、Noto Sans Japanese を使って表示しています。
この記事は、Noto Sans Japanese 100 を使って表示しています。
この記事は、Noto Sans Japanese 300 を使って表示しています。
この記事は、Noto Sans Japanese 600 を使って表示しています。
この記事は、Noto Sans Japanese 900 を使って表示しています。 ソース
|
1 2 3 4 5 6 7 |
<h2 class="google-font-open-sans-condensed300">Open Sans Condensed</h2> <p class="google-font-noto-sans-japanese f26">この記事は、Noto Sans Japanese を使って表示しています。</p> <p class="google-font-noto-sans-japanese100 f26">この記事は、Noto Sans Japanese 100 を使って表示しています。</p> <p class="google-font-noto-sans-japanese300 f26">この記事は、Noto Sans Japanese 300 を使って表示しています。</p> <p class="google-font-noto-sans-japanese600 f26">この記事は、Noto Sans Japanese 600 を使って表示しています。</p> <p class="google-font-noto-sans-japanese900 f26">この記事は、Noto Sans Japanese 900 を使って表示しています。</p> |
Tips
WEBフォントを、functions.phpとstyle.cssから設定する手順
-
WEBサイトのベースフォントをNoto Sans Japaneseに変更する手順
公開済み2015年1月21日
ビジュアルエディターで、google font クラスを入力するボタンを作る
-
ビジュアルエディターで、google font クラスを入力するボタンを作る。
公開済み2015年9月1日
