👻

WixStudioでVeloを使う Step 41 「GoogleFontsの適用」

に公開
JavaScript
Web
wix
Velo by Wix
Wix Studio
tech

はじめに

意外にもまだ記事では触れていなかった。WixStudioではCSSが使える。だから、一部のWebフォントを適用することができる。僕も使う事が多い。GoogleFontsには大変お世話になっている。今回はGoogleFontsを使ってWixStudioのコンテンツにフォントを適用する手順をメモしておく。

https://fonts.google.com/

準備

新しくサイトを作成しておく。コードも有効にしVeloを有効にしておく。

テキスト要素を配置

フォントを適用するならテキスト要素がないと話にならない。幾つかテキスト要素を配置しておく。テキストの内容は問わない。

テキスト要素を配置
テキスト要素を配置

今回は3つ配置した。

標準のフォント

WixStudioにもフォントは用意されている。
フォントの設定
フォントの設定

フォントアップロードすることだって出来るし。
言語を追加すれば対応したフォントが増える。

言語を追加
言語を追加

最近では日本語のフォントも豊富になった。

日本語のフォント
日本語のフォント

今回の記事は本当に必要なのか不安になってきた。

GoogleFonts

GoogleFontsの細かい説明は割愛。

GoogleFonts
GoogleFonts

フォントを選択する

ただ、面白いフォントもいっぱいあるし、手軽だしよく使う。
今回は日本語に対応したフォントを使いたいので、言語を絞っておく。

日本語に対応したGoogleFonts
日本語に対応したGoogleFonts

スクロールしながら使いたいフォントを選択する。
僕のお気に入りはDotGothic16。なんだかわからないけど、魅力を感じる。

DotGothic16
DotGothic16

利用したければGetFontボタンを押す。

1 font family selected
1 font family selected

フォントが選択される。
他にも使いたいフォントがあるなら同じ手順でフォントを選択する。僕はもう1つ選択しておいた。

2つのフォントが選択されている
2つのフォントが選択されている

https://fonts.google.com/specimen/DotGothic16
https://fonts.google.com/specimen/RocknRoll+One

必要なCSS記述を取得

フォントを適用させるためにはCSSの記述が必要。今回選択したフォントを適用させるための記述を取得する。Get embed codeを押す。

Get embed code
Get embed code

Get embed codeが見当たらない場合は、ページ右上のバッグ?のマークを押せば出てくるはず。

Embed codeに進むと記述が提示される。WixStudioではフォントを適用するならCSSで完結できる方が都合が良いので@importに切り替えておく。

embed code
embed code

今回、提示された記述は3つ。それぞれ役割が違う。
まず1つ目の記述は、フォントの読み込み。

Embed code in the <head> of your html
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=RocknRoll+One&display=swap');

提示されている記述には<script>と</script>が含まれているがこれらは不要なので削っておく。

残りの2つはフォント適用するために必要な記述。
こちらはDotGothic16。

DotGothic16
.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

で、こちらはRockRoll One。

RocknRoll One
.rocknroll-one-regular {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

これらの記述は後ほど使うので、メモしておくかページを開いておく。

実装

既に要素は配置してあるが、これらの操作以外にフォントを適用するための操作が必要。具体的には要素のにCSSクラスを設定する。そしてCSSを記述する。

CSSクラス(カスタムクラス)を設定する

Veloを有効にし、既に配置されているテキスト要素の1つを選択する。
プロパティ・イベントを選択し、CSSクラスを開く。初めてCSSクラスを利用する場合、CSSファイルを追加を促される。

CSSクラス：初めて利用する時はCSSファイルを追加しなければならない
CSSクラス：初めて利用する時はCSSファイルを追加しなければならない

CSSファイルを追加を選択する。パネルの内容が切り替わる。

CSSクラス
CSSクラス

カスタムクラスの入力欄が現れる。ここに適用したいフォントのクラスを指定する。
クラスはGoogleFontsで提示された記述を参考にすればいい。

GoogleFontsから提示された記述
GoogleFontsから提示された記述

具体的にはそれぞれの記述の1行目dotgothic16-regularとrocknroll-one-regular(先頭の.は除く)。クラスの付け方にはルールがあるが基本的には任意に付けられる。今回でいえばどちらの記述も末尾の-regularが不要であれば取り除いても構わない。そのかわり、後ほど記述するCSSでもそれらに合わせた記述しておけばいい。

せっかくなので任意のクラス名を使うことにする。
配置した3つのテキスト要素のうち2つにクラスを指定する。それぞれfont-style-1とfont-style-2としておく。

テキスト要素にクラスを指定する。1つにはfont-style-1
テキスト要素にクラスを指定する。1つにはfont-style-1

テキスト要素にクラスを指定する。もう1つにはfont-style-2
テキスト要素にクラスを指定する。もう1つにはfont-style-2

これでCSSクラス(カスタムクラス)の設定は完了。

Velo(CSS)

Veloといっても今回はJavascriptは書かない。記述するのはCSSになる。コードパネルを開き、ページコードを選択するとCSSとしてglobal.cssが用意されている。

コードパネルからglobal.cssを選択する
コードパネルからglobal.cssを選択する

WixStudio下部にglobal.cssが開かれる。

ここにGoogleFontsから提示された3つのコードを貼り付ける。

global.css(未完成)
/* CSS リファレンス：https://www.wix.com/velo/reference/$w/styling-elements-with-css*/
 
/* これらの CSS スタイルは、サイトの全ページに適用されます。ここに CSS を入力してください。例：*/

/*  ボタンの背景色を赤に変更：*/
/* .button{
    background-color: red;
} */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=RocknRoll+One&display=swap');

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rocknroll-one-regular {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

これはまだ未完成。これから手を加える。

まず@import url(...)の記述。これは<script>と</script>さえ除去しておけばそれ以外に手を加える必要がない。

次に.dotgothic16-regular {....}の記述。ここは変更が必要。とくにdotgothic16-regularの部分。これはクラスを指す。先程テキスト要素にもCSSクラスを設定した。その時に設定したクラスと合わせておく必要がある。今回はdotgothic16-regularをfont-style-1に変更しておく。さらに、WixStudioによって出力されるHTMLの構造にあわせて.rich-text__textもしくは*を加えておく。
結果として.dotgothic16-regular {....}は.font-style-1 .rich-text__text{....}となる。同様に.rocknroll-one-regular {....}は.font-style-2 .rich-text__text{....}とする。

ちなみに先頭の.はクラスの印。.font-style-1は font-style-1というクラスが付けられている要素を対象 という意味。

完成したコードは以下の通り。

global.css(完成)
/* CSS リファレンス：https://www.wix.com/velo/reference/$w/styling-elements-with-css*/
 
/* これらの CSS スタイルは、サイトの全ページに適用されます。ここに CSS を入力してください。例：*/

/*  ボタンの背景色を赤に変更：*/
/* .button{
    background-color: red;
} */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=RocknRoll+One&display=swap');

.font-style-1 .rich-text__text {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-style-2 .rich-text__text {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

動作確認

CSSが正しく適用されているかどうかを確認するだけならプレビューで確認出来る。

プレビューを実施
プレビューを実施

ちょっとわかりづらいので日本語を含ませてみる。

日本語を含ませて、プレビューを実施
日本語を含ませて、プレビューを実施

無事、フォントが適用されていることを確認出来た。

応用

日本語と英語が混在した文書の場合、条件はあるがちょっとしたテクニックが使える。

まずGoogleFontsで新たにもう1つフォントを選択する。ただし、日本語に対応していない英字だけのフォント。

今回はLibertinus Keyboardというフォントを選択してみた。これも可愛い。

日本語に対応していないフォントも選択
日本語に対応していないフォントも選択

https://fonts.google.com/specimen/Libertinus+Keyboard

追加したらGet embed codeを押し、記述を取得する。
必要な記述は2つ。@import url(...);の記述は更新されているためglobal.cssの記述と差し替えておく。

さらに、新しく追加したフォントを適用するためのCSSが提示されているので確認しておく。

新しく追加したフォントを適用するためのCSS
新しく追加したフォントを適用するためのCSS

この記述はすべてが必要な訳ではなく.libertinus-keyboard-regular {...}内のfont-family:に続く"Libertinus Keyboard"が重要。
この"Libertinus Keyboard"をglobal.cssに加える。

以下、global.cssの改造版。

global.css(改造)
/* CSS リファレンス：https://www.wix.com/velo/reference/$w/styling-elements-with-css*/
 
/* これらの CSS スタイルは、サイトの全ページに適用されます。ここに CSS を入力してください。例：*/

/*  ボタンの背景色を赤に変更：*/
/* .button{
    background-color: red;
} */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Libertinus+Keyboard&family=RocknRoll+One&display=swap');

.font-style-1 .rich-text__text {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-style-2 .rich-text__text {
  font-family: "Libertinus Keyboard", "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

まず、@import url(...);は差し替え済。
つぎに、注目するのは.font-style-2 .rich-text__text {...}の中身。"Libertinus Keyboard"を追加してある。

global.css(抜粋)
.font-style-2 .rich-text__text {
  font-family: "Libertinus Keyboard", "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

修正を加え、再度プレビューする。

修正を加え、再度プレビュー
修正を加え、再度プレビュー

1つのテキスト要素で複数のフォントが適用されているのが確認出来る。
これはfont-familyの仕様。font-familyは与えられたフォントリスト"Libertinus Keyboard", "RocknRoll One", sans-serif;を順に参照する。左から右に向かって優先度が低くなる。なので、今回の記述では"Libertinus Keyboard"の適用から始まる。このフォントでは英数はフォントが用意されているが、日本語には対応してない。なので、日本語部分では次のフォント"RocknRoll One"の適用を試みることになる。

まとめ

今までにもあまり扱っていなかったCSSによる調整に触れてみた。特に今回はフォントに注目。冒頭でも触れたとおり今のWixStudioはフォントが多い。日本語にも対応したフォントも十分に用意されているので助かる。GUIで出来る設定をわざわざ記述で調整する必要があるのかといった疑問も生じるかもしれない。しかし、今回の実装は実は役に立つ。

今回でいえばCSSクラス(カスタムクラス) にfont-style-1が設定されているものにフォントを適用させた。この実装は重要でfont-style-1を他のテキスト要素にも設定すれば同様のフォントが適用されることになる。1つの要素を対象とするならGUI操作でも十分。でも、対象が複数になれば各要素のフォントを設定していくのはやや手間。そのそうさに比べればCSSクラス(カスタムクラス) にfont-style-1を設定する操作はコピペで済む。また、それらのフォントが気に入らなければCSSの記述側で調整すれば良い。具体的にはfont-family: ...;に好みのフォントを指定し直せば良い。GUIで調整するより早い。

この辺もWixStudioを正しく使えていればGUIで完結できるのかもしれないが…コードで生きてきた僕にはこちらの方が楽に感じてしまう。

結局、好みなのか...も。

つづき

https://zenn.dev/niibori/articles/veloonwixstudio-beginner-0042

Discussion