今回は、WordPressのテーマに使用しているCSS（style.cssなど）を編集する時の注意点を紹介します。
【WordPress】テーマのstyle.cssなどを編集する際の注意点
WordPressを使用したサイトを運営・制作する場合、
- 有料、無料テーマをそのまま使用してサイト作成
- 自分または外注して作ったテーマを使用してサイト作成
- 有料、無料テーマをカスタマイズしてサイト作成
主に上記3つのパターンに分かれると思います。今回の、CSS編集の際の注意点を気にしてほしいのは、一番下「有料、無料テーマをカスタマイズしてサイト作成」のパターンの場合です。
テーマのstyle.cssなどを編集後に発生する事象
WordPressの管理画面から、「外観」→「テーマエディター」の順で、CSS・js・phpのファイル編集ができます。この中で今回確認している事象が発生したのは、CSSファイルの編集後です。
発生することがある事象は、「一部のスマホ端末のみ、CSSの編集を行った箇所の崩れ」です。（こちらで確認できた端末はiPhone8、OSバージョンは不明です）
編集後、ちゃんと保存しても一部の端末でこのような事象が発生する可能性がありますので、その際は下記の方法を試してみてください。
- 画面の再読み込み時、キャッシュの削除とハードな読み込み「ctrl＋shift＋R（windows）」「command＋shift＋R（mac）」キーで再読み込みをする。
※スマートフォンの場合は、アプリのキャッシュクリア - style.cssなどの外部cssではなく、カスタマイズ内の「追加css」に記述を追加する。
- 各ブラウザに対応させるために、CSSの記述でベンダープレフィックス（-webkit-、-moz-、-o-など）が必要な箇所に付け足しておく。
大体の場合は、上記のどれか、または全て行うことで解決すると思います。
まとめ
今回は、WordPressテーマのstyle.cssなどを編集した際に発生する事象などを紹介しました。
サイト制作を行うときは、OS、機種、解像度などの違う複数のPC、スマホ端末で公開前に動作テストを行うようにしましょう。
前へ
