SWELLブログパーツのCSS入力欄はどこ？正しい記述場所を解説
こんにちは。hakubi code 代表のてらだです。
SWELLのブログパーツ機能、めちゃくちゃ便利ですよね。サイト内のいろんな場所で使い回せるし、一括管理できるのが最高です。でも、いざデザインを調整しようとして「あれ？ CSSを書く場所がない？」と戸惑ったことはありませんか。
通常の投稿や固定ページなら画面の下にあるはずの「カスタムCSS」欄が、ブログパーツの編集画面には見当たらない。かといって、カスタムHTMLブロックなどで無理やりCSSを書いても、親ページで読み込まれないことがある…。
これ、実はSWELLの不具合ではなく、WordPressの構造的な仕様に基づく「あえての設計」なんです。
今回は、なぜブログパーツにはCSS入力欄がないのか、その技術的な背景と、ブログパーツに確実にスタイルを適用するための正しい手順を解説します。
- ブログパーツ編集画面にCSS入力欄が存在しない理由
- ショートコード展開時のCSS読み込みタイミングの問題
- SWELLの高速化設定がデザイン崩れを引き起こすケース
- サイト全体で統一感を保つための正しいCSS記述場所
SWELLブログパーツのCSSが反映されない原因とは
ブログパーツで作ったコンテンツをショートコードで呼び出したとき、なぜかスタイルが適用されない。この現象には、WordPressの仕組みとSWELLの高速化機能が深く関わっています。
編集画面の追加CSSが効かない仕様の理由
まず、最大の疑問である「なぜブログパーツの編集画面にはCSS入力欄がないのか」についてです。
結論から言うと、「そこにCSSを書いても、ショートコードで呼び出した先（親ページ）では反映させることが技術的に非常に困難だから」です。
SWELLの開発側があえて入力欄を排除していると考えられます。もし入力欄があったら、ユーザーは当然「ここに書けばスタイルが当たる」と思いますよね。でも、後述するWordPressの仕組み上、それは機能しません。「書いたのに効かない！」という混乱を防ぐために、最初から入力欄自体を表示させていないのです。
つまり、入力欄がないのは不親切なのではなく、機能しないものを使わせないための配慮と言えます。
ショートコード利用時の読み込みタイミング
では、なぜ機能しないのでしょうか。それは「読み込みのタイミング」がズレているからです。これを専門用語で「Too Late（遅すぎる）」問題なんて呼んだりします。
Webページが表示されるとき、ざっくり言うと以下の順番で処理が進みます。
- 親ページの情報を取得する
- ヘッダー（CSSなどのスタイル定義）を出力する
- 本文の内容を解析して表示する
ショートコードが展開されて「あ、ここにブログパーツがあるぞ」とシステムが気づくのは、3番目の「本文の解析」の段階なんです。でもその時にはすでに2番目の「ヘッダー出力」は終わってしまっています。
仮にブログパーツにCSSデータを持たせていたとしても、それを読み込むための扉（headタグ）は、ブログパーツが呼び出される前に閉じてしまっている状態なんですね。だから、パーツ個別にCSSを持たせる設計自体が、WordPressのショートコード仕様と相性が悪いのです。
（出典：WordPress公式サイト 開発者リソース『Shortcode API』）
SWELL高速化設定によるスタイル崩れの影響
CSSの記述場所だけでなく、SWELL自慢の「高速化機能」が影響しているケースもあります。特に「SWELLボタン」や「アコーディオン」などのブロックを使った時に起きやすい現象です。
SWELLには「コンテンツに合わせて必要なCSSだけを読み込む」という素晴らしい機能があります。これによりページの表示速度を上げているのですが、ブログパーツを使うとこれが裏目に出ることがあるんです。
例えば、親ページには「SWELLボタン」がなく、埋め込んだブログパーツの中にだけ「SWELLボタン」があるとします。SWELLのシステムは親ページだけを見て「このページにボタンはないから、ボタン用のCSSは読み込まなくていいや」と判断してしまうことがあります。
その結果、ブログパーツ内のボタンだけスタイルが当たらず、ただのテキストリンクみたいになってしまう。これが「スタイル崩れ」の正体です。
もしボタンなどが崩れる場合は、SWELL設定の「高速化」にある「ファイルの読み込み設定」を見直してみてください。「コンテンツに合わせて必要なCSSだけを読み込む」をオフにすると直ることがあります。
エディタと実際の表示が異なる背景
「編集画面（エディタ）では綺麗に表示されてるのに！」というのもよくある悩みです。これは、ブロックエディタ（Gutenberg）がかなり特殊な環境だからです。
エディタ画面では、編集作業をしやすくするために、SWELLが持っているすべてのスタイリング機能があらかじめ読み込まれています。また、その場で編集しているブロックに対してリアルタイムにスタイルを適用する仕組みも動いています。
つまり、エディタはいわば「至れり尽くせりのVIPルーム」みたいな状態。一方、実際の公開ページ（フロントエンド）は、必要なものだけを厳選して持っていく「現場」です。エディタで見えているものが、そのまま現場に持っていけているとは限らない、というわけなんですね。
このギャップを埋めるためには、次で紹介する「正しい記述場所」を知っておく必要があります。
CSS全般のトラブルについては、以下の記事でも詳しく解説しているので、あわせてチェックしてみてください。
SWELLブログパーツへCSSを適用する正しい手順
原因がわかったところで、じゃあ具体的にどうすればいいの？という解決策を見ていきましょう。基本的には「ブログパーツの中には書かない」が鉄則です。
カスタマイザーの追加CSSで一元管理する
一番おすすめなのは、WordPressの標準機能である「カスタマイザー」の「追加CSS」を使う方法です。
「外観」＞「カスタマイズ」＞「追加CSS」
ここに記述したCSSは、サイト内のすべてのページで確実にヘッダーに読み込まれます。つまり、ブログパーツをトップページに置こうが、記事下に置こうが、どこに置いてもちゃんとスタイルが適用されるんです。
ブログパーツは「使い回す部品」ですから、CSSも「どこでも使える場所」に書いておくのが管理もしやすくてベストです。
子テーマのstyle.cssを活用する方法
特別な理由が無い限り、子テーマを使っていることと思います。SWELL子テーマフォルダ内の style.css に書くのも正解です。役割としてはカスタマイザーの追加CSSと同じですが、記述量が多い場合や、Gitなどでコード管理をしたい開発者の方にはこちらのほうが好まれます。
「外観」＞「テーマファイルエディタ」＞編集テーマを選択：「SWELL CHILD」>「スタイルシート」
また、ブラウザのキャッシュが効きやすいので、コード量が増えてきたらこちらに移行すると、わずかですが表示速度の面でも有利になります。
ブロック設定で背景色や装飾を調整する
「CSSコードを書くのはちょっと苦手…」という方は、ブロックエディタの右側にあるサイドバー（ブロック設定）だけで完結させるのが一番安全です。
- 背景色や文字色
- 枠線（ボーダー）
- 余白（パディング・マージン）
- 角丸の調整
これらの設定は「インラインスタイル」や「ユーティリティクラス」としてHTMLタグに直接埋め込まれます。そのため、ショートコードで呼び出した際もスタイルが脱落することなく、そのままのデザインで表示されます。
微調整レベルであれば、わざわざCSSファイルに書かずに、SWELLのブロック設定機能をフル活用するのが一番スマートな方法ですね。
クラス名を付与して特定のパーツのみ変える
「このブログパーツだけ特別なデザインにしたい」という時は、独自のクラス名をつけましょう。
使いまわすことが前提のブログパーツのCSSは、グローバルな箇所に記載することになりますので、「一意のクラス名」を用意することが大事です。
例えば、このようにグループブロックで囲い、ラッパークラスを用意します。
- ブログパーツの編集画面を開く。
- 全体を「グループブロック」で囲む。
- そのグループブロックを選択し、右サイドバーの「高度な設定」を開く。
- 「追加CSSクラス」の欄に、好きな名前（例：
my-special-banner）を入れる。 - カスタマイザーの追加CSSに、
.my-special-banner { ... }と記述する。
この方法なら、他のブログパーツに影響を与えずに、そのパーツだけを狙い撃ちでスタイリングできます。
ラッパークラスの付与は、グループ化の他にも、フルワイドセクションに行うなどの方法があります。適宜判断していきましょう。
#post-123 のようなID指定だと、パーツを作り直した時にIDが変わってCSSも書き直しになってしまうので、自分で決めたクラス名を使うのがコツです。
修正が効かない時のキャッシュクリア手順
正しい場所にCSSを書いたはずなのに、まだ反映されない！という時は、十中八九「キャッシュ」が悪さをしています。
SWELLは高速化のために強力なキャッシュ機能を持っています。ブログパーツの中身を書き換えたり、CSSを追記した後は、必ず以下のキャッシュクリアを行ってください。
- SWELLのキャッシュクリア：管理バーの「SWELL設定」＞「キャッシュクリア」をクリック。
- ブラウザのキャッシュクリア：Chromeならスーパーリロード（Shift + F5）など。
- サーバーのキャッシュ：ConoHa WINGやXserverなどの管理画面にあるキャッシュ機能も確認。
特にブログパーツはHTMLとしてキャッシュされやすいので、ここを忘れると「直ってないじゃん！」と無駄に悩むことになります。
ブログパーツIDとショートコードの使い方
最後に、基本の確認ですが、ブログパーツを呼び出すためのショートコードは正しく取得できていますか？
ブログパーツ一覧画面にある「呼び出しコード」の列から、 のようなコードをコピーして使います。もしテーマ乗り換えなどでIDが変わってしまった場合は、当然スタイルも呼び出しも機能しなくなるので注意してください。
また、SWELLの「広告タグ」機能も内部的にはブログパーツに近い挙動をしますが、管理画面が異なるので混同しないようにしましょう。CTA（Call To Action）を作る際は、このブログパーツ機能を使うのが一番柔軟性が高くておすすめです。
ブログパーツを使ったCTAの作り方については、こちらの記事も参考にしてみてください。
SWELLブログパーツのCSS管理に関するまとめ
SWELLのブログパーツでCSSが効かない（入力欄がない）のは、バグではなく仕様です。以下のポイントを押さえて、スマートに管理しましょう。
- ブログパーツ編集画面にはCSS入力欄はない。
- CSSは「カスタマイザーの追加CSS」か「子テーマのstyle.css」にまとめて書く。
- 簡単な装飾なら、ブロック設定（サイドバー）で済ませるのが一番確実。
- 反映されない時は、SWELL設定の「高速化」見直しと「キャッシュクリア」を必ず試す。
これさえ守れば、ブログパーツはサイト運営の強力な武器になります。ぜひ活用して、素敵なサイトを作ってくださいね。