6/21(月)・6/22(火)はAmazonプライムデー!商品一覧へ

【WordPress】CSSコーディング時の備忘録

wordpress-css-coding

ブロガーさんのサイトをコーディングする機械が増えてきたのでメモ書きです。

ブロガーさんの設定を壊さず、自身でメンテナンスできるようにカスタマイズするので、ちょっと特殊かもしれません。

目次

WordPress上でのCSSのコーディングルール

基本的には元の設定を上書きしてトップページなどの見た目を整えるようにします。

すいみん

他の記事部分などに見た目の影響が出ないようにしましょう。

CSSの記述する場所

CSSは最後に読み込まれたものが、基本的には優先されます。

ですので、CSSを記述する場所は気をつけましょう。

カスタマイズは追加CSSに記述されていることが多いので、その影響も考慮しておきましょう。

追加CSSがどうしても邪魔してくる場合は、奥の手としてはhead内から参照すると最後に読み込まれます。

<link rel="stylesheet" type="text/css" href="https://???.com/wp-content/themes/jin-child/css/my-style.css">

既存サイトの設定を邪魔しない

.homeを先頭につけるとトップページだけの適応になります。

.home .post_content h2 {}

※ヘッダーとフッターはサイト共通なので注意しましょう。

または固定記事の下にCSSを挿入できるテーマであれば、コンテンツ部分だけ記述するのもありです。

CSSを記述する順番

PC→タブレット→SPの順番がPCでのコーディングがしやすいです。

要素単位でも上から下へという順番でCSSを記述します。

メディアクエリも幅の大きい順にCSSを記述します。

CSS プロパティの順番

アルファベット順を推奨。

順番が揃って見やすくなります。

.home .post_content h2 {     background: none;     border: none;     font-size: 28px;     margin: 0px;     padding: 0em; }

CSS のプロパティをまとめる

marginとpaddingは1行で書きます。

margin-rightなどはつかわず、コード量をできるだけ減らします。

.area { margin: 20px 20px 0 0; padding: 20px 0 80px 0; }

ID に CSS を記述しない

複雑になるので、個別に調整したい時もHTMLに新しくクラスを追加してあげます。

見出し

.home #content 

!important の使うタイミング

テーマ固有のCSSやカスタマイズされているCSSの影響で変更できない場合は!importantを使用します。

値0には、単位を指定しない

margin:0px;ではなくmargin:0

0vwとか0%とか0emとか。

過剰に修飾された要素を許可しない

不必要な記述は消します。

img#level_02 → #level_02

.home .h2-header.h2-blue → .home .h2-blue

コーディングする時のテキストエディタとプラグイン

コーディングの作業を楽にするツールです。

Visual Studio Code + Prettier – Code formatter

Visual Studio Codeは軽くて拡張性の高いテキストエディタでおすすめです。

特にPrettierという拡張機能を追加してあげるとコードが自動で整ったり、デバックできるのでぜひ入れておきましょう。

Prettierの設定

Prettierを入れたら、ファイル>ユーザー設定>設定を開きます。
formatで検索してEditor:Default Formatterの設定をesbenp.prettier-cscodeを選択しましょう!

CSSのチェックツール

こちらのサービスを使うとクリーンナップできます。

すいみん

データがきれいになる神サービスです!

コメントアウトを入れてCSSを整理する

ブログ記事を書くような感じで、目次と各見出しや要素に区切り(コメントアウト)を入れてあげます。

コーディングする時に整理しながら記入できると吉。

目次

ヘッダーとかフッターとかコンテンツとか大きい区切りの場合

/*---------------------------------
  
  1.ヘッダー
  2.コンテンツ(1)
  3.コンテンツ(2)
  4.コンテンツ(3)
  5.コンテンツ(4)
  6.コンテンツ(5)
  7.フッター

---------------------------------*/

各セクションの見出し

/*---------------------------------

  ヘッダー

---------------------------------*/

各要素の見出し

/* ロゴ
---------------------------------*/

サイトのレスポンシブのチェック

Chromeのところで解像度を変更してレスポンシブで崩れがないかチェックします。

テストする端末設定

PC、タブレット、スマホは確認しておきましょう。特にiPhoneXの細長い端末に注意しましょう。

デバイス幅(px)高さ(px)
PC19201080
iPad Pro10241366
iPad7681024
iPhone 8 Plus414736
iPhone X375812

ブレイクポイント

デバイスによって、CSSの切り替えをするポイントです。

デバイスオプションサイズ備考
PCmin-width(最小幅)960px
タブレットの区切りmax-width959px
タブレットmin-width(最小幅)768pxiPad(縦)まで含む
スマートフォンの区切りmax-width767pxWordPressテーマでよくここで区切られる
min-widthは最小幅 要素をこれ以上小さくしないという幅の制限
max-widthは最大幅 要素をこれ以上大きくしないという幅の制限

自分の作成したCSSによっては1100pxで崩れたり、560pxで崩れたりみたいな、まずい組み込みをすることもあるので、Chromeでいろいろなサイズで確認したほうがよいです。

【WordPress】CSSコーディングする時のルールまとめ

本記事では「【WordPress】CSSコーディングする時のルールまとめ」まとめました。

デザノマはブロガー特化でデザインを提供しています。

ぜひ気になった方はお問い合わせください。

すいみん

ブログの見た目をよくすると本格的なサイトに見えるので、気になった方はお問い合わせくださいませ。

PHP/HTMLコーディング備忘録

すいみん

PHP/HTMLコーディング時の備忘録です。

【WordPress】PHP/HTMLコーディング時の備忘録まとめ

目次
閉じる