サイトチェック
新CMS完全対応マニュアル
目次
更新性に関するチェック
STEP3では更新性に関わるチェックを行います。
チェック作業の方法および注意点については以下の解説をご参照ください
チェック作業の方法および注意点については以下の解説をご参照ください
■ カスタムCSS
CSSチェック者が確認
このセクションのチェックは以下の手順でCSSを開いて行ってください。
01
カスタムCSSを開く
管理画面：設定 ＞ 外観設定 ＞ カスタムCSS を開きます。
02
チェック箇所を表示する
検索機能などを使い、今回チェックを担当する案件でCSSが記述された部分を探します。
1. CSSのネストが守られている
（正しく入れ子になっており、セレクタを省略していないか）
01
ネストの構造を確認する
セレクタを省略していない、正しい順番のネスト構造になっているかを確認します。
その際、以下のコーディングルールを参照できます。
その際、以下のコーディングルールを参照できます。
2. 使用しているページ名をコメントアウトで記載している
01
独自クラスをそれぞれ確認する
サイト内のどのページ、どの箇所で使用しているかが分かるように
コメントアウトのメモが残されているかを確認します。
コメントアウトのメモが残されているかを確認します。
3. その他のコーディングルールが守られている
01
上記の項目以外にもコーディングルールに関する指摘事項があれば、
こちらにまとめて記載してください。
こちらにまとめて記載してください。
■ 編集画面でできる操作を邪魔しない
CSSチェック者が確認
このセクションのチェックは引き続きカスタムCSSを開いて行ってください。
4. 適切な独自クラスを当ててスタイルを書いている
01
スタイルがどこに記述されているかを確認する
sectionやrow（行）、col（カラム）、componentといったエリアやパーツに自動で生成されるクラスに対して、スタイルが直書きされていないかをチェックします。
命名規則に合った独自クラスを付与し、それに対してスタイルが記述されているかを確認します。
02
エリアのクラス名も確認する
ヘッダーナビゲーション： navi_base_custom
メインビジュアル： mv_custom
フッター： ft_custom01
メインビジュアル： mv_custom
フッター： ft_custom01
上記「～custom」のようなクラス名が、デフォルトとは別で付与されていて、そこにCSSでスタイルされているかを確認します。（クラス名は上記とは違う場合もあります）
注意事項
「.header 」や「 .footer 」に直にCSSをあてているのではなく、クラス名（◎◎_custom）を対象にCSSでスタイルがあたっているかを注意して確認してください。
5. テキストや見出し・ボタンの太字は編集画面で設定している
01
太字の箇所を確認する
- テキスト
- 見出し
- ボタン
がCSSによって太字設定にされていないかを確認します。
注意事項
CSSで太字設定を行うと、お客様が編集画面から太字を設定したり、解除したりできなくなるので注意が必要です。
6. 「カラム内要素の縦位置」を編集画面で設定し、CSSで行（row）にflexを使用した場合は追加の対策をしている
01
「カラム内要素の縦位置」を設定している箇所を探す
編集画面を確認したり、「カラム内要素の縦位置」の機能を使用した際に自動で出力されるクラスをデベロッパーツールを使って探すことができます。
- 自動で生成されるクラス：「vertical_position_top」「vertical_position_middle」「vertical_position_bottom」
02
その上で行（row）に対してflexが適用されている箇所を確認する
こちらのルールを参照し、カラム（col）の兄弟要素との高さを揃えるために追加の対策が行われているかを確認します。
7. 行（row）やカラム（col）のボックスシャドウを編集画面で設定し、数値を変更する場合はシャドウ用のクラスに対して記述している
01
ボックスシャドウが適用されている箇所を確認する
編集画面や公開画面を開き、ボックスシャドウが適用されている箇所を確認します。
02
03
（値が調整されている場合）自動出力クラスに対しての記述か確認する
お客様が必要に応じて影をワンクリックでつけたり外したりできるようにするため、調整用のスタイルが自動出力クラスに対して記述されているかを確認します。
8. ボックスリンクを設定した場合、hover時の挙動は自動出力クラスに対して書いている
01
ボックスリンクが適用されている箇所を確認する
編集画面や公開画面を開き、ボックスシャドウが適用されている箇所を確認します。
02
（hover時の挙動が調整されている場合）自動出力クラスに対しての記述か確認する
CSSで挙動を調整している場合、調整用のスタイルが自動出力クラスに対して記述されているかを確認します。
9. ページ編集画面で、カスタムCSSの影響によりクリックできない領域やパーツが存在しない
サイトチェック者が確認
01
チェックを行うページの編集画面を開く
チェック対象ページ編集画面を開きます。
02
全てのチェック対象ページの編集画面を確認する
編集画面の全てのパーツを触って確認します。重なっているパーツは特に注意します。
03
エラーの箇所がないか確認する
クリックできない（もしくはクリックしにくい）パーツがないか確認します。
注意事項
詳細は編集画面の崩れについてのページをご確認ください。
■ 編集画面を操作した時に表示が崩れない
10. 行（row）やカラム（col）、パーツを増減しても崩れないデザインになっている
01
公開ページを開き、デベロッパーツールを起動する
公開ページ、または「テスト公開URL」をクリックしてブラウザに表示させ、デベロッパーツールを開きます。
02
エリアやパーツを増減させる
行（row）やカラム（col）、テキストや画像などのパーツを増減させます。
03
エラー表示になっていないか確認する
崩れがないかどうか確認してください
11. 記事リストのカード型３種類、リスト型で崩れていない
01
公開ページを開き、デベロッパーツールを開く
記事リストが配置されているページを、ブラウザに表示させ、デベロッパーツールを開きます。
02
記事リストパーツのクラスを変更する
記事リストパーツ（component entry-list）内にあるクラス名を、下記のすべての型のクラスに変更します。
リスト型： entry-image-list
カード型1列： entry-image-card-1-col
カード型2列： entry-image-card-2-col
カード型3列： entry-image-card-3-col
カード型1列： entry-image-card-1-col
カード型2列： entry-image-card-2-col
カード型3列： entry-image-card-3-col
03
それぞれのスタイル型を確認する
それぞれの型で崩れがないか、フォントサイズなどのデザインが統一されているか確認します。
注意事項
余白、ボックスシャドウ、角丸など統一されているかしっかり確認してください。
12. フォームパーツの水平と垂直のときに適切な表示になっている
01
フォームのページの公開ページを開く
フォームページの「テスト公開URL」をクリックして、ブラウザに表示させます。
02
デベロッパーツールを開き、フォームに付与されているクラスを探す
クラス名「vertical」または「horizontal」となっている場所を検索して探します。
03
クラスを変更し、ブラウザの表示を確認する
「vertical」となっている場合は「horizontal」に、「horizontal」となっている場合は「vertical」に変更し、表示崩れがないかを確認します。
「vertical」のとき（変更されていない場合はこの状態になっています）
「horizontal」のとき
作業時のPOINT
以下の場合は正常に表示されています。
verticalのとき： フォームのラベルがフォームの上に来る
horizontalのとき： フォームのラベルがフォームの左横に来る
規約リンク下にあるチェックボックス部分が崩れていることがあるので注意してください。
verticalのとき： フォームのラベルがフォームの上に来る
horizontalのとき： フォームのラベルがフォームの左横に来る
規約リンク下にあるチェックボックス部分が崩れていることがあるので注意してください。
Step 7【ディレクター引き継ぎ】へ記載を
引き継ぎ事項の共有
デザイン再現の観点から更新性が保てない場合、また操作に影響を及ぼす場合は、
ディレクターと認識を合わせた上で引き継ぎを記載する必要があります。
引き継ぎの内容をエリアごとに分類し、Step 7【ディレクター引き継ぎ】に記載のうえご共有ください。
© Basic Inc. All Rights Reserved.