カスタムCSSの編集方法

外観 > カスタムCSS

項目	内容
できること	サイトの見た目（色・余白・文字サイズなど）を調整する
管理画面の場所	左メニュー「外観」>「カスタムCSS」
重要な前提	テーマを更新しても消えません。見た目の調整は必ずここに書いてください

サイトの見た目（色・余白・文字サイズなど）を調整できます。

この機能の一番の目的は「テーマを更新しても設定が消えないこと」です。

これまで見た目の調整は style.css というファイルを直接編集していました。しかしテーマを新しいものに差し替えると、そのファイルは上書きされて編集内容が消えていました。

カスタムCSSに書いた内容はテーマの外に保存されるため、テーマを何度更新しても消えません。

したがって、今後の見た目の調整はすべてカスタムCSSに書いてください。

保存した内容はすぐにサイトへ反映されます。キャッシュのクリアなどは不要です。

CSSは「どこを」「どうする」という形で書きます。

/* 見出しの文字色を変える */
.section-heading {
    color: #333333;
}

/* ボタンの余白を広げる */
.ranktable__column__cta a {
    padding: 16px 24px;
}

/* */ で囲んだ部分はメモ書き（コメント）で、見た目には影響しません。後から見て何の設定か分かるようにメモを残しておくことを強くおすすめします。

CSSには「あとに書かれたもの」「より詳しく指定したもの」が優先されるルールがあります。既存のスタイルに負けている場合は、指定の後ろに !important を付けると強制的に優先されます。

.section-heading {
    color: #333333 !important;
}

ただし !important を多用すると、後から調整しづらくなります。効かないときの最後の手段として使ってください。

コメントだけ書いても何も起こりません。

/* メモ */ だけを書いて保存しても、見た目は変わりません。これは正常な動作です。実際の指定を書く必要があります。

入力欄を空にすると、CSSが読み込まれなくなります。

全部消して保存すると、カスタムCSSは無効になります。一時的に全部止めたいときに使えます。

「保存」ボタンが押せない場合

サーバー側の権限の問題です。画面に警告と対処法が表示されるので、その内容を制作担当に伝えてください。

この画面で書いたCSSはサイト全体に効きます。

特定のページだけに効かせたい場合は、指定の書き方を工夫する必要があります。判断に迷う場合は制作担当に相談してください。

/wp-content/uploads/の中に、balp-custom.cssというファイルがあります。通常の.cssファイルと何ら変わりありません。そのファイルを直接編集することも可能です。/uploads/にあることで、テーマディレクトリの更新の干渉を受けない仕組みになっています。

症状	まず確認すること
反映されない	コメント（`/* */`）だけになっていないか確認する。次に `!important` を試す
「保存」ボタンが押せない	サーバー側の権限の問題です。画面の警告文を制作担当に伝えてください
意図しない場所まで変わった	指定範囲が広すぎます。書いた指定を制作担当に確認してください
テーマ更新後に見た目が戻った	`style.css` を直接編集していないか確認する（そちらは更新で消えます）

上記で解決しない場合は、「どのページで」「何をしたら」「どうなったか」の3点を添えて制作担当に連絡してください。