| 編集前にご確認ください |
≫コンテンツ編集に関する 「よくある質問」 ≫著作権違反にご注意ください |
ページのレイアウト設定・デザイン設定
レイアウト変更
- レイアウト変更画面では、26種類のレイアウトからお好みのものにいつでも変更することができます。
- レイアウトには、1～3カラムとメニュー表示の有無、表示位置の違いがあります。
| 【ご注意】 レイアウト変更で「カラム数が多いレイアウト」から「カラム数が少ないレイアウト」を選択する際はご注意ください。 2・3カラムレイアウトから1カラムに変更した場合、現在選択しているレイアウトのサイドエリアに配置されているコンテンツは、コンテンツエリアの最下部に移動されます。 また3カラムから2カラムに変更した場合、削除されるサイドエリアに配置されているコンテンツは、残るサイドエリアの最下部に移動されます。 |
スマートフォン版 画像拡大表示設定
動画でのご紹介
※音声は入っておりません。
グローバルナビゲーション編集
カラー
グローバルナビ左上メニューの「デザイン設定」メニューをクリックすると、 グローバルナビのデザイン設定画面が表示さます。「カラー」からお好みのカラーを選択してください。
デザイン
横並びメニュー表示数
（4つ～7つの中から選択）
メガメニュー
メガメニューを使用すると、グルーバルナビゲーション内の直上のページ名にカーソルを合わせた際、そのページ名に紐づいたすべての下ページ（サブページ）を、大きなスペースに画像付きで一括で表示します。閲覧者のユーザビリティを向上させ、Webサイトを演出することができます。
「使用する」を選択することでメガメニューが表示されます。メガメニューの背景色は「白」と「黒」から選択いただけます。
メガメニュー背景色白の設定例
メガメニュー背景色黒の設定例
メガメニュー の確認方法
編集画面＞編集画面の各メニュー プレビューボタンをクリックすると、パソコンとタブレットで確認出来ます。
※レイアウトが2カラムか3カラムのサイドに表示されるメニュー、またはスマートフォン端末ではメガメニューは表示されません。
- メガメニュー の下ページ（下層ページ）設定方法
ページ設定の変更＞ページ並び替え＞下層ページ設定について で、ページ階層を切り替えることにより
メガメニュー内の下ページ（サブページ）を設定できます。
メガメニュー用画像（下層ページ）設定方法
編集画面上メニュー内「ページ一覧」ボタンをクリックし、ページ一覧を表示します。対象ページの「設定」ボタンをクリックします。
ページ設定画面より、メガメニュー用画像（下ページ（サブページ）用画像）を設定できます。
ページ階層がトップページと並列となっておらず、トップページの下ページ（サブページ）として設定されているとき、 もしくは下層ページの下ページ（サブページ）として設定されているときのみ設定項目が表示されます。
メガメニュー設定をした場合、グルーバルナビゲーション内の下ページ（サブページ）が設定された直上のページ名にカーソルを合わせると、 その下部に表示される大きく覆われたスペースに設定した下ページ（サブページ）用画像が表示されます。
ブラウザスクロール時のメニュー固定
「ブラウザスクロール時のメニュー固定」でWebページをスクロールしてもグローバルナビゲーションを固定し、常に表示するように設定できます。
ブラウザスクロール時のメニュー固定（パソコン）
「ブラウザスクロール時のメニュー固定（パソコン）」を「固定する」に設定すると、 パソコンの画面表示時、Webページをスクロールしてもグローバルナビゲーションを固定させ、常に表示します。
ブラウザスクロール時のメニュー固定(スマートフォン)
「ブラウザスクロール時のメニュー固定(スマートフォン) 」を「固定する」に設定すると、 スマートフォンの画面表示時、Webページをスクロールしてもグローバルナビゲーションを固定させ、常に表示します。
デザイン設定の基本操作
編集画面の左側の「>>」メニューをクリックと、デザイン設定画面が表示されます。
※デザイン設定画面を開いている時は、デザイン設定以外の操作を行うことはできません。
編集デザイン適用方法
- 編集したデザインを適用する場合は、デザイン設定画面下の「デザインを適用」を選択してください。
- また、適用するデザインをどのページに設定するか、選択することができます。
既定デザインとして保存
デザイン決定後、「既定デザイン」としてデザインを保存することが可能です。編集後、既定デザインに戻したい場合は、「リセット」を選択すると既定デザインに登録されている内容に戻すことができます。
※既定デザインには１セットしかデザインを登録することができませんのでご注意ください。
動画でのご紹介
※音声は入っておりません。
背景設定
背景設定では、サイト全体、メインビジュアルエリア、インナー背景、ヘッダーエリア、フッターエリアの背景設定ができます。
背景設定 - 全体背景
背景設定メニューで「全体背景」をクリックすると全体背景の設定画面が表示されます。
全体背景の設定画面で「背景設定」をクリックすると背景設定メニューに戻ります。
サイトの背景に下記4種類の背景を設定することができます。
■色 ■模様 ■画像 ■動画
4種類の設定を同時に設定することもできますが、反映される優先順位は、
動画 ＞ 画像 ＞ 模様 ＞ 色
になります。
全体背景 - 色
■ カラーチャート
カラーチャート内のグレーの丸を動かしてお好きな色を選択できます。グレーの円の中に表示されている色が選択カラーになります。
■ カラーコード入力
6ケタの16進数カラーコードを入力して、色を設定できます。
※先頭に必ず#を入力してください。
■ マイパレット
作成した色を９色まで保存することができます。マイパレットボタンをクリックすると、マイパレットリストエリアに選択した色が表示されます。
全体背景 - 模様
約100種類の模様から選択できます。一部の模様は「色」と連携しています。色を選択すると、模様の選択リストに色が反映されます。
全体背景 - 画像
背景に設定する画像を選択します。選択した画像には色や模様などの効果を設定することもできます。
■ 画像の選択
画像はライブラリから選択 または お好きな画像をアップロードすることができます。 選択された画像は、選択エリアの下に表示されます。
■ 画像の配置設定
フルスクリーン：背景画像をブラウザのサイズに合わせて画面いっぱいに表示します。（画像の縦横比は維持）
タイル：元のサイズの背景画像を、繰り返し表示することにより、ブラウザのサイズに合わせて画面いっぱいになるように表示します。
等倍：設定した画像を拡大または縮小せずに、元のサイズのまま表示します。
スクロール固定：ONにするとスクロールをしても背景画像は固定されるようになります。
■ 設定画像削除
画像の設定を削除する際は、画像エリア右上の「×」ボタンをクリックしてください。
■ スマートフォンサイト用背景画像
「表示する」を選択すると背景画像をスマートフォン・タブレットの画面サイズに合わせて表示します。
背景に表示する画像の範囲は左・中央・右のボタンで選択できます。
全体背景 - 動画
「背景動画機能」について、専用の解説サイトでも詳しくご紹介しています。
背景に設定する動画を選択します。選択した動画には色や模様などの効果を設定することもできます。
■ 動画の選択
動画はライブラリから選択 または お好きな動画をアップロードすることができます。
URLを指定してYoutube上の動画を設定することも可能です。
選択された動画は、選択エリアの下に表示されます。
■ 動画の配置設定
横幅に合わせる：背景動画をブラウザの横幅に合わせて表示します。（動画の縦横比は維持）
高さに合わせる：背景動画をブラウザの高さに合わせて画面いっぱいになるように表示します。
※ブラウザの幅からはみ出す部分は表示されません。
等倍：設定した動画を拡大または縮小せずに、元のサイズのまま表示します。
スクロール固定：ONにするとスクロールをしても背景動画は固定されるようになります。
■ 設定動画削除
動画の設定を削除する際は、動画エリア右上の「×」ボタンをクリックしてください。
※背景動画にYouTube動画を設定して、配置を「高さに合わせる」、かつ、スクロール固定を「ON」に設定すると、YouTubeの仕様により動画の左右に黒い帯が表示されます。黒い帯を表示したくない場合は、配置を「横幅に合わせる」に設定するか、YouTubeではなくライブラリの動画を設定してください。
※スライドショーに高さの異なる複数の画像を設定しているページに、背景動画を設定すると動画が数秒おきに点滅する場合があります。点滅を解消したい場合は、スライドショーに設定している画像の高さを揃えてください。
■ スマートフォンサイト背景動画
「表示する」を選択するとスマートフォン・タブレットで背景動画を再生します。
背景に表示する動画の範囲は左・中央・右のボタンで選択できます。
※下記バージョンのブラウザでは「表示する」に設定してもスマートフォンサイト背景動画が再生されません。
・Safari for iOS 9以前
・Chrome for Android 52以前
スマートフォンサイト用背景画像もあわせて設定いただくことをおすすめします。
※YouTube動画をスマートフォンサイト用背景動画に設定し、配置を左または右に設定すると、YouTubeの仕様により動画の側面（配置を左に設定した場合は左側、配置を右に設定した場合は右側）に黒い帯が表示されます。
黒い帯を表示したくない場合は、配置を中央に設定するか、YouTubeではなくライブラリの動画を設定してください。
背景設定 - メインビジュアル背景
メインビジュアルエリアに背景を設定することができます。
背景設定メニュー「メインビジュアル背景」をクリックするとメインビジュアル背景の設定画面が表示されます。
メインビジュアル背景の設定画面で「背景設定」をクリックすると背景設定メニューに戻ります。
※「メインビジュアル背景」ボタンはトップページでデザイン設定を開いたときのみ表示されます。
メインビジュアル背景には下記4種類の背景を設定することができます。
■色 ■模様 ■画像 ■動画
4種類の設定を同時に設定することもできますが、反映される優先順位は、
動画 ＞ 画像 ＞ 模様 ＞ 色
になります。
※メインビジュアルエリアの背景となりますので、メインビジュアルエリア内にスライドショーや画像コンテンツ等を設置している場合は設置中のコンテンツがメインビジュアル背景に設定した画像や動画の上に重なって表示されます。
メインビジュアル背景の上に他のコンテンツを重ねたくない場合は、メインビジュアルエリア内のコンテンツを削除していただくか、コンテンツエリアまたはサイドエリアに移動させてください。
メインビジュアル背景 - 色
■ カラーチャート
カラーチャート内のグレーの丸を動かしてお好きな色を選択できます。グレーの円の中に表示されている色が選択カラーになります。
■ カラーコード入力
6ケタの16進数カラーコードを入力して、色を設定できます。
※先頭に必ず#を入力してください。
■ マイパレット
作成した色を９色まで保存することができます。マイパレットボタンをクリックすると、マイパレットリストエリアに選択した色が表示されます。
メインビジュアル背景 - 模様
約100種類の模様から選択できます。一部の模様は「色」と連携しています。色を選択すると、模様の選択リストに色が反映されます。
メインビジュアル背景 - 画像
メインビジュアル背景に設定する画像を選択します。選択した画像には色や模様などの効果を設定することもできます。
画像はメインビジュアルエリアの横幅に合わせ、元の縦横比を保持した状態で配置されます。
■ 画像の選択
画像はライブラリから選択 または お好きな画像をアップロードすることができます。 選択された画像は、選択エリアの下に表示されます。
■ 設定画像削除
画像の設定を削除する際は、画像エリア右上の「×」ボタンをクリックしてください。
メインビジュアル背景 - 動画
「背景動画機能」について、専用の解説サイトでも詳しくご紹介しています。
メインビジュアル背景に設定する動画を選択します。選択した動画には色や模様などの効果を設定することもできます。
■ 動画の選択
動画はライブラリから選択 または お好きな動画をアップロードすることができます。
URLを指定してYoutube上の動画を設定することも可能です。
選択された動画は、選択エリアの下に表示されます。
■ 設定動画削除
動画の設定を削除する際は、動画エリア右上の「×」ボタンをクリックしてください。
■ スマートフォンサイト背景動画
「表示する」を選択するとスマートフォン・タブレットでメインビジュアル背景動画を再生します。
※下記バージョンのブラウザでは「表示する」に設定してもスマートフォンサイト背景動画が再生されません。
・Safari for iOS 9以前
・Chrome for Android 52以前
メインビジュアル背景 - 画像もあわせて設定いただくことをおすすめします。
動画でのご紹介
※音声は入っておりません。
背景設定 - ヘッダー背景
背景設定画面の「ヘッダー背景」より、「背景色」、「ボーダー上」、「ボーダー下」の設定ができます。
■ 背景色
背景色は「色」と「透明度」の設定をすることができます。
■ ボーダー上
「表示する」を選択すると、ヘッダーエリアの上にボーダーが表示されます。
ボーダーのスタイルは、「実線」「点線」「二重線」から選択できます。
「太さ」は1px～10pxまで選択できます。
■ ボーダー下
「表示する」を選択すると、ヘッダーエリアの下にボーダーが表示されます。
ボーダーのスタイルは、「実線」「点線」「二重線」から選択できます。
「太さ」は1px～10pxまで選択できます。
背景設定 - フッター背景
背景設定画面の「フッター背景」より、「背景色」、「ボーダー上」、「ボーダー下」の設定ができます。
■ 背景色
背景色は「色」と「透明度」の設定をすることができます。
■ ボーダー上
「表示する」を選択すると、フッターエリアの上にボーダーが表示されます。
ボーダーのスタイルは、「実線」「点線」「二重線」から選択できます。
「太さ」は1px～10pxまで選択できます。
■ ボーダー下
「表示する」を選択すると、フッターエリアの下にボーダーが表示されます。
ボーダーのスタイルは、「実線」「点線」「二重線」から選択できます。
「太さ」は1px～10pxまで選択できます。
その他背景設定
インナー背景
その他背景設定ではインナーエリアの背景設定ができます。
「あり」を選択すると、「色」と「透明度」の設定をすることができます。
サイト幅設定（パソコン）
サイト幅は、横幅960px と 横幅1170pxと ブラウザ幅最大 の3種類から選択できます。
カラー設定
カラー設定では、テキストや表組みなどのカラー設定が行えます。
各カラーの設定は、直接テキストボックスにカラーコードを入力、またはカラーコード左横の色をクリックして、カラーチャート画面からカラーを選択することができます。
※ 先頭に必ず#を入力してください。
※ ウィジウィグエディタから個別に設定しているカラーには、反映されません。
※ お問合せフォームの表組みは、お問合せページ内のデザイン設定から行えます。
