サイトチェック

STEP3：カスタムCSS

カスタムCSSに関するチェック

STEP3ではカスタムCSSに関わるチェックを行います。
チェック作業の方法および注意点については以下の解説をご参照ください

※CSSチェック者が確認

カスタムCSSを開く

管理画面：設定>　外観設定>　カスタムCSS　を開きます。

カスタムCSSを確認する

row-1、row-2、col-3、col-4などの自動出力クラスを検索します。
固有のスタイルが当てられていないことを確認します。

ページIDっぽいものを検索する

「page-ランダム数字」がページID なので「page-」と検索するとよいです。

公開ページを開き、デベロッパーツールを起動する

「テスト公開URL」をクリックしてブラウザに表示させ、デベロッパーツールを開きます。

試しに複製するパーツを選ぶ

2カラムや3カラムあるパーツを見つける。（例えば下記画像のような場合です）

選んだパーツを選択する

デベロッパーツールの選択モードでパーツのカラム（col）を選択します。

選んだパーツを複製する

選択したパーツの要素（element）で【右クリック】→【Duplicate element】をクリックして要素を複製します。

複製したものを確認する

パーツを増減した箇所の表示が大きく崩れないか確かめます。（下記画像赤枠部分）

エラー表示になっていないか確認する

下記のように表示崩れがないかを確認します。（右にはみ出している）

注意事項

チェックを行うページの編集画面を開く

チェック対象ページ編集画面を開きます。

全てのチェック対象ページの編集画面を確認する

編集画面の全てのパーツを触って確認します。重なっているパーツは特に注意します。

エラーの箇所がないか確認する

クリックできない（もしくはクリックしにくい）パーツがないか確認します。

注意事項

この表示は画像が重なっている部分やposition: absolute;で動かしているパーツに起きやすいです。
section、inner、 row、 colに「position」や「float」、「z-index」で9999以下を当てている部分に発生しやすいので注意して確認してください。
空パーツ（中に何も入っていないrowなど）が入っていないかを十分に確認し、もし入っていた場合はコメントしてください。
表示している画像・アイコン画像が小さすぎてクリックできない場合はコメントしてください。
クリックした際に出てくるメニューやパレットの表示も確認してください。
稀に見た目が崩れている時があるので、その場合はコメントしてください。
ブログのテンプレートページも漏れがちなので、忘れずに確認をお願いします。