見出し(component)の配置

見出し(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. 関連するコンテンツ

pagetop