見出し（component）の命名規則とコーディングルール

目次

見出し（component）のカスタマイズに関する規則

見出し（component）のカスタマイズをする際に遵守すべき命名規則とコーディングルールについてまとめています。

見出し（component）の配置

見出し（component）のパーツ配置についてはこちらのページをご確認ください
見出し（component）の配置

1. 見出し（component）の命名規則

見出しに独自クラスを付与する場合、「hd_custom●●」と命名してください。●●部分は数字で、01から始まる連番となります。
旧CMSにおいては、見出しには上記クラスの付与が必須です。
MV（メインビジュアル）内で使用するh1のみ、他と区別するために「hd_custom」とし、数字はつけません。
なお、「hd_custom●●」や「hd_custom」へのオプションクラスとして使うクラスには特に決まりはありません。
  命名規則
見出し（MV以外） hd_custom01
hd_custom02 …
見出し（MV内） hd_custom（数字をつけない）
注意事項

新CMSにおいては独自クラスなしで調整を行えるケースもあります。
詳細は本ページ内の「3. 新CMSでのカスタマイズについて」をご確認ください。

2. デフォルトで設定されているスタイル

新CMS・旧CMS共にベースCSSで規定されているスタイルはありますが、パーツごとのCSSやコピー元サイトのCSSで上書きされています。

新CMSでの記述

ベースデザイン設定での設定値や、デザインパーツごとに個別に設定されているCSSのスタイルが当たっています。
どの部分にどのようなCSSが当たっているかは、各デザインパーツをデベロッパーツールなどで開くと確認できます。

旧CMSでの記述

見出しに対するスタイルは「heading（見出し）」内の「見出しフォント指定」の部分に記述を行います。
コピー元サイトでは見出しのフォントサイズに変数が当てられていますので、こちらを利用すると便利です。

※カスタムCSS内で「見出しフォント指定」と検索すると該当箇所が見つかります。

/*--- 見出しフォント指定 ---*/
.theme-fo-base {
  :is(.main-visual,.contents,.side,.foot) {
    .component {
      &.heading {
        &:is(
          .hd_custom01,
          .hd_custom02
        ) {
          :is(h1,h2,h3,h4,h5) {
            font-family: $title_font_family;
            font-weight: $hd_font_weight;
            line-height: $hd_line_height;
            letter-spacing: $hd_letter_spacing;
            @include breakpoint-sp {
              overflow-wrap: break-word;
            }
          }
          h1 {
            font-size: $site_h1_fontsize;
            @include breakpoint-sp {
              font-size: calc(#{$site_h1_fontsize} - 18px);
            }
          }
             （　…　一部省略）
        /*--- カスタム見出し ---*/
        // カスタム見出し01（下層ページで使用する見出しを入れる）
        &.hd_custom01 {
          :is(h1,h2,h3,h4,h5) {
                  …　以下省略

変数の記述箇所

//見出し
$hd_line_height: 1.5; //見出し用line-height（行間）
$hd_letter_spacing: $base_letter_spacing; //見出し用 letter-spacing（文字間）
$hd_font_weight: bold; //見出し用
$hd_font_strong: normal; //見出し用（編集画面の「.strong」に対応）
$title_font_family: inherit; //サイト内見出しのフォントファミリー
$site_h1_fontsize: 46px; //サイト内（ブログコンテンツを除く）の見出しh1のフォントサイズ（PC）
$site_h2_fontsize: 36px; //サイト内（ブログコンテンツを除く）の見出しh2のフォントサイズ（PC）
$site_h3_fontsize: 24px; //サイト内（ブログコンテンツを除く）の見出しh3のフォントサイズ（PC）
$site_h4_fontsize: 22px; //サイト内（ブログコンテンツを除く）の見出しh4のフォントサイズ（PC）
$site_h5_fontsize: 20px; //サイト内（ブログコンテンツを除く）の見出しh5のフォントサイズ（PC）

3. 新CMSでのカスタマイズについて

3.1 - 独自クラスなしで調整を行えるケース

余白の調整（下方向のmargin）のみ、クラスを付与せずパーツに直接スタイルを上書きし、調整を行うことができます。
※「 heading-marginBottom(～px)」に任意の値を入力できます。

/*----------------------------------
    heading（見出し）
----------------------------------*/

//デザインパーツ
.component {
  &:not(:root):not(:root):not(:root):not(:root):not(:root) {
    //見出し全体（例：自由にカスタマイズしてください）
    // &.heading[data-designpart-id] {
    //   :is(h1,h2,h3,h4,h5) {
    //   }
    //   h1 {
    //     @include heading-marginBottom(32px);
    //   }
    //   h2 {
    //     @include heading-marginBottom(32px);
    //   }
    //   h3 {
    //     @include heading-marginBottom(32px);
    //   }
    //   h4 {
    //     @include heading-marginBottom(24px);
    //   }
    //   h5 {
    //     @include heading-marginBottom(24px);
    //   }

  　　～

    // }
  }
}

3.2 - 見出しをカスタムするケース（デザインパーツを使用）

デザインパーツに対してクラスを付与し、「heading（見出し）」 > 「デザインパーツ」以下にスタイルを追記してください。
（コメントアウトを外してご使用ください）

/*----------------------------------
    heading（見出し）
----------------------------------*/

//デザインパーツ
.component {
  &:not(:root):not(:root):not(:root):not(:root):not(:root) {
    //見出し全体（例：自由にカスタマイズしてください）
    // &.heading[data-designpart-id] {
    //   :is(h1,h2,h3,h4,h5) {
    //   }

　　　　　～

    //   &.hd_custom01 {～}

　　　　　～

    // }
  }
}

3.3 - 新しく見出しを作成するケース（カスタムパーツを使用）

カスタムパーツは、デザインパーツにスタイルを当てる上記の方法で対応出来ない場合に使用します。
例えば以下のケースが考えられます。
  • LPなど独自のデザインで見出しを作成する場合
  • 見出し 1 〜 3 のデザインが明らかに異なる場合
  • レスポンシブ時も含め、フォントサイズの設定が全く異なる場合

/*----------------------------------
    heading（見出し）
----------------------------------*/

//カスタムパーツ
.theme-fo-base {
  :is(.main-visual,.contents,.side,.foot) {
    .component {
      &.heading {
        //&.rich-heading-align-right {}
        //&.rich-heading-align-center {}
        //&.rich-heading-align-left {}

        // カスタム見出し01
        &.hd_custom01 {
          :is(h1,h2,h3,h4,h5) {
            @include heading-marginBottom(60px);
          }
        }

        //sp時センター
        &.sp_center {
          &:is(.rich-heading-align-right,.rich-heading-align-left) {
            @include breakpoint-sp {
              text-align: center !important;
            }
          }
        }

        //細字設定
        :is(h1,h2,h3,h4,h5) {
          .strong {
            font-weight: $hd_font_strong;
          }
        }
      }
    }
  }
}

4. 旧CMSでのカスタマイズについて

「heading（見出し）」内の「見出しフォント指定」の部分に記述を行います。
見出しのデザインが複数ある場合には、hd_custom01、hd_custom02…と末尾の連番数字を増やして記述していきます。

/*--- 見出しフォント指定 ---*/
.theme-fo-base {
  :is(.main-visual,.contents,.side,.foot) {
    .component {
      &.heading {
        &:is(
          .hd_custom01,
          .hd_custom02
        ) {
          :is(h1,h2,h3,h4,h5) {
            font-family: $title_font_family;
            font-weight: $hd_font_weight;
            line-height: $hd_line_height;
            letter-spacing: $hd_letter_spacing;
            @include breakpoint-sp {
              overflow-wrap: break-word;
            }
          }
          h1 {
             （　…　一部省略）
        /*--- カスタム見出し ---*/
        // カスタム見出し01
        &.hd_custom01 {
          :is(h1,h2,h3,h4,h5) {
            display: inline-block;
            position: relative;
            margin-bottom: 1em;
            &::before {
              content: "";
             （　…　一部省略）
        // カスタム見出し02 下にボーダー付き
                  …　以下省略

fOでの基本設定

パーツ配置

CSSでの装飾

サイトチェック

pagetop

© Basic Inc. All Rights Reserved.