Thinkificを使っていると、CSSをカスタマイズしたいという場面があると思います。
例えば、レイアウト全般もそうですが、日本語フォントのバリエーションはデフォルトでは使えないので、Googleフォントなどを使えると良いですよね。
今回は、ThinkificサイトにCSSを追加する方法をご紹介します。
Setting からCSSを追加
まずは、 Settings > Code & analytics > Site footer code に進みます。
こちらには
Add analytics code, tracking pixels, or custom JS to your site. (Wrap this code in a <script> tag)と書いてあり、ここからスクリプト系を追加することができます。
ヒント
こちらの方法は有料プラン以上で利用可能となります。
注意点ですが、ここに直接CSSを追加しても反映されません。 CSSを追加するには <style> タグで囲う必要があります。
例
<style>
.box5 {
padding: 0.5em 1em;
margin: 2em 0;
border: double 5px #4ec4d3;
}
.box5 p {
margin: 0;
padding: 0;
}
</style>このように挿入しないと反映されないので注意が必要です。
挿入をしたら、 Site footer code の横にある Save ボタンをクリックします。 何故か下の Save ボタンでは保存されないので気を付けましょう。
GoogleフォントをThinkificに追加する手順
CSSを使ってフォントを追加する方法は色々ありますが、今回はGoogleフォントを追加する方法をご紹介します。
1. Google Fontsでフォントを選ぶ
まずは Google Fonts にアクセスします。
日本語フォントの場合は、左側の Language から Japanese を選ぶと探しやすくなります。
代表的な日本語フォントには以下のようなものがあります。
- Noto Sans JP（読みやすく万能）
- Noto Serif JP（明朝体）
- Zen Kaku Gothic New（モダン）
- M PLUS 1p / M PLUS Rounded 1c（やわらかい印象）
使いたいフォントをクリックし、Get font を選択します。
ちなみに、フォントは試し書きをすることもできます。
- すべての漢字に対応していないことがある（カタカナ、難しい漢字なども入力して確認する）
- 英数字に対応していないこともあるのでアルファベットも入力してみる
↑このようなケースもあるので、試し書きをすることをオススメします。
2. Google Fontsの読み込みコードを取得
Get font を押した後に、カートアイコンをクリックすると、選択されたフォントが表示されます。
注意
ここに複数のフォントがあると、CSSが複雑になります。初心者の方はまずは1個だけここに表示されている状態で進めてください。
フォントを選択すると、右側（または下部）に Get embed code というセクションが表示されます。こちらをクリックします。
ここに表示される @import タグをコピーします。
例：
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
</style>3. Thinkificの Site footer code に貼り付ける
Thinkificの管理画面で、
Settings > Code & analytics > Site footer code
に戻ります。
ここに、先ほどコピーした Google Fonts の @import タグ を貼り付けます。
すでに <style> で囲われているのでそのままでOKです。 再度 <style> で囲う必要はありません
4. フォントを適用するCSSを書く
次に、フォントを実際に使うためのCSSを追加します。
Google Fontsのページに表示されている
font-family の指定を使います。
例（Noto Sans JP の場合）：
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
}
</style>このように <style> タグで囲って、Site footer code に追記します。
5. 見出しだけフォントを変える場合
全体ではなく、見出しだけフォントを変えたい場合は以下のように指定できます。
<style>
h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Sans JP', sans-serif;
}
</style>また、本文と見出しでフォントを分けることも可能です。
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
}
h1, h2, h3 {
font-weight: 700;
}
</style>6. 保存して反映を確認
コードをすべて貼り付けたら、
Site footer code の右側にある Save ボタンを必ずクリックします。
保存後、サイトをリロードするとフォントが反映されているはずです。 反映されない場合は、ブラウザのキャッシュクリアやシークレットモードで確認してみてください。
▼最終的にこんな感じになります。（これはちょっとやりすぎかもしれませんが、、、笑）
もしフォントが反映されない場合は、
font-family: "Potta One", system-ui!important; のように !important を付ければ機能するはずです。
まとめ
いかがでしたでしょうか。以下のポイントを押さえることで、簡単にThinkficのフォントを変更することができます。
- Google Fonts は
@importタグで読み込む - CSSは必ず
<style>タグで囲う - Site footer code 右側の Save ボタンで保存する
- 日本語フォントは
Noto Sans JPが無難でおすすめ
この方法を使えば、Thinkificでもデザインの自由度がかなり上がります。 CSSと組み合わせて、フォント・余白・配色なども調整してみてください。
