WordPress OceanWPテーマのカスタマイズ・ タイポグラフィ～その４～
コンテンツ
OceanWPの続き（その４）
WordPressの海外製のテーマOceanWP（無料版）をインストールして試行錯誤した時の備忘録の４回目。
過去の記事は下記の通り。
４回目の今回はタイポグラフィ設定に関する記事とする。
タイポグラフィ
フォントファミリーやサイズ、文字色等のタイポグラフィに関する設定を行う。
日本語のフォントについて
OceanWPは項目ごとにかなり細かい設定が出来るようになっているのだが海外製のテーマということもあり、カラーやサイズなど一部の設定は反映されるのだが肝心のフォントファミリーの設定等は日本語には反映されない。
そのため、海外製のテーマを使用していてフォントを変更したい時はWEBフォントを使用するのがオススメする。
WEBフォントの設定の仕方はこちらの記事を参照。
一般
GOOGLE フォントを停止 | 本文以降のフォントファミリーの指定でGoogleフォントを指定した際に有効にするかどうか チェックされている場合はGoogleフォントが指定されていても無効になる |
フォントサブセット | 以下のフォントサブセットがチェック可能となっているが、こちらは使い方が良く分からなかった
|
本文
本文のフォントの設定（フォントファミリー等の指定は英文のみ）。
以降で見出し、ロゴ、メインメニュー等と個別にフォントが設定可能だが個別の設定が優先される。
フォントファミリー | フォントを一覧から指定する 標準フォントの他にGoogleフォント（下の方）を指定する事ができる また英文のみに反映される
|
フォントの太さ | フォントの太さを指定する ※全てのフォントに対応している訳ではない模様 以下の中から選択する
|
フォントスタイル |
の中から選択する |
文字の変形 | 英字に関しての設定
の中から選択する ”先頭を大文字”は全ての英単語の最初の文字が大文字になる（test→Test） 当然だが日本語には適用されない |
フォントサイズ | フォントサイズを px、em、%で指定する 尚、ラベルの横のアイコンをクリックする事によりパソコン、タブレット、スマートフォンでそれぞれ別々のフォントサイズを指定する事ができる
|
行の高さ | １行の高さを指定する こちらもフォントサイズと同様にパソコン、タブレット、スマートフォンそれぞれの行の高さを指定する事ができる |
文字間隔 (px) | 文字と文字の間隔をピクセルで指定する パソコン、タブレット、スマートフォン毎に文字間隔を指定する事ができる |
文字色 | 文字色を色パレットから指定する |
すべての見出し
全ての見出し（見出し１～４）のフォントの設定を行う（フォントファミリー等の指定は英文のみ）。
見出し１～４で個別で設定した場合はそちらが優先される。
設定可能な項目は以下の７つ（フォントサイズが無い)
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- 行の高さ
- 文字間隔
- 文字色
設定方法は前述の本文と同様。
見出し１～４（H1～H4）
見出し１～４のフォントの設定（フォントファミリー等の指定は英文のみ）。
”すべての見出し”よりもこちらの設定が優先される。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
設定方法は前述の本文と同様。
ロゴ
ロゴのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
上部バー
上部のバーのフォントの設定（フォントファミリー等の指定は英文のみ）。
下記の表示例では上部バーにメインメニューを表示している。
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
メインメニュー
メインメニューのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の６つ（行の高さと文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 文字間隔
メインメニュー：ドロップダウン
メインメニューのドロップダウンのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
モバイルメニュー
モバイル時のメニューのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
ページタイトル
ページタイトル（キャッチコピー）のフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
ページタイトルのサブ見出し
ページタイトルのサブ見出しの場所が分からなかった。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
パンくずリスト
パンくずリストのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の６つ（行の高さと文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 文字間隔
ブログエントリータイトル
ブログエントリータイトルのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
ブログ投稿タイトル
ブログ投稿タイトル（ブログ本文のタイトル）のフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
サイドバーウィジェットの見出し
サイドバーウィジェットの見出しのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
ウィジェット
ウィジェットの文字のフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
フッターウィジェットの見出し
フッターウィジェットの見出しのフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の８つ
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
- 文字色
フッターの著作権
フッターの著作権のフォントの設定（フォントファミリー等の指定は英文のみ）。
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
フッターメニュー
フッターメニューのフォントの設定（フォントファミリー等の指定は英文のみ）。
※フッターにメニューを表示した場合
設定可能な項目は以下の７つ（文字色が無い）
- フォントファミリー
- フォントの太さ
- フォントスタイル
- 文字の変形
- フォントサイズ
- 行の高さ
- 文字間隔
続く
長くなったので今回の記事は以上で終了する。
次回は”上部バー”以降の記事としたい。
最近のコメント