カラーはもちろんですが、フォントも「サイトの雰囲気」に大きく影響します。文字もデザイン。サイトをより洗練されたものにするために確認しておきましょう。
設定箇所
ダッシュボード内のTCDテーマ > 基本設定 > フォントから設定します。
■■■■■■■■■■TO基本設定＞フォントの場所を示す画像
使い方
- 基本設定「フォント」でフォントセットを登録しておく。（3タイプ+ロゴ用フォントを登録可）
- フォントを設定できる各所でフォントセットを呼び出す。
フォントセットを登録する
各フォントセットは、このようなUIで見た目を確認しながら設定できます。
フォントタイプを「システムフォント」か「Webフォント」から選ぶことで、設定項目が変化します。設定できるフォントの一覧は以下の記事をご覧ください。キャプチャ画像つきでご紹介しています。
>> システムフォント
>> 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 |
ウェブサイトがインターネット経由でサーバーからフォントデータを読み込み、ユーザーのデバイスにインストールされていないフォントを表示する技術です。どの閲覧環境からでも同じフォントを表示できます。
フォントセットを呼び出す
登録したフォントセットを各所で呼び出します。こちらは基本設定 > フォントの設定画面です。
■■■■■■■■■■TO基本設定＞フォント内のベースフォント以下のキャプチャ
基本設定内では以下の箇所のフォント・文字サイズを設定します。
| ベースフォント （サイト全体に適用） |
・フォントタイプ（フォント1, 2, 3） |
| ページヘッダー （アーカイブや固定ページで適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ別） |
| 見出し （サービスページやプランページで適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ別） |
| キャッチフレーズ （アーカイブや固定ページで適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ別） |
| 記事タイトル （各記事タイトルに適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ） |
記事本文の文字サイズはTCDクラシックエディタプラグインの「基本設定」で設定します。
設定が済んだら、お使いのPC・スマホで実際の表示を確認します。
- 意図したフォントが表示されてる？
- 和文・欧文共に問題ない？
- テキストは大きすぎない？小さすぎない？
- サイトの雰囲気に合っている？
続いて「ロゴ」の設定に進みましょう。
コメントパンマン