SWELLでCSSを追加したのに、記事投稿画面の見出しが変わらないのはなぜ?

当ページのリンクには広告が含まれています。

SWELLでCSSを追加したのに、記事投稿画面に反映されなくて困っていませんか?

記事投稿画面にもこだわりのデザインが反映されていれば、確認の手間が省けます。

この記事では、SWELLで記事投稿画面にCSSを反映させる方法を紹介します。

目次

記事投稿画面でCSS設定が反映されない理由

ウェブサイトのデザインは、CSSという設計図でできています。

このCSSは、ウェブサイトの様々な場所に適用されますが、記事投稿画面と実際に公開されるページでは、CSSの適用範囲が違います。

例えば、お店で考えてみましょう。

SWELLの記事投稿画面でCSSを反映させる具体的な方法

カスタム書式用CSSに記述する

記事投稿画面にCSSを反映させるには、通常の追加CSSでは設定できません。

これは、記事投稿画面がWordPressのコア機能の一部であり、テーマやプラグインによるカスタマイズが制限されているためです。

SWELLには、記事投稿画面のデザインを調整するためのカスタム書式用CSSという機能があります。

記事投稿画面にのみ適用されるCSSは、「SWELL設定」→「エディター設定」→「カスタム書式」のカスタム書式用CSS欄に入力することで利用できます。

記述方法

カスタム書式欄に、次のCSSコードを記述します。

このコードはh4タグ(見出し4)に適用されるCSSの例です。

h4{
 padding: 10px;
 color: #333333;
 border-left: solid 6px #1cb3ff;
}

注意点

CSSコード以外は、カスタム書式用CSS欄に追加しないようにしてください。

「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」→「見出し4のデザイン」は[装飾なし]を選択してください。

まとめ

この記事では、SWELLで追加したCSSが記事投稿画面の見出しに反映されない理由と、その解決策を説明しました。

Fuku

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

Ryo

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

シェア頂けると嬉しいです!お願いします。
  • URLをコピーしました!
  • URLをコピーしました!
目次