- 記事公開日
WordPressの上部に変なスペースができる
WordPressのテーマを自作してるんだけど、上の方に変なスペースができてしまったの。
どうやったら消せる？
了解です！
主な原因は２つ。
「何だかの理由で文字エンコード（改行コード）が変わってしまった」もしくは、デフォルトのCSSにmarginやpaddingが設定されている可能性が高いです。
文字エンコード（改行コード）が変わってしまった
お使いのエディタでテンプレートファイルやfunction.phpファイルの文字コードを確認してみてください。
文字コードが「SHIFT-JIS」になっていたり、改行コードが「CR＋LF」になっていませんか？
文字コードは「UTF-8N」、改行コードは「LF」に設定してください。
私自身の経験でも、UTF-8Nに設定していたのに、何だかのタイミングでSHIFT-JISに代わってしまっていたこともあります。
デフォルトのCSSにmarginやpaddingが設定されている
最新バージョンのブロックエディタを用いたWordPressでは、デフォルトでdivにmarginやpaddingが設定されています。
自作テーマのCSSの一番上に、下記のCSSを追加してみてください。
/* -----------------------------------------------------
リセット
----------------------------------------------------- */
div.wp-block-column, /* カラム（列）を表すブロック */
div.wp-block-columns, /* 複数のwp-block-columnをまとめるコンテナ */
div.is-layout-flex, /* Flexboxレイアウトを適用するためのクラス */
div.is-layout-constrained,
div.is-layout-flow { /* コンテンツの幅を制限するためのクラス */
margin:0;
padding:0;
gap:0;
}
div.wp-block-column figure,
div.wp-block-columns figure,
div.is-layout-flex figure,
div.is-layout-constrained figure,
div.is-layout-flow figure {
margin:0;
padding:0;
}
