共通設定(カラー・フォント)

共通設定(カラー・フォント)

『TAテーマ001: Version 2.07以降』の共通設定(カラー・フォント)の説明です。

 

共通設定(カラー・フォント)サイトイメージカラー

実例

common_basic2

サイトのイメージカラーに関する設定です。各設定の個別の配色設定(カラーピッカー)の中の選択色になります。項目を入力して設定ページの下部にある”共通『カラー・フォント』設定更新”をクリックすると設定が確定します。

※ 例では説明を容易にするために極端な配色設定をしています。

① 背景色(サイト全体の背景色):サイトの背景色を想定したイメージカラー設定です。サイトのイメージを左右する重要な色です。

② ハイライト色(タイトル等の背景色):ヘッドライン(h2~h5のタイトル)等を想定したイメージカラー設定です。

③ 標準テキスト色(通常のテキストの色):通常のテキストを想定したイメージカラー設定です。黒や濃い灰色系が多いです。

④ ハイライト背景用テキスト色(ハイライト色上のテキストの色):ハイライト色を背景にした時のテキストを想定したイメージカラー設定です。

※ イメージカラーはあくまで想定色です。実際の配色決定はそれぞれ対応箇所の設定(イメージカラーは選択色)で行います。

共通設定(カラー・フォント)共通フォント

実例

common_basic6

サイトのフォントに関する設定です。項目を入力して設定ページの下部にある”共通『カラー・フォント』設定更新”をクリックすると設定が確定します。

※ 例では説明を容易にするために極端な配色設定をしています。

① フォントファミリー:フォントファミリーの設定です。※ Font familyの詳細デザインは表示するブラウザーに依存します。

② テキストの共通サイズ

③ テキストの共通色:標準テキスト色以外の色も選択可能です。

④ リンク付テキスト共通色:リンクが張られたテキスト色の設定です。

⑤ リンク付テキスト下線:リンクが張られたテキストの下線表示設定です。

⑥ リンク付テキストHOVER共通色:リンクが張られたテキストのHOVER時の色の設定です。

⑦ リンク付テキストHOVER下線表示:リンクが張られたテキストのHOVER時の下線表示設定です。

※ 上記設定は個別に設定を行わないテキストに反映されます。(個別設定内容が優先されます)

共通設定(カラー・フォント)共通パラグラフ・共通リンク付画像デザイン

実例

common_basic8

ブログ投稿などで多用される共通パラグラフ設定と共通リンク付画像デザインに関する設定です。項目を入力して設定ページの下部にある”共通『カラー・フォント』設定更新”をクリックすると設定が確定します。

※ 例では説明を容易にするために極端な数値を設定をしています。

① 共通パラグラフ(<p> </p>の箇所)の高さ(line-height)

② 共通パラグラフ(<p> </p>の箇所)の上部マージン

③ 共通パラグラフ(<p> </p>の箇所)の下部マージン

④ 共通パラグラフ(<p> </p>の箇所)の左部マージン

⑤ 共通パラグラフ(<p> </p>の箇所)の右部マージン

⑥ 共通リンク付画像の透明度:通常の画像の透明度です。※ 通常は1.0を設定ます。

※ 上記設定は個別に設定を行わないパラグラフに反映されます。(個別設定内容が優先されます)

⑦ HOVER時の共通リンク付画像の透明度:HOVER時の画像の透明度です。※ 0.5~0.8程度を設定すると見栄えが良いです。

  • LINEで送る


ta_thm001_downloadta_designing