WordPressのCSS編集に関して

WordPressのデザイン運用面についてのメモ

以前筆者はWordPressのテーマ編集ページの「カスタムCSS」に編集内容を記載していた。

しかしこれでは効率の良い運用方法とは言いがたい。

狭いサイドバーのようなUIで記載するCSSはあっという間に折り返される。ぶっちゃけみづらいし、作業もしずらい。

ということで、今回はWordPress、固定ページ名どの個別のページごとにCSSファイルを用意して反映させる方法を残しておきます。

効率の良いデザイン編集

  1. 弄りたいページを開く
  2. Google Chromeなどのブラウザーに付属のF12キーで立ち上がる開発者モードでいじりたい箇所を確認しながら編集する
  3. 編集した箇所はVS cordなどを立ち上げておき、メモりながら作業を進める。
  4. ある程度記録したらCSS形式の拡張子で保存
  5. FTPサーバ内部のWordPress→テーマフォルダにアップロード
  6. F5でページリロードして反映!

個別にCSSを保存するメリット

  • 個別ページ毎に分けてページデザインできる
  • 見やすい
  • 使いづらいオンラインエディタなんか使わず、愛用のVScordでコーディングできる
  • コメントアウトできる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です