SWELLでCSSを追加したのに、記事投稿画面に反映されなくて困っていませんか?
記事投稿画面にもこだわりのデザインが反映されていれば、確認の手間が省けます。
この記事では、SWELLで記事投稿画面にCSSを反映させる方法を紹介します。
目次
記事投稿画面でCSS設定が反映されない理由
ウェブサイトのデザインは、CSSという設計図でできています。
このCSSは、ウェブサイトの様々な場所に適用されますが、記事投稿画面と実際に公開されるページでは、CSSの適用範囲が違います。
例えば、お店で考えてみましょう。
- 公開ページはお客様が訪れるお店のショーウィンドウのような場所で、お店全体をきれいに見せるためにデザインされています。
- 記事投稿画面はお店のバックヤードのように商品を管理する場所で、作業場なので見た目よりも使いやすさが優先されます。
SWELLの記事投稿画面でCSSを反映させる具体的な方法
カスタム書式用CSSに記述する
記事投稿画面にCSSを反映させるには、通常の追加CSSでは設定できません。

これは、記事投稿画面がWordPressのコア機能の一部であり、テーマやプラグインによるカスタマイズが制限されているためです。
SWELLには、記事投稿画面のデザインを調整するためのカスタム書式用CSSという機能があります。
記事投稿画面にのみ適用されるCSSは、「SWELL設定」→「エディター設定」→「カスタム書式」のカスタム書式用CSS欄に入力することで利用できます。

記述方法
カスタム書式欄に、次のCSSコードを記述します。
このコードはh4タグ(見出し4)に適用されるCSSの例です。

- padding: 10px; は、見出しの内側の余白を上下左右10ピクセルに設定します。
- color: #333333; は、見出しの文字色を#333333(少し濃い灰色)に設定します。
- border-left: solid 6px #1cb3ff; は、見出しの左側に実線で太さ6ピクセルの#1cb3ff(明るい青色)の線を引きます。
h4{
padding: 10px;
color: #333333;
border-left: solid 6px #1cb3ff;
}
注意点
CSSコード以外は、カスタム書式用CSS欄に追加しないようにしてください。
「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」→「見出し4のデザイン」は[装飾なし]を選択してください。
まとめ
この記事では、SWELLで追加したCSSが記事投稿画面の見出しに反映されない理由と、その解決策を説明しました。
この記事のポイント
- CSSの適用範囲が公開ページと記事投稿画面で異なる
- 記事投稿画面にCSSを反映させるには、SWELL設定のカスタム書式用CSSに記述する必要がある
- カスタム書式用CSSにCSSコード以外は記述しない
- 「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」→「見出し4のデザイン」は[装飾なし]を選ぶ

これで記事投稿画面でも、デザインを確認しながら記事が書けますね

理想のデザインで、さらに素敵な記事をたくさん書いてくださいね。