新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:ページの非公開・削除
見出し(component)の配置
TOP(完全版)
パーツ配置
見出しの配置
目次
見出し(component)の配置について
1. 編集パネルについて
2. パーツの基本的な考え方
2.1 - クラスについて
2.2 - 自動で付与されるIDについて
2.3 - 適用されるベースデザイン設定について
2.4 - 見出しとテキストパーツのrowの分け方
2.5 - 一部だけ見出しの色やサイズ等を変更する場合
3. 操作方法
3.1 - パーツの追加方法
3.2 - component(見出し)をリンク先に指定する方法
4. 関連するコンテンツ
見出し(component)の配置について
パーツの編集パネルの操作や編集方法について説明します。
1. 編集パネルについて
従来の仕様と同じように、見出しにホバーした際に表示される編集パネルから操作を行います。
編集パネルの項目の説明は下記のリンクを参照してください。
項目の説明
2. パーツの基本的な考え方
見出しに付与されるIDやベースデザイン設定の適用範囲、行(row)の分け方など、基本的な概念ついて説明します。
2.1 -
クラスについて
デザインパーツの見出しを使用する場合、クラス設定は必要ありません。
旧CMSの場合、
見出しに必ず指定のクラスを設定します。
MVの見出し
→ hd_custom
コンテンツ内の見出し
→ hd_custom01、hd_custom02、hd_custom03 等
2.2 -
自動で付与されるIDについて
ページ内リンク等でIDを使用する場合、fOが自動で付与するIDは使用せずに、任意のIDを下記の赤枠の場所に設定します。
2.3 -
適用されるベースデザイン設定について
装飾がある見出しパーツは装飾に対してベースデザインのメインカラーが適用されます。
2.4 -
見出しとテキストパーツの行(row)の分け方
基本的には見出しとテキストパーツは行(row)を分けて配置します。(デザインにより例外もあります)
2.5 -
一部だけ見出しの色やサイズ等を変更する場合
サイト内で一部しかないユニークデザインの場合、編集パネルから見出しの色やサイズ等を設定することも可能です。
CSSと編集画面どちらで設定すべきか悩んだ場合は、作業工数や更新性で判断してください。
3. 操作方法
左の編集パネルから見出しの追加や削除をすることができます。
ドラッグ&ドロップで任意の場所に移動や挿入することも可能です。
3.1 -
パーツの追加方法
単体パーツ > 見出し
を選択し、見出しパーツを追加することができます。
ドラッグ&ドロップで任意の場所に移動し、挿入します。配置したら、見出しの順番とテキストを設定します。
3.2 -
見出しをリンク先に指定する方法
サイト内やページ内のリンクの遷移先を見出しに設定することが可能です。その場合、見出しにIDを付与し指定してください。
(基本パーツの中では見出しのみIDを付与することができます。その他のパーツにIDを付与することはできません)
リンクにIDを含むURLを設定する方法は下記を参照してください。
サイト内見出し(ID付き)にリンクを設定する方法
サイト内のページ・ファイル
から、ページ内の任意の見出しを選択しリンク先に設定します。
別ページの見出し(ID付き)にリンクを設定する方法
下記のように
/○○○○○(相対パス)/#(ID)
と
リンクに設定しているURL
にすることで、サイト内別ページのID付き見出しにリンクを設定することができます。
4. 関連するコンテンツ
見出し(component)の命名規則とコーディングルール
見出し(component)の命名規則とコーディングルールについて説明しています。
ボタン
パーツ配置一覧に戻る
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.