トップページのレイアウトをカスタマイズする方法

レイアウト設定(各設定メニューの使い方)

このページでは、「レイアウト設定」の使い方について、詳しく解説しています。

基本設定

レイアウト設定を個別に設定

「ON」を選択すると、トップページのレイアウト設定が可能になります。

※「OFF」を選択すると、「共通コンテンツエリア設定」→「レイアウト設定」の設定内容が、トップページにも適用されます。

 

枠デザインを選択

レイアウト表示エリアの外枠のデザインを設定する機能です。

以下の項目の中からデザインを選択できます。

  • 無し
  • 角丸
  • 角丸(強)
  1. 下記サンプル画像➀では:無し
  2. サンプル画像②では:角丸(強)

を選択した事例をご紹介しています。

サンプル画像➀

サンプル画像②

表示幅を選択

レイアウト表示エリア全体の表示幅(横幅を設定する機能です。

下記画像(➊赤枠内)で示された領域は、「レイアウト表示エリア全体」を示しています。

コンテンツ領域を選択

コンテンツの表示領域を設定する機能です。

コンテンツ領域とは、ページの中でメインとなるコンテンツが表示されている領域を指します。

下記画像(➊赤枠内)で示された領域がコンテンツ領域です。

内側余白をpxで指定

レイアウト表示エリアの内側余白の幅を設定する機能です。

外側余白をpxで指定

レイアウト表示エリアの外側余白の幅を設定する機能です。

境界線設定

境界線を選択

レイアウト表示エリアの境界線(外枠)のデザインを設定する機能です。

無し・ボーダー・シャドウの中からデザインを選択できます。

  • 下記サンプル画像①は:「ボーダー」
  • サンプル画像②は:「シャドウ」

を指定した事例をご紹介しています。

サンプル画像①「ボーダー」

サンプル画像②「シャドウ」

背景設定

背景を選択

レイアウト表示エリアに背景を設定する機能です。

以下の項目の中から背景を選択できます。

  • 無し
  • 単色
  • 5ポイントグラデ
  • 画像
  • 画像+単色オーバーレイ
  • 画像+5ポイントグラデ
下記サンプル画像①では、「画像+単色オーバーレイ」を選択し、背景画像に青いドット柄の画像を設定した事例をご紹介しています。
サンプル画像①

コンテンツ設定

カラム数を選択

レイアウト表示エリアのカラム数を設定する機能です。

以下の項目の中から選択できます。

  • A.1カラム
  • B.2カラム(メイン左)
  • C.2カラム(メイン右)
  • D.3カラム(メイン左)
  • E.3カラム(メイン右)
  • F.3カラム(メイン中央)
  • 下記サンプル画像①は:B.2カラム(メイン左)」
  • サンプル画像②は:F.3カラム(メイン中央)

を指定した事例をご紹介しています。

サンプル画像①

サンプル画像②

サイドバー表示サイズをpxで指定

サイドバーの表示サイズを設定する機能です。

※2カラム以上を選択すると設定出来ます。

カラム間隔をpxで指定

カラム同士の間隔を設定する機能です。

※2カラム以上を選択すると設定出来ます。

カラム外側余白をpxで指定

カラム外側の余白の幅を設定する機能です。