TOP｜レシピ集06
設定
ベースデザインを設定する
- メインカラーを緑色（#2AAB9F）に設定する
- ボタン1「資料ダウンロード一覧」を青色（#ffffff）、テキストカラーは（#2AAB9F）に設定する
- ボタン2「お問い合わせ」を緑色（#2AAB9F）に設定する
- ボタン3は青色（#1B2438）に設定する
- 見出しのテキストは青色（#1B2438）に設定する
- 本文のテキストは青色（#1B2438）に設定する
複合パーツ
メインビジュアル用｜キャッチコピー
キャッチコピーとサブコピーを設置できます。
【利用例】
トップページ、下層ページのメインビジュアル など
【ベースデザイン設定】
なし
単体パーツ
ボタン｜テキストのみ
ベースデザイン設定のボタンを設置できます。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
単体パーツ
ボタン｜テキストのみ
ベースデザイン設定のボタンを設置できます。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
単体パーツ
画像｜画像のみ
画像を設置できます。
【利用例】
製品画像・サービス説明画像・キャンペーン紹介画像 など
【ベースデザイン設定】
なし
セクションパーツ
事例｜ロゴスクロール（上下余白あり）
余白ありのセクション内にロゴスクロールを設置できます。
【利用例】
事例 など
【ベースデザイン設定】
再生停止ボタンはベースデザイン設定のサブカラーに依存
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
単体パーツ
画像｜画像のみ
画像を設置できます。
【利用例】
製品画像・サービス説明画像・キャンペーン紹介画像 など
【ベースデザイン設定】
なし
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
このパーツの詳細な設定方法
注釈テキストは12pxに縮小してください。
セクションパーツ
商品・サービス｜画像、テキスト
サービス詳細ページへのリンクとなるセクションを設置できます。
【利用例】
サービス一覧、製品一覧・キャンペーン紹介 など
【ベースデザイン設定】
英字はベースデザイン設定のメインカラーに依存
カラム間の余白はベースデザイン設定の余白設定に依存
セクションパーツ
事例｜ロゴスクロール（上下余白あり）
余白ありのセクション内にロゴスクロールを設置できます。
【利用例】
事例 など
【ベースデザイン設定】
再生停止ボタンはベースデザイン設定のサブカラーに依存
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
このパーツの詳細な設定方法
緑の文字は#2aab9fで設定してください
単体パーツ
ボタン｜矢印
ベースデザイン設定のボタンに矢印アイコンが入ります。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
セクションパーツ
商品・サービス｜画像、テキスト
サービス詳細ページへのリンクとなるセクションを設置できます。
【利用例】
サービス一覧、製品一覧・キャンペーン紹介 など
【ベースデザイン設定】
英字はベースデザイン設定のメインカラーに依存
カラム間の余白はベースデザイン設定の余白設定に依存
このパーツの詳細な設定方法
「画像をカスタマイズ」から角丸を自由に変更できます
セクションパーツ
商品・サービス｜画像、テキスト
サービス詳細ページへのリンクとなるセクションを設置できます。
【利用例】
サービス一覧、製品一覧・キャンペーン紹介 など
【ベースデザイン設定】
英字はベースデザイン設定のメインカラーに依存
カラム間の余白はベースデザイン設定の余白設定に依存
このパーツの詳細な設定方法
「画像をカスタマイズ」から角丸を自由に変更できます
セクションパーツ
商品・サービス｜画像、テキスト
サービス詳細ページへのリンクとなるセクションを設置できます。
【利用例】
サービス一覧、製品一覧・キャンペーン紹介 など
【ベースデザイン設定】
英字はベースデザイン設定のメインカラーに依存
カラム間の余白はベースデザイン設定の余白設定に依存
このパーツの詳細な設定方法
「画像をカスタマイズ」から角丸を自由に変更できます
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
画像｜画像のみ
画像を設置できます。
【利用例】
製品画像・サービス説明画像・キャンペーン紹介画像 など
【ベースデザイン設定】
なし
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
セクションパーツ
スライドギャラリー｜ズームスライドショーVer2
ズームインしながら複数の画像が切り替わるスライドショーです。
訴求したい画像をセクション全体を使って大々的にアピールすることができます
スライドショーの画像に制限はありません。画像の横幅は固定になります。
【利用例】
メインビジュアル など
【ベースデザイン設定】
セクションに含まれるボタン1の資料ダウンロードは他のボタンに入れ替えが可能
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
画像｜スライドギャラリー
スライドギャラリーを設置できます。
【利用例】
製品・サービス・キャンペーン紹介 など
【ベースデザイン設定】
なし
単体パーツ
ボタン｜矢印
ベースデザイン設定のボタンに矢印アイコンが入ります。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
リスト｜ニュースリスト（縦バージョン）
日付、テキスト、タグが縦積みで表示されます。
【利用例】
ニュースリリース、お知らせ、更新点ページの一覧表示 等
【ベースデザイン設定】
なし
単体パーツ
ボタン｜矢印
ベースデザイン設定のボタンに矢印アイコンが入ります。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
複合パーツ
3列の画像｜画像、ボタン
3列の画像・見出し・テキスト・資料ダウンロードボタンを設置できます。
【利用例】
資料ダウンロード など
【ベースデザイン設定】
カラム間の余白はベースデザイン設定の余白設定に依存
単体パーツ
ボタン｜矢印
ベースデザイン設定のボタンに矢印アイコンが入ります。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
単体パーツ
画像｜画像のみ
画像を設置できます。
【利用例】
製品画像・サービス説明画像・キャンペーン紹介画像 など
【ベースデザイン設定】
なし
単体パーツ
埋め込み｜共通パーツ
複数ページで使用した際リンク先を一括で変更できないので共通パーツがおすすめです
管理画面の「共通パーツ一覧」で作成し設置できます。
単体パーツ
埋め込み｜共通パーツ
複数ページで使用した際リンク先を一括で変更できないので共通パーツがおすすめです
管理画面の「共通パーツ一覧」で作成し設置できます。
注意点
共通エリア「フッター」で作成されているエリアです。 作成する場合はこちらをご参照ください。
※一部CSSで表現している箇所がございます。