バリアブルフォントのサンプルとカスタマイズ例をご紹介します

Cocoon ver2.8.0で、grayishで読み込んでいる英字Googleフォントについて、仕様変更を行っております。（仕様変更の詳細はこちら）

この記事では、新しく使用できるようになった各フォントのウェイト（太さ）についてサンプルを載せています。

また、カスタマイズ例などもご紹介します。

太いウェイトが使えるようになったので以下のようなカスタマイズもできるように！

Cocoon-grayish

日本語もかわいい

テーマカスタマイザーのフォントの設定項目は、変更ありません。

ver2.8.0で、テーマカスタマイザーのフォント設定に新しい機能を追加したわけではないので、その点ご了承ください。

v2.8.0以降では、バリアブルフォントに対応しているフォントは全種類の太さ、イタリック（斜体）がある場合はイタリックも読み込みしています。
※バリアブルフォントではないフォントに関しては太いウェイトを追加読み込みしています。

grayishの読み込んでいるGoogleフォントについて、バリアブルフォント対応は以下の表の◯印のついている物になります。

フォント名	バリアブルフォント対応	転送サイズ参考値
Montserrat	◯（イタリックあり）	1.3kB
Lato	ー	1kB
Inknut+Antiqua	ー	1kB
Spectral	ー	1kB
Lora	◯（イタリックあり）	2.2kB
Jost	◯（イタリックあり）	1.2kB
Roboto+Slab	◯	1.3kB

各フォントに指定できるようになった太さ

以下より各フォントファミリーについて表形式でサンプルを載せていきます！

英字部分のフォントサイズは、PC（画面幅1024px以上）で見たときは24px、スマホ（画面幅480pxより小さい）では18pxになるように可変設定をしています。

Montserrat(バリアブルフォント対応)

使用可能な太さ：100〜900
イタリックあり

Lato(太いウェイトを追加読み込み)

バリアブルフォント非対応
使用可能な太さ：300,400,700,900

InknutAntiqua(太いウェイトを追加読み込み)

バリアブルフォント非対応
使用可能な太さ：400,700,900

Spectral(太いウェイトを追加読み込み)

バリアブルフォント非対応
使用可能な太さ：200,400,600,800

Lora(バリアブルフォント対応)

使用可能な太さ：400〜700
イタリックあり

Jost(バリアブルフォント対応)

使用可能な太さ：100〜900
イタリックあり

Roboto+Slab(バリアブルフォント対応)

使用可能な太さ：100〜900

使用方法

見出しや段落ブロックで、英字を装飾のアクセントに使いたい時などにご活用ください。

以下①のようにプラグインgrayish-cstmpat-cssをアップデートするか、②子テーマのstyle.cssに各自でスタイルを追加して使用します。

①プラグインgrayish-cstmpat-cssを使う場合

まず、grayishのプラグインgrayish-cstmpat-cssをすでにインストールしている方は、ver1.0.9にアップデートすることで、自分でCSSを書かなくても使える状態になります。

各自の選択している英字フォントの使える太さを確認して、見出しブロックや段落ブロックの追加CSSクラスに以下のクラス名（cstm-skin-font-set-w100〜cstm-skin-font-set-w900）を入力してください。

太さ	クラス名
100	cstm-skin-font-set-w100
200	cstm-skin-font-set-w200
300	cstm-skin-font-set-w300
400	cstm-skin-font-set-w400
500	cstm-skin-font-set-w500
600	cstm-skin-font-set-w600
700	cstm-skin-font-set-w700
800	cstm-skin-font-set-w800
900	cstm-skin-font-set-w900

イタリックにしたい場合は、上記クラス名（cstm-skin-font-set-w100〜cstm-skin-font-set-w900）の後に半角スペースを開け、以下クラス名を追加してください。

cstm-font-style-ital

②子テーマのstyle.cssにコードを追加する

プラグインを使わない場合、各自の子テーマのstyle.cssに以下を追加してご利用ください。

事前にバックアップをお取りください。
子テーマのカスタマイズ方法がよくわからない場合はこちらの記事をご覧ください。

以下黄色の下線部分を子テーマのstyle.cssに追加します。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* Cocoon ver2.8.0以降対応　GoogleFont */

.cstm-font-style-ital {
  font-style: italic;
}

[class^="cstm-skin-font-set-w"] {
  letter-spacing: .1rem;
  line-height: 1.4;
}

.cstm-skin-font-set-w100 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 100;
}

.cstm-skin-font-set-w200 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 200;
}

.cstm-skin-font-set-w300 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 300;
}

.cstm-skin-font-set-w400 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 400;
}

.cstm-skin-font-set-w500 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 500;
}

.cstm-skin-font-set-w600 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 600;
}

.cstm-skin-font-set-w700 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 700;
}

.cstm-skin-font-set-w800 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 800;
}

.cstm-skin-font-set-w900 {
  font-family: var(--skin-grayish-style-font);
  font-weight: 900;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

}

使用方法はプラグイン時と同様で、見出しブロックや段落ブロックの追加CSSクラスに使いたい太さのクラス名を入力します。

段落ブロックでの使用例

実際に段落ブロックで使ってみます。

「Cocoon-grayish」と入力して、フォントサイズはエディタのサイドバーのタイポグラフィで「XL」を選択しています。

追加CSSクラス：cstm-skin-font-set-w100

Cocoon-grayish

追加CSSクラス：cstm-skin-font-set-w500

Cocoon-grayish

追加CSSクラス：cstm-skin-font-set-w900

Cocoon-grayish

イタリック使用

追加CSSクラス：cstm-skin-font-set-w100 cstm-font-style-ital

Cocoon-grayish

カスタマイズ例：縁取り

太いウェイト追加により以下のような縁取りも楽しめるようになると思います！

細いウェイトだと見栄えが良くないと思います。
フォントによって縁取りの線がきれいではないケースがあります。

太いウェイト（700から900）かつフォントサイズをかなり大きくした使い方が向いている感じです。
日本語フォントでもできます。

以下のサンプルは、追加CSSクラスに以下を入力しています。（※Spectralはw800、Loraはw700）

cstm-skin-font-set-w900 cstm-font-style-stroke

フォントサイズはPC時64px、スマホ32pxになるように調整しています。

Montserratの場合

Cocoon-grayish

Latoの場合

Cocoon-grayish

InknutAntiquaの場合

Cocoon-grayish

Spectralの場合

Cocoon-grayish

Loraの場合

Cocoon-grayish

jostの場合

Cocoon-grayish

Roboto+Slabの場合

Cocoon-grayish

番外編：日本語いい!（游ゴシック又はヒラギノ角ゴの場合）

カスタマイズ楽しい

縁取りのコード紹介

本記事で表示している縁取りのスタイルについては、プラグインgrayish-cstmpat-cssのver1.0.9に入っています。以下のクラス名を追加CSSクラスに入力して使用可能です。

cstm-font-style-stroke

プラグインを使わない場合、又は縁取りの色や太さをカスタマイズしたい場合は、子テーマのstyle.cssに以下を追加し黄色の下線部分を変更します。

.cstm-font-style-stroke {
  --cstm-text-stroke-color: #000000;
  -webkit-text-stroke:1px var(--cstm-text-stroke-color);
  color: transparent;
  caret-color: #000;
}

縁取りの色を黒(#000000)に変える例。縁の太さは1pxの数字を任意の値に変更する。

このカスタマイズはエディタでテキストカラーを設定すると塗りつぶされて分からなくなります。色変更は上記のコードによるカスタマイズで行ってください。

カスタマイズ例：版ズレ風

縁取りにプラスして、text-shadowを使用し塗り部分をずらすカスタマイズです。

バナーなどで使えそうな可愛い版ズレっぽい表現ができます。

以下のサンプルは、追加CSSクラスに以下を入力しています。（※Spectralはw800、Loraはw700）

cstm-skin-font-set-w900 cstm-font-style-hanzure

フォントサイズはPC時64px、スマホ32pxになるように調整しています。

Montserratの場合

Cocoon-grayish

Latoの場合

Cocoon-grayish

InknutAntiquaの場合

Cocoon-grayish

Spectralの場合

Cocoon-grayish

Loraの場合

Cocoon-grayish

jostの場合

Cocoon-grayish

Roboto+Slabの場合

Cocoon-grayish

番外編：日本語もいいよ（游ゴシック又はヒラギノ）

カスタマイズ楽しい

版ズレ風のコード紹介

本記事で表示している版ズレ風のスタイルについても、プラグインgrayish-cstmpat-cssのver1.0.9に入っています。以下のクラス名を追加CSSクラスに入力して使用可能です。

cstm-font-style-hanzure

プラグインを使わない場合、又は縁取りの色や太さ、塗り部分のカラー、塗りのずらし具合などをカスタマイズしたい場合は、子テーマのstyle.cssに以下を追加し黄色の下線部分を変更します。

.cstm-font-style-hanzure {
  --cstm-text-stroke-color: #000000;
  --cstm-text-shadow-color: #d95959;
  -webkit-text-stroke: 1px var(--cstm-text-stroke-color);
  text-shadow: 3px 3px 0 var(--cstm-text-shadow-color);
  color: transparent;
  caret-color: #000;
}

縁取りの色を黒(#000000)に変え、塗りを赤（#d95959）に変える例。
塗りのずらし具合は、text-shadow: 3px 3pxの数字（横方向、縦方向の順）を調整する。

縁取りと同様に、このカスタマイズもエディタでテキストカラーを設定すると塗りつぶされて分からなくなります。色変更は上記のコードによるカスタマイズで行ってください。

カスタマイズその他：当サイトフロントページで行っているテキストアニメーション

当サイトフロントページに採用しているテキストアニメーションについてさくっとご紹介します。
実装方法は省略します。

ウェイトを変化させるアニメーション

当サイトのフロントページのメインビジュアルのサイトテキスト「Cocoon-grayish」にバリアブルフォントでできるアニメーションを取り入れています。

ウェイトを100から900に変化させるCSSアニメーションです。3回変化を繰り返した後、ウェイト100の状態で停止します。

↓期間限定予定のローディングの後に表示されます

バリアブルフォントについて詳しく知りたい方は、以下ICS Mediaさんの記事を参考にどうぞ！

メインビジュアル下の一周年記念テキストループアニメーション

おかげさまでgrayishはCocoonに同梱していただき、11月24日で1周年を迎えることができました！

期間限定になるかもしれませんが、感謝のメッセージのテキストループアニメーションを入れています。

このテキストループアニメーションではMontserratのウェイト100&イタリックを使用しています。

今回の記事は以上です。