新CMS完全対応マニュアル
アップデート情報はこちら
はじめに
利用規約
制作フロー
ライトプラン制作フロー
アップセル制作フロー
LP(ランディングページ)
fOでの基本設定
実装時の公開モード設定について
fOのページ構成概念
共通エリアと共通パーツ
ページの準備
画像アップロードとALTの設定
ロゴ・favicon・OGイメージの設定
フォームページの作成
ブログの設定
ベースデザイン設置(新CMSのみ)
ページ編集画面
クリップボードについて
モバイル用編集画面について
パーツ配置
配置できるパーツと編集画面で可能な装飾
リンク・イベントの設定
セクションの配置
行(row)の配置
カラム(col)の配置
見出しの配置
ボタンの配置
その他のパーツの配置
単体パーツについて
複合パーツについて
セクションパーツについて
パーツ集について
ブログ記事の流し込みについて
CSSでの装飾
コピー元のCSSと書く場所
命名規則とコーディングルール
自動出力されるIDやクラス
セクションの命名規則とコーディングルール
行(row)の命名規則とコーディングルール
カラム(col)の命名規則とコーディングルール
見出し(component)の命名規則とコーディングルール
ボタン(component)の命名規則とコーディングルール
その他のcomponentの命名規則とコーディングルール
編集画面の崩れについて
サイトチェック
サイトチェックのやり方
STEP1:基本設定
STEP2:その他の設定①
STEP2:その他の設定②
STEP3:カスタムCSS
STEP4:表示崩れ
STEP5:ページの非公開・削除
セクションの配置
TOP(完全版)
パーツ配置
セクションの配置
目次
セクションの配置について
1. 編集パネルについて
2. 操作方法
2.1 - 追加方法
2.2 - 削除方法
2.3 - 背景色について
3. 新規ページ作成の際の注意点
4. 関連するコンテンツ
セクションの配置について
セクションの編集パネルの操作や編集方法について説明します。
1. 編集パネルについて
従来の仕様と同じように、セクションにホバーした際に表示される
編集パネル
から操作を行えます。
セクションを
移動
させたり、
削除
、
複製
、
非表示
が可能です。
パレットマークからはクラス名の追加、背景色・背景画像の設定、余白・枠線の追加ができます。
セクションの編集パネル
移動
セクションをドラッグ&ドロップで移動します。
上に移動、下に移動
ページ内でセクションを上下に移動します。
削除
セクションを削除します。
複製
下方向に複製します。
カスタマイズ
クラス名の追加、背景色・背景画像の設定、余白・枠線を追加できます。
カスタマイズの詳細はこちら
表示
/
非表示
クリックするとセクションの表示/非表示を切り替えられます。
2. 操作方法
左の編集パネルから セクションの追加や削除をすることができます。ドラッグ&ドロップで任意の場所に移動や挿入したり、矢印で移動することも可能です。
2.1 -
追加方法
セクションパーツ > 空白のセクション
を選択し、セクションを追加することができます。
ドラッグ&ドロップで任意の場所に移動し、挿入します。
旧CMS
の場合、
セクションホバー > セクション追加ボタン から セクションを追加できます。
注意事項
新CMSの場合、デザインパーツから選択できるセクションは
ベースデザイン設定
の設定が
そのまま反映される
ように実装されています。
そのため、これまで行っていた
「セクションを追加」ボタンを使用しての追加は行わないでください
。(
「セクションを追加」ボタンで追加されるセクションはデザインパーツではありません
)
2.2 -
削除方法
セクションホバー > セクション削除ボタン から セクションを削除できます。
旧CMSの場合も同じく、
セクションホバー > セクション削除ボタン から セクションを削除できます。
2.3 -
背景色について
セクションパーツ > 背景カラー1・2のセクション
はベースデザイン設定・背景カラー①・②が適用されます。コピー元サイトはこれらのセクションを使用することで、ベースデザインの背景カラーを変更するとサイト内全てのセクションの背景カラーが変更できるよう構築しています。サイトのデザインに合わせて活用してください。
注意事項
新しく追加するセクションの
背景色がベースデザイン設定の「背景カラー①」または「背景カラー②」と同じ
場合
、
セクションパーツ > 空白のセクション > 背景色なしのセクション
をカスタマイズするのではなく、
「背景カラー①」または「背景カラー②」のセクションを使用してください。
3. 新規ページ作成の際の注意点
新しいページを複製する方法ではなく、ページ一覧の
新規ページ作成
から行った場合、デフォルトで配置されているセクションは使用しないでください。
デフォルトのものを削除し、セクションパーツに置き換えて使用するようにしてください。
4. 関連するコンテンツ
セクションの命名規則とコーディングルール
セクションの命名規則とCSSでの装飾を行う際に守るコーディングルールについて説明しています。
ボタン
パーツ配置一覧に戻る
fOでの基本設定
実装時の公開モード設定について
fOのページ構成概念
共通エリアと共通パーツ
ページの準備
画像アップロードとALTの設定
ロゴ・favicon・OGイメージの設定
フォームページの作成
ブログの設定
ベースデザイン設置(新CMSのみ)
ページ編集画面
クリップボードについて
モバイル用編集画面について
パーツ配置
コピー元のCSSと書く場所
リンク・イベントの設定
セクションの配置
行(row)の配置
カラム(col)の配置
見出し(component)の配置
ボタン(component)の配置
その他のパーツ(component)の配置
単体パーツについて
複合パーツについて
セクションパーツについて
パーツ集について
ブログ記事の流し込みについて
CSSでの装飾
コピー元のCSSと書く場所
命名規則とコーディングルール
自動出力されるIDやクラス
セクションの命名規則とコーディングルール
行(row)の命名規則とコーディングルール
カラム(col)の命名規則とコーディングルール
見出し(component)の命名規則とコーディングルール
ボタン(component)の命名規則とコーディングルール
その他のcomponentの命名規則とコーディングルール
編集画面の崩れについて
サイトチェック
サイトチェックのやり方
STEP1:基本設定
STEP2:その他の設定①
STEP2:その他の設定②
STEP3:カスタムCSS
STEP4:表示崩れ
STEP5:ページの非公開・削除
© Basic Inc. All Rights Reserved.