TAテーマ001取扱い説明(ヘッダー設定)

TAテーマ001取扱い説明(ヘッダー設定)

『TAテーマ001』のヘッダー設定の説明です。

 

基本設定

ヘッダーバナーエリアの背景色・背景画像

header_frame1
header_frame2

ヘッダーバナーエリアの背景色・背景画像に関する設定です。項目を入力して”ヘッダー『基本設定』設定更新”をクリックすると設定が確定します。

① 背景色

② 背景画像

③ 背景画像の場所と繰り返しルール

④ 背景画像の上下部端からの距離 ※ y方向の繰り返しが無い場合のみ有効です。

ヘッダーバナーエリア(ロゴ、連絡先、検索)のタイプ

header_frame3
header_frame4


header_frame5

ヘッダーバナーエリア(ロゴ、連絡先、検索)のタイプに関する設定です。項目を入力して”ヘッダー『基本設定』設定更新”をクリックすると設定が確定します。

① ヘッダーバナーエリア(ロゴ、連絡先、検索)のタイプをプルダウンメニューから選択します。

② ヘッダーバナーエリアタイプの確認:チェックを入れると左図の様にグラフィックで各パーツの確認ができます。ロゴ画像などが無い場合に先行で確認ができます。

ヘッダーバナーエリア(ロゴ、連絡先、検索)のサイズ

header_frame6
header_frame7

ヘッダーバナーエリア(ロゴ、連絡先、検索)のサイズに関する設定です。項目を入力して”ヘッダー『基本設定』設定更新”をクリックすると設定が確定します。

① ヘッダーバナーエリアの高さ、② ヘッダーバナーエリアの下側余白(マージン)

③ ロゴエリア左余白、④ ロゴエリア幅、⑤ ロゴエリア右余白、⑥ 連絡先エリア幅、⑦ 連絡先エリア右余白、⑧ 検索エリア幅、⑨ 検索エリア右余白

※ 選択したヘッダーバナーエリアタイプに必要な箇所の幅の合計が100%を超えないように設定する必要があります。(無効箇所は薄色表示になります)

ヘッダーバナーエリアの位置(フレーム外への移動)

header_frame8
header_frame9

ヘッダーバナーエリアの位置(フレーム外への移動)に関する設定です。ヘッダー(バナーエリア)がフレーム外に移動して常時表示固定枠となるモードです。項目を入力して”ヘッダー『基本設定』設定更新”をクリックすると設定が確定します。※ 説明の分かりやすさのために極端な配色にしています。

① フレーム外に移動する:チェックを入れると有効になります。※ レスポンシブデザイン時は標準のヘッダー位置にもどります。

② 背景の透明度 ※ ヘッダーバナーエリア背景色の設定が必要です。

グローバルメニューとヘッダー画像の位置(メイン枠への移動)

header_frame10
header_frame11

グローバルメニューとヘッダー画像の位置(メイン枠への移動)に関する設定です。グローバルメニュー、ヘッダー画像、パンくずナビがまとめてメインコンテンツ枠の最上部に移動するモードです。項目を入力して”ヘッダー『基本設定』設定更新”をクリックすると設定が確定します。

① メイン枠に入れる:チェックを入れると有効になります。

フォント

ヘッダーフリーエリアフォント・ヘッダーフリーエリアパラグラフ(<p> </p>の箇所)デザイン

header_font1

ヘッダーフリーエリアフォント・ヘッダーフリーエリアパラグラフ(<p> </p>の箇所)デザインに関する設定です。項目を入力して”ヘッダー『フォント』設定更新”をクリックすると設定が確定します。※ 対象フレーム内のスタイル指定無しフォントに適応されます。

① ヘッダーフリーエリアのテキストサイズ

② リンク(Anchor)が張られたテキストの装飾設定:有効にすると当設定(ヘッダーフリーエリアフォント専用)が選択されます。無効の場合は共通設定が採用されます。

③ ヘッダーフリーエリアフォント専用のリンクが張られたテキストの色

④ ヘッダーフリーエリアフォント専用のリンクが張られたテキストの下線表示

⑤ ヘッダーフリーエリアフォント専用のリンクが張られたテキストのHOVER色

⑥ ヘッダーフリーエリアフォント専用のリンクが張られたテキストのHOVER下線表示

⑦ ヘッダーフリーエリアパラグラフデザイン(共通設定 or ヘッダーフリーエリア専用):有効にすると当設定(ヘッダーフリーエリアフォント専用)が選択されます。無効の場合は共通設定が採用されます。

⑧ ヘッダーフリーエリアパラグラフの高さ(line-height)

⑨ ヘッダーフリーエリアパラグラフの上余白、⑩ ヘッダーフリーエリアパラグラフの下余白

⑪ ヘッダーフリーエリアパラグラフの左余白、⑫ ヘッダーフリーエリアパラグラフの右余白

ロゴエリア

ロゴエリアの調整

header_logoarea1
header_logoarea2

ロゴエリアの調整です。項目を入力して”ヘッダー『ロゴエリア』設定更新”をクリックすると設定が確定します。

① ロゴエリアの上端からの位置、② ロゴ画像の高さ、③ ロゴエリアコンテンツ(ロゴ画像とh1表記)の表示方法

④ h1表記の位置、⑤ h1表記のサイズ、⑥ h1表記の高さ、⑦ h1表記の上余白、⑧ h1表記の下余白、⑨ h1表記の左余白、⑩ h1文字色、⑪ h1文字の太さ

⑫ リンク(Anchor)が張られたh1文字色、⑬ リンク(Anchor)が張られたh1文字の下線表示

⑭ リンク(Anchor)が張られたh1文字HOVER色、⑮ リンク(Anchor)が張られたh1文字のHOVER下線表示

⑯ h1表記幅延長(通常はロゴエリア幅)※ この設定を有効にすると他のコンテンツ(画像やテキスト)に重なる様に表示されます

ロゴエリアの画像・リンク

header_logoarea3
header_logoarea4


header_logoarea5

ロゴエリアの画像・リンクに関する設定です。項目を入力して”ヘッダー『ロゴエリア』設定更新”をクリックすると設定が確定します。

① ロゴエリアの画像

② ロゴエリアのリンク

③ ロゴエリアに表示する代替テキスト ※ 画像がある場合は無効です

④ 代替テキストサイズ、⑤ 代替テキストの太さ

⑥ 代替テキストの色⑦ 代替テキストのHOVER色

※ 左図は代替テキストの例です。

連絡先エリア

連絡先エリアの調整

header_infoarea1
header_infoarea2

連絡先エリアの調整です。項目を入力して”ヘッダー『連絡先エリア』設定更新”をクリックすると設定が確定します。

① 連絡先エリアの上端からの位置、② 連絡先画像の高さ、③ 連絡先エリアコンテンツ(連絡先画像とSNSボタン)の表示方法

④ 連絡先エリア上部の簡易メニュー表記(※ 子孫展開無しの横型)、⑤ 簡易メニュー表記の左端からの位置、⑥ 簡易メニュー表記と連絡先画像間の余白

⑦ 連絡先の下部のSNS表記、⑧ SNS表記と連絡先画像間の余白

連絡先エリアの画像・リンク

header_infoarea3
header_infoarea4


header_infoarea5

連絡先エリアの画像・リンクに関する設定です。項目を入力して”ヘッダー『連絡先エリア』設定更新”をクリックすると設定が確定します。

① 連絡先エリアの画像

② 連絡先エリアのリンク

③ 連絡先エリアに表示する代替テキスト ※ 画像がある場合は無効です

④ 代替テキストサイズ、⑤ 代替テキストの太さ

⑥ 代替テキストの色⑦ 代替テキストのHOVER色

※ 左図は代替テキストの例です。

連絡先エリアの簡易メニュー

header_infoarea6
header_infoarea7

連絡先エリアの簡易メニューに関する設定です。項目を入力して”ヘッダー『連絡先エリア』設定更新”をクリックすると設定が確定します。

① テキストサイズ、② テキストの太さ、③ テキストの下線、④ テキストの色⑤ テキストのHOVER色

⑥ メニューのレイアウト、⑦ メニューの間隔/アイテムの個数

検索エリア

検索エリアの調整

header_searcharea1
header_searcharea2

検索エリアの調整です。項目を入力して”ヘッダー『検索エリア』設定更新”をクリックすると設定が確定します。

① 検索エリアの上端からの位置、② 検索ボックスの幅(※ 検索エリア幅に対する比率です:非表示は0を入力)

※ この枠内の設定はWordPressウィジェットの検索ボックスのデザインにも反映されます。

③ 検索ボックスの高さ、④ 検索ボックス文字の色⑤ 検索ボックスの色

⑥ 検索ボックス枠の色、⑦ 検索ボックス枠の角丸み(丸み無しは0を入力)

⑧ 検索送信部テキスト、⑨ 検索送信部テキストの色⑩ 検索送信部の背景色

⑪ 検索送信部の幅(※ 検索ボックス幅に対する比率です)

⑫ 検索送信部画像(虫眼鏡)の色 ※ 送信部テキストが“表示無し”の場合に有効です。

⑬ 検索エリア上部の簡易メニュー表記(※ 子孫展開無しの横型です)

⑭ 簡易メニュー表記の右端からの位置、⑮ 簡易メニュー表記と検索ボックス画像間の余白

⑯ 検索の下部のSNS表記、⑰ SNS表記と検索ボックス画像間の余白

検索エリアの簡易メニュー

header_searcharea4

検索エリアの簡易メニューに関する設定です。項目を入力して”ヘッダー『検索エリア』設定更新”をクリックすると設定が確定します。

① テキストサイズ、② テキストの太さ、③ テキストの下線、④ テキストの色⑤ テキストのHOVER色

⑥ メニューのレイアウト、⑦ メニューの間隔/アイテムの個数

グローバル(ヘッダー)メニュー

グローバルメニューバー

header_gm1
header_gm2

グローバルメニューバーに関する設定です。項目を入力して”ヘッダー『グローバルメニュー』設定更新”をクリックすると設定が確定します。

① 位置、② メニューアイテムの数

③ メニュー全体幅、④ メニュー全体高さ、⑤ メニュー上部の余白、⑥ メニュー下部の余白

⑦ メニュー枠装飾の選択、⑧ メニュー枠装飾の色、⑨ ニュー枠装飾サイズ

⑩ 下線バー、上線バー時のバーの長さ、⑪ 現在のページを設定色で示す

⑫ 現在のページを示すメニュー色⑬ 現在のページを示すメニュー背景色

グローバルメインメニューテキスト

header_gm3
header_gm4

グローバルメインメニューテキストに関する設定です。項目を入力して”ヘッダー『グローバルメニュー』設定更新”をクリックすると設定が確定します。

① メニューテキストサイズ、② メニューテキストの太さ

③ メニューテキストの色、④ メニューテキストのHOVER色、⑤ メニューテキストの背景色、⑥ メニューテキストのHOVER背景色

グローバルサブメニューテキスト

header_gm7
header_gm8

グローバルサブメニューテキストに関する設定です。項目を入力して”ヘッダー『グローバルメニュー』設定更新”をクリックすると設定が確定します。

① サブメニューテキストサイズ、② サブメニューテキストの太さ

③ サブメニューテキストの色、④ サブメニューテキストのHOVER色、⑤ サブメニューテキストの背景色、⑥ サブメニューテキストのHOVER背景色

⑦ サブメニューの幅(※ メインメニュー比です)、⑧ サブメニューの高さ(※ メインメニュー比です)

⑨ サブメニュー境界線の太さ、⑩ サブメニュー境界線の色、⑪ サブメニュー境界線の種類

ヘッダー画像

ヘッダー画像

header_img1
header_img2

ヘッダー画像に関する設定です。項目を入力して”ヘッダー『ヘッダー画像』設定更新”をクリックすると設定が確定します。

① ヘッダー画像の選択 ※ (ヘッダー)フリーエリアはプラグイン『ハイエンド』が必要です。

② WordPress標準ヘッダー画像の幅、③ WordPress標準ヘッダー画像の高さ

④ WordPress標準ヘッダー画像のリンク先、⑤ ヘッダー画像の挿入ページ

※ WordPress標準ヘッダー画像のアップロードは管理画面の『外観』→『ヘッダー』にて行います。

※ ヘッダー画像がメイン枠に挿入されている場合、設定されたヘッダー画像の幅と高さは無効となり、メイン枠の幅が100%幅として採用され、高さは同縦横比率で自動計算されます。

ヘッダー画像に被せるテキスト

header_img3
header_img4

ヘッダー画像に被せるテキストに関する設定です。項目を入力して”ヘッダー『ヘッダー画像』設定更新”をクリックすると設定が確定します。

① ヘッダー画像テキストの表示 ※ WordPress標準ヘッダー画像にのみ有効です。

② ヘッダー画像テキスト

③ ヘッダー画像テキストサイズ、④ ヘッダー画像テキストの太さ、⑤ ヘッダー画像テキストの色

⑥ ヘッダー画像テキストの位置調整(横方向)、⑦ ヘッダー画像テキストの位置調整(縦方向)

フリーエリア

ヘッダーフリーエリア(カスタム投稿タイプ:TAヘッダーFA)

header_freearea1

ヘッダーフリーエリアの設定です。項目を入力して”ヘッダー『フリーエリア』設定更新”をクリックすると設定が確定します。

① ヘッダーフリーエリア:ここにチェックを入れるとトップページフリーエリアが有効になります。

ヘッダーフリーエリアの詳細設定は以下のリンク先をご覧ください。

詳細設定 → フリーエリア設定

また、フリーエリアの使用方法は以下のリンク先をご覧ください。

フリーエリアの使用方法 → フリーエリア使用方法

  • LINEで送る


ta_thm001_downloadta_designing