フォント｜サイトの雰囲気が変わるフォント機能
サイト全体に反映されるフォントの設定を行います。フォントの種類によって、サイトの雰囲気は大きく変わります。
たとえば次のようなイメージです。どちらがいい悪いではないので、サイトで表現したいイメージに合わせて設定してみましょう。
- 明朝体：お堅い、公文書のような雰囲気、きちんとした印象
- ゴシック：カジュアル、読みやすい、Webで一般的
以下の記事で設定できるフォントの一覧を確認できます。
設定箇所
ダッシュボード内のTCDテーマ > 基本設定 > フォントから設定します。
使い方
- 基本設定「フォント」でフォントセットを登録する。（3タイプ＋ロゴ用フォント）
- フォントを設定できる各所でフォントセットを呼び出す。
フォントセットを登録する
各フォントセットは、このようなUIで見た目を確認しながら設定できます。
まず、フォントタイプを「システムフォント」「Webフォント」から選びます。すると、その下の「和文フォント」「欧文フォント」の項目が変化します。
システムフォント
用意されたフォントの中から和文・欧文で使用するフォントを一つ選択します。
パソコンやスマホなどの各端末にインストールされているフォントです。OSバージョン等によっては代替フォントが表示されます。端末によって微妙に異なる場合があるということです。
| 和文フォント | ・ゴシック体 ・明朝体 ・教科書体 |
| 欧文フォント |
サンセリフ体： ・Arial：Win Mac iOS – 最もベーシックなフォント セリフ体： ・Palatino：Win Mac iOS – 古典的なセリフフォント スクリプト体： ・Zapfino：Mac iOS – エレガントで優雅（※WinではInk Free） |
Webフォント
Webフォントでは次のフォントから設定できます。
| 和文フォント | ・Noto Sans JP ・Zen Kaku Gothic New ・Noto Serif JP ・Zen Old Micho ・Klee One |
| 欧文フォント | ・Roboto ・Hind Madurai |
ウェブサイトがインターネット経由でサーバーからフォントデータを読み込み、ユーザーのデバイスにインストールされていないフォントを表示する技術です。どの閲覧環境からでも同じフォントを表示できます。
フォントセットを呼び出す
登録したフォントセットを各所で呼び出します。基本設定 > フォントではサイト内全体に反映されるフォントを設定できます。
| ベースフォント （サイト全体に適用） |
・フォントタイプ（フォント1, 2, 3） |
| ヘッダー見出し （ヘッダー内の見出しに適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ別） ・文字の方向（横書きor縦書き） |
| アーカイブタイトル （ヘッダー下部の見出しに適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ別） |
| 記事タイトル （各記事タイトルに適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ） |
| 記事本文 （各記事の本文に適用） |
・フォントタイプ（フォント1, 2, 3） （文字サイズはTCDクラシックエディタプラグインの「基本設定」で設定） |
設定後は、お使いのPC・スマホで実際の表示を確認しておきましょう。
- フォントはサイトの雰囲気に合っている？
- テキストは大きすぎない？小さすぎない？
問題なければ、「ロゴ」の設定に進みましょう。
高校生の英語と進路相談を担当しています。受験期の不安や悩みに寄り添いながら、一緒に進路を考えることを大切にしています。受験英語だけでなく、英語が話せる楽しみも伝えたいです。
関連記事
