レイアウト（デザイン設定）
レイアウト（デザイン設定）について
レイアウトでヘッダーやフッターのデザインや表示する情報を編集することができます。
前提
- サイドメニューから「デザイン設定」を開き、「レイアウト」をクリックします
- デザイン設定についてはこちら
1. サイト基本情報
「ヘッダー」、「サイト基本情報」をクリックしてサイトの基本的な情報を編集することができます。
編集できる項目は下記です。
|
項目
|
説明
|
|
ロゴ
|
ヘッダーに表示するロゴを設定できます。
retinaディスプレイ用ロゴ、モバイルデバイス用ロゴが設定されていない場合はこの画像が使用されます。 ※ロゴのサイズについてはロゴ画像の推奨サイズを知りたいをご覧ください。 |
|
retinaディスプレイ用ロゴを設定
|
サイト訪問者の端末がretinaディスプレイの場合のロゴを設定できます。
※ロゴのサイズについてはロゴ画像の推奨サイズを知りたいをご覧ください。 |
|
モバイルデバイス用ロゴを設定
|
サイト訪問者の端末がモバイルだった場合のロゴを設定できます。
※ロゴのサイズについてはロゴ画像の推奨サイズを知りたいをご覧ください。 |
|
サイトタイトルを表示
|
|
|
キャッチフレーズを表示
|
|
|
問い合わせ用電話番号を表示（PC/モバイル）
|
ヘッダーに問い合わせ用電話番号を表示するか設定します。
|
|
電話番号下テキスト
|
問い合わせ用電話番号の下に表示する文字を設定します。
|
|
サイトアイコン
（ファビコン） |
サイトのアイコンを設定します。
タブに使用されます。 管理画面側のアイコンは変えることができません。 |
サイトタイトルを表示した場合、以下のようになります。
2. メインヘッダー
「ヘッダー」、「メインヘッダー」をクリックして、ヘッダーのレイアウトやデザインを編集できます。
編集できる項目は下記です。
|
項目
|
説明
|
|
ヘッダー幅
|
ヘッダーの幅を下記から選べます。
・全幅 ・コンテンツ幅 |
|
メインメニューのレイアウト
|
メニューの表示位置を変更できます。
|
|
ロゴ横に表示するコンテンツ
|
会社ロゴ横に表示するコンテンツを編集できます。
|
|
サブメニュー
コンテナの線 |
|
|
サブメニューの線の色
|
サブメニューコンテナの線の色を編集できます。
|
|
サブメニュー項目の線
|
サブメニューを区切る線をつけることができます。
|
|
サブメニュー項目の線の色
|
サブメニュー項目の線にチェックが入っている時、サブメニュー項目の線の色を編集できます。
|
|
サブメニューコンテナの動き
|
サブメニューコンテナは、
メインメニューのメニュー項目が階層構造を持っている時、カーソルを重ねると表示されます。 メニューについてはこちら サブメニューコンテナが表示される時の動きを下記から選択できます。 ・デフォルト ・Slide Down ・Slide Up ・Fade |
|
全てのページでメインヘッダーを表示しない
|
各投稿画面の表示設定にある「メインヘッダーを表示しない」設定に関わらず表示されなくなります。
|
メインメニューのレイアウトでは以下のようにメニューの表示を変更できます。
※以下は「ロゴの右横に表示」を選んだ場合
サブメニューコンテナの幅では以下メニュー部分の幅を変更できます。
3. フッターウィジェット
「フッター」、「フッターウィジェット」をクリックして、フッターウィジェットエリアのデザインを編集できます。
編集できる項目は下記です。
|
項目
|
説明
|
|
フッターの有効/無効
|
|
|
フッターウィジェット上の線
|
フッターの上に表示する線の幅を編集できます。
|
|
フッターウィジェット上の線の色
|
フッターの上に表示する線の色を編集できます。
|
フッターウィジェットを無効にした場合、以下のようになります。
4. フッターバー
「フッター」、「フッターバー」をクリックして、フッターバーのデザインを編集できます。
編集できる項目は下記です。
|
項目
|
説明
|
|
フッターバーレイアウト
|
フッターバーのレイアウトを下記から選択できます。
・無効（左） ・セクションを縦並び（中央） ・セクションを横並び（右） |
|
セクション1
|
フッターバーの中で1つ目のエリアを編集できます。
下記から選択できます。 ・なし ・カスタムテキスト カスタムテキストを選択すると、「セクション1 カスタムテキスト」で入力した文字を表示できます。 |
|
セクション1
カスタムテキスト |
セクション1に表示する文字です。
下記スニペットが使用できます。 ・[crrent_year]: 現在の西暦を表示します。 ・[site_title]: サイトのタイトルを表示します。 ・[theme_author]: いい生活のサービスサイトへのリンクを表示します。 |
|
セクション2
|
フッターバーの中で2つ目のエリアを編集できます。
セクション1と同様です。 |
|
セクション2
カスタムテキスト |
セクション2に表示する文字です。
セクション1 カスタムテキストと同様です。 |
|
フッターバーの線の太さ
|
フッターバーの幅を下記から選択できます。
・コンテンツ幅 ・全幅 |
|
フッターバーの線（上）
|
フッターバーの上に線つけます。
線の太さを編集できます。 |
|
フッターバーの線の色（上）
|
フッターバーの線（上）の色を編集できます。
|
「セクション1 カスタムテキスト」を変更した場合、以下のようになります。
5. 設定の保存
設定の保存についてはこちら
Related Articles
デザイン設定
デザイン設定について デザイン設定を使って、サイト全体の見た目や表示項目をカスタマイズすることができます。 設定パネルの右側には、常に更新内容を反映したプレビューが表示されます。 カスタマイズ内容は大きく下記に分類されます。 それぞれの詳しい使い方についてはリンク先をご覧ください。 レイアウト 色と背景 メニュー ウィジェット 1. 変更内容の保存 デザインを変更したあとは保存する必要があります。 「歯車」ボタンをクリックして、デザインの変更を下書きとして保存することができます。 ...固定フッター（デザイン設定）
Advancedプラン、またはPremiumプランをご利用いただいている場合、固定フッターをカスタマイズできます。 ※固定フッターの表示有無のみ全プランで設定可能です。 設定内容例） ボタン名 リンク先 並び順 ▲カスタマイズ例(左：デフォルト表示 右：カスタマイズ後) ※オンライン相談はオプション機能です 設定は、デザイン設定＞レイアウト＞フッター＞固定フッターで行います。 固定フッターの表示有無：全プランで設定可能 固定フッターのカスタマイズ：Advancedプラン or ...フォント（デザイン設定）
フォント（デザイン設定）について サイトに表示されるフォントを変更することができます。 前提 サイドメニューから「デザイン設定」を開き、「フォント」をクリックします デザイン設定についてはこちら フォント変更 「全体」と「見出し(h1-h6)」のフォントをそれぞれ変更できます。メニュー（デザイン設定）
メニュー（デザイン設定）について ページメニュー(以下画面の赤枠)に表示する項目を変更できます。 メニュー項目はいくつでも設定することができますが、エリアに入りきらない場合は「もっと見る」という項目が作られ、カーソルを合わせると表示されます。 前提 サイドメニューから「デザイン設定」を開き、「メニュー」をクリックします。 デザイン設定についてはこちら 1. メニューの編集 1.1. メニュー項目の並べ替えと階層化 編集したいメニューをクリックします。 ...色と背景（デザイン設定）
色と背景（デザイン設定）について サイト全体の色や背景をカスタマイズすることができます。 前提 サイドメニューから「デザイン設定」を開き、「メニュー」をクリックします デザイン設定についてはこちら 1. 基本色 「基本色」をクリックして、サイト全体の色を設定できます。 設定できる色は下記です。 項目 説明 メインカラー サイト全体のイメージとなる色です。 主要な画面の要素(メインメニューなど)がこの色になります。 サブカラー（普通） ボタンやアイコン等で使用する、メインカラーを補う色です。 ...