Luxeritasで文字をイジってみよう!【文字種(フォントファミリー)、文字サイズ、文字色編】

2018年10月2日ブログ管理Luxeritas, Luxeritasカスタマイズ, ブログ管理, 初心者, 文字

文字設定ヘッダー

トリ師匠
トリ師匠
今日はサイト全体の「文字の設定」をすんで。

ぐず夫
ぐず夫
文字の設定? …面倒やのう。
トリ師匠
トリ師匠
毎度毎度メンドウメンドウて、お前よりこっちのが面倒じゃ!
ぐず夫
ぐず夫
す、すんまへん。気ぃつけます。

ということで、今回はLuxeritasのカスタマイズ機能を使ってサイトの文字設定をしてみたいと思います。

文字種(フォントファミリー) 機能

文字種選択

トリ師匠
トリ師匠
サイト全体に表示する文字の種類を決めるとこやの。「文字種(フォントファミリー)」を選択じゃ!

フォントの設定

● ローマ字フォントを優先する
フォントの優先度を決めます。アルファベットの表記も日本語フォントで表示したい場合は、チェックを外します。

● ローマ字フォント
ローマ字に用いるフォントを指定します。デフォルトは「Segoe UI + Helvetica」。

● 日本語フォント
日本語に用いるフォントを指定します。デフォルトは「メイリオ + San Francisco」。

 

師匠のワンポイント!

文字の種類は各々自由に決めるとええで。「ローマ字フォントを優先する」をチェックせんと基本は日本語フォントが使われるで、画面の文字見ながら好みの設定するとええよ。

 

文字サイズ 機能

文字サイズ選択

トリ師匠
トリ師匠
サイト全体に表示される文字の大きさを細かく決めるとこじゃ。「文字サイズ」を選択してクリック!

文字サイズ各種

● 基準値
サイトデフォルトの文字サイズを設定します。イメージは、以下個別に設定されている項目に対する倍率となります。

● Body
サイトのBody要素内の文字サイズを設定します。なお、以下個別に設定されている項目は個別設定が有効となります。

トリ師匠
トリ師匠
「基準値」は全体の文字サイズの倍率を決め、「Body」は大まかな部分の文字サイズを決めれるイメージかの。

 

● サイトのタイトル
サイトタイトルの文字サイズを設定します。

サイトタイトル

 

● キャッチフレーズ
キャッチフレーズの文字サイズを設定します。

キャッチフレーズ

 

● 抜粋
抜粋表示の文字サイズを設定します。

抜粋

 

● 記事全体
記事全体の文字サイズを設定します。(※画像はイメージです)

記事全体イメージ

 

● 記事のタイトル:H1
記事タイトルの文字サイズを設定します。

題字

 

● 記事内:H2
記事内H2見出しの文字サイズを設定します。

h2タグ

 

● 記事内:H3
記事内H3見出しの文字サイズを設定します。

h3タグ

トリ師匠
トリ師匠
ぐず夫のブログじゃとh2がワシ、h3がダンパの画像が出る見出しだの。見出しそれぞれのサイズが決められるで、個別に設定してやるんじゃ! h4~6は省略するぞ。

● 記事内:H4
記事内H4見出しの文字サイズを設定します。

● 記事内:H5
記事内H5見出しの文字サイズを設定します。

● 記事内:H6
記事内H6見出しの文字サイズを設定します。

 

● 記事内:li
記事内liタグ(リスト項目)使用部分の文字サイズを設定します。

li項目

トリ師匠
トリ師匠
投稿画面の「番号なしリスト」「番号付きリスト」なんかが該当するの。

 

● 記事内:pre
記事内preタグ(整形済みテキスト)使用部分の文字サイズを設定します。分からない方はコチラ(外部サイト)などを参照。

pre項目

 

● 記事内:blockquote
記事内blockquoteタグ(引用)使用部分の文字サイズを設定します。

block項目

トリ師匠
トリ師匠
投稿画面の「引用」なんかが該当するの。

 

● メタ情報
各所メタ情報の文字サイズを設定します。

メタ情報

 

● パンくずリンク
各所パンくずリンクの文字サイズを設定します。

パンくずリンク

 

● ヘッダーナビ(グローバルナビ)
ヘッダーナビ項目の文字サイズを設定します。

ヘッダーナビ

 

● コメント
ディスカッション内の文字サイズを設定します。

コメント欄

 

● サイドバー
サイドバー内の文字サイズを設定します。

サイドバー本文

 

● サイドバー:H3
サイドバー内H3見出しの文字サイズを設定します。

サイドバーh3

 

● サイドバー:H4
サイドバー内H4見出しの文字サイズを設定します。

サイドバーh4

 

● フッター
フッター内文字サイズを設定します。

フッター本文

 

● フッター:H4
フッター内H4見出しの文字サイズを設定します。

フッターh4

 

文字色 機能

文字色選択

トリ師匠
トリ師匠
基本的な文字の色を決める機能じゃ。そんじゃ「文字色」を選択しよか。

文字色各種

● 文字色(Body)
サイトのBody要素内の文字色を設定します。

  • 変更点の例1
    変更例1
  • 変更点の例2
    変更例2

● リンク色(Body)
リンクが貼られた文字の文字色を設定します。

リンク文字色
リンク文字色を橙色に設定

 

● リンクホバー文字色(Body)
リンクが貼られた文字にホバー(マウスなどで触れた場合等)した時の文字色を設定します。
(※画像省略)

 

● ヘッダー文字色
ヘッダー部の文字色を設定します。

ヘッダー文字色
赤色で表示の場合

 

● ヘッダーリンク色
ヘッダー部のリンクが貼られた文字の文字色を設定します。(※画像省略)

● ヘッダーリンクホバー文字色
ヘッダー部のリンクが貼られた文字にホバーした時の文字色を設定します。

ヘッダークリック時
マウスホバー時に文字色を橙色に設定

 

● フッター文字色
フッター部の文字色を設定します。

フッター文字色
フッター部の文字色を赤色に設定

● フッターリンク色
フッター部のリンクが貼られた文字の文字色を設定します。(※画像省略)

● フッターリンクホバー文字色
フッター部のリンクが貼られた文字にホバーした時の文字色を設定します。

フッターリンクホバー時
ホバー時の緑色に設定

 

文字の設定を終えて…

ぐず夫
ぐず夫
見栄えを設定するのもなかなか辛いもんやの。
疲れすぎて倒れそうじゃ…
トリ師匠
トリ師匠
いつもダラけすぎなんじゃ。
ぐず夫
ぐず夫
全然ダラケてへんわ(くわっ!)
トリ師匠
トリ師匠
はいはい。そんじゃまた~!

以上で文字種(フォントファミリー)、文字サイズ編のカスタマイズを終了します。

ではまた次回をお楽しみに!