【SWELL】ブログパーツのCSSの正しい書き方！初心者がやりがちなNG例も

SWELLのブログパーツにcssを書いてもデザインが変わらない、どこに書けばいいのか分からないと悩んでいませんか。

この記事では、そんなSWELLのブログパーツとcssまわりのつまずきを、なるべくかみ砕いてまとめていきます。

結論からいうと、「ブログパーツ専用のcssを書こう」と思うよりも、サイト全体の中での書き場所とクラス設計を決めてあげれば、崩れにくくて何度でも使えるデザインになります。

SWELLブログパーツとcssの基本をざっくり整理

ブログパーツとは？通常ブロックとの違い

ブログパーツは、ひと言でいうと「よく使うパーツを登録しておいて、好きな場所で呼び出せる機能」です。

似た機能として、ブロックエディター標準の「再利用ブロック（パターン）」があります。イメージをつかみやすいように、違いを表にまとめました。

種類	主な使い方	変更の反映範囲	向いているケース
通常ブロック	その記事だけで使う装飾	その記事のみ	一度きりの装飾やレイアウト
再利用ブロック	WordPress標準の共通ブロック	使ったすべての場所	ブロック単位の共通化
SWELLブログパーツ	テンプレやパーツを自由に保存	設置したすべての場所	CTA、ボックス、ヘッダーなどサイト全体の共通パーツ

私の感覚では、SWELLのブログパーツは「サイトの骨組みに関わるパーツ」を管理するのに向いています。広告バナーやお知らせ、プロフィールボックスなど、いろいろなページに登場するものはブログパーツにしておくと、あとからの修正が本当に楽になります。

SWELLでブログパーツを使うメリット

ブログパーツを使いこなせるようになると、運営の手間がかなり減ります。具体的には、こんなメリットがあります。

その一方で、「ブログパーツにcssを書いたつもりが反映されない」「編集画面と実際のページで見た目が違う」といった悩みもよく聞きます。ここを理解しておかないと、せっかくのブログパーツが「触るのが怖いエリア」になってしまうんですよね。

cssとブログパーツの関係をイメージで理解

細かい技術的な話を抜きにして、ざっくりと「ページが表示される流れ」をイメージしてみましょう。

• ページを開くとき、最初にテーマやプラグインのcssファイルが読み込まれる
• そのあとで、本文の中にあるブログパーツのショートコードが展開されてHTMLになる
• cssは「どのクラス名やタグに当てるか」を指定しているので、セレクタがズレると意図した場所に効かない

この流れを頭の片すみに置いておくと、「ブログパーツの中に独自でcssを書いても管理しにくい」「cssを書く場所によっては反映されないように見える」といった理由が、感覚的に理解しやすくなります。

次の章では、実際にSWELLのブログパーツにcssを当てようとしたときに、どんな原因でつまずきやすいのかを整理していきます。

SWELLブログパーツでcssが反映されない主な原因

cssを書く場所が間違っている

一番よくあるのが「cssを書く場所がずれている」というパターンです。私も最初はとりあえずブログパーツの中に<style>タグを書いてしまって、あとから自分で何を書いたのか分からなくなりました。

よくあるパターンを、ざっくり整理するとこんな感じです。

記述場所	状態	コメント
ブログパーツ本文内に<style>タグ	非推奨	動くこともあるが、あとから探しづらく、テーマの仕様によっては意図しない動作になることもある
記事本文の途中に<style>タグ	おすすめしない	その記事だけならまだしも、ブログパーツ用のスタイルには向いていない
「外観」→「カスタマイズ」の追加CSS	おすすめ	管理画面から編集でき、サイト全体にまとめて適用できる
子テーマのstyle.css	おすすめ	サイト全体の設計を意識して管理したいときに向いている

ブログパーツにだけcssを効かせたい場合は、ブログパーツ内のいちばん外側のブロックに「独自クラス」を付けて、そのクラス名に対して追加CSSやstyle.cssでスタイルを書くのが、管理しやすくておすすめです。

セレクタや優先度の問題

css自体の書き方は間違っていないのに、SWELL本体のスタイルや他の装飾に負けてしまっているケースも多いです。

• クラス名がざっくりしすぎていて、狙った要素だけに当たっていない
• テーマ側にも似たクラス名があり、そちらの指定が優先されている
• あちこちに!importantが入り、どれが勝っているのか自分でも分からなくなっている

基本の考え方としては、次のように意識しておくと迷いにくいです。

• 「どのブログパーツの、どのブロックに効かせたいcssなのか」をはっきりさせる
• 必要な範囲だけ、親要素を含めてセレクタを少し深くする
• どうしても既存のスタイルに勝てないときだけ!importantを使う

これだけでも、SWELLのブログパーツに関するcssのトラブルはかなり減ります。

キャッシュやプラグイン干渉

意外に多いのが、キャッシュやプラグインが原因で「直したはずのcssが反映されていないように見える」パターンです。

ブログパーツのデザインを変えたのにまったく動きがないときは、次のような手順で確認してみてください。

• ブラウザのスーパーリロードや、別ブラウザ・シークレットウィンドウで表示を確認する
• キャッシュ系プラグインを一時的に停止して、見た目が変わるかチェックする
• SWELLやプラグインの高速化設定を少しゆるめて、変化が出るかどうかを見る

これだけでも、「cssが効かない」のか「効いているけど見えていないだけ」なのかを切り分けやすくなります。

SWELLブログパーツ cssの正しい書き方と4つのパターン

パターン1：追加CSSに書く（もっとも手軽）

一番手軽な方法は、管理画面の「外観」→「カスタマイズ」にある追加CSSに書くやり方です。子テーマを触るのが不安なときや、まずは試しにデザインを変えてみたいときに向いています。

ざっくりとメリット・デメリットをまとめると、こんなイメージです。

項目	メリット	デメリット
設定のしやすさ	管理画面だけで完結し、ファイルを直接編集する必要がない	長く運営していると、コード量が多くなりやすい
影響範囲	サイト全体にすぐ反映される	小さな書き間違いでも全体に影響してしまう
管理のしやすさ	管理画面からいつでも編集できる	どの部分がどのパーツ用か、自分でコメントしておかないと分かりづらい

ブログパーツ専用のスタイルを追加CSSに書くときは、必ず「独自クラス」とセットで使うのがおすすめです。ブログパーツの外側のブロックにクラス名を付けて、「.クラス名 { … }」という形でスタイルを書いていくと、あとから見てもどのパーツのcssかが分かりやすくなります。

パターン2：子テーマのstyle.cssに書く（中級者向け）

サイト運営に慣れてきて、「cssをファイルベースで管理したい」と感じたら、SWELLの子テーマのstyle.cssにまとめる方法が視野に入ってきます。

この方法が向いているのは、次のようなケースです。

• コードエディタを使って、落ち着いてcssを書きたい
• Gitなどでテーマのカスタマイズをバージョン管理したい
• サイト全体のデザイン設計をある程度きっちり決めたい

ただし、子テーマを使う場合は、管理のルールを最初に決めておかないと、時間がたつほど把握しづらくなります。

• コメントで「どのブログパーツ用のcssか」を必ずメモしておく
• ブログパーツ別にまとまりを作り、上から順に探せるように整理する
• 不要になったパーツのcssは、残すならコメントアウトしておく

このあたりを意識しておくだけでも、SWELLのブログパーツに関するcssを長く運用しやすくなります。

パターン3：ブロック設定＋独自クラスで管理する

私が実際にやっているのは、「まずはSWELL標準のブロック設定でどこまで行けるか試して、足りない部分だけcssで補う」というスタイルです。

SWELLのブロックは、管理画面の設定だけで次のような調整がかなり柔軟にできます。

• 上下左右の余白
• 背景色やグラデーション
• ボーダーの有無や太さ、色
• 角丸やシャドウ（影）

そのため、細かいレイアウトを組まない限りは、ブロック設定だけで十分きれいに見えることも多いです。cssを書くのは、「標準機能ではどうしても届かない部分」だけでOKです。

どうしてもcssが必要なときは、次のような流れにするとスムーズです。

• ブログパーツの外側や特定のブロックに独自クラスを付ける
• 追加CSSやstyle.cssに、そのクラス名を使ったスタイルを書く
• 編集画面と実際のページの両方で、崩れがないか確認する

この形にしておけば、後からブロック構成を変えたくなっても、クラス名さえ変えなければデザインを保ちやすくなります。

パターン4：よく使う共通パーツごとの設計ルールを決める

SWELLのブログパーツを上手く使っている人ほど、「よく登場するパーツ」ごとにざっくりした設計ルールを決めています。

一例として、こんなイメージです。

パーツ例	クラス名の例	設計ルールの例
お知らせボックス	.p-notice	本文より文字サイズを少し小さくし、淡い背景色＋左側にライン
注意喚起ボックス	.p-alert	赤系のボーダー＋太字、上下の余白を通常より少し広めに
記事下のCTA	.p-cta-bottom	PCでは画像とボタンを横並び、スマホでは縦並び
サイドバーのプロフィール	.p-profile	アイコン画像を丸く切り抜き、名前の文字サイズを少し大きく

クラス名の先頭に「p-」などのプレフィックスを付けておくと、自分の中で「これはパーツ用のクラスだな」と区別しやすくなります。こうしたルールをざっくり決めておくだけでも、ブログパーツまわりのcssがかなり整理されていきます。

デザイン例｜SWELLブログパーツに使えるcssアイデア集

お知らせボックス（注意書き・キャンペーンなど）

まず出番が多いのが、「お知らせボックス」系のブログパーツです。キャンペーン案内や大事な注意書きなど、少し目立たせたい情報はひとつのパーツにまとめておくと便利です。

項目	内容の例
用途	期間限定のお知らせ、重要な注意事項など
クラス名	.p-notice
デザインの方向性	薄い背景色＋左に太めのライン、文字は少し小さくて行間広め

cssを書くときのポイントは、次のようなイメージです。

• 背景色を本文よりも少しだけ目立つ色にする
• 左側にボーダーを入れて、「ここが重要だよ」と視線を誘導する
• 長文になりがちなので、行間を少し広めにして読みやすくする

このブログパーツを作っておけば、「全記事の冒頭に同じお知らせを出したい」といったときも、ブログパーツを挿入するだけで一括反映できます。

サイドバーのバナー・ボタン

次におすすめなのが、サイドバーに置くバナーやボタン系のブログパーツです。

• メルマガ登録への導線
• 有料コンテンツや教材の紹介
• 人気記事ランキングへのリンク

こうした要素は、1つ1つ別々に作るよりも、ブログパーツにまとめてデザインを揃えた方がすっきり見えます。

cssを書くときは、次のような点を意識してみてください。

• ボタンの角丸や影の強さをそろえて、統一感を出す
• 文字サイズや行間を決めておき、どのバナーも同じリズムで読めるようにする
• ホバー時（マウスを乗せたとき）に色を少し変えて、クリックできることが伝わるようにする

こうしてサイドバーのブログパーツ用cssを整えておくと、後から色やフォントを変えたくなったときにも、一箇所直すだけで済むので本当に楽です。

記事下CTAをブログパーツ＋cssで統一

個人的にかなり効果を感じているのが、「記事のいちばん下に置くCTA（行動喚起）」をブログパーツで統一してしまう方法です。

• 関連記事やおすすめ記事への導線
• 無料登録・資料ダウンロードの案内
• LINE登録やSNSフォローの誘導

こういったCTAを、それぞれブログパーツとして作り、cssでレイアウトを揃えておきます。

• PCでは画像とテキストを横並びに、スマホでは縦並びにする
• 見出しのスタイルやアイコンのサイズを共通にする
• ボタンの色や形はサイト全体で統一する

こうしておくと、どの記事を読み終わっても「同じ雰囲気の締め方」になるので、サイト全体の世界観が自然とそろってきます。

SWELLの高速化設定とブログパーツcssの付き合い方

高速化機能でCSSが効かなくなるケース

表示を軽くするために、cssやJavaScriptの読み込みを最適化する機能を使っていると、状況によってはブログパーツに影響が出ることがあります。

よくあるのは、次のようなケースです。

• cssの自動最適化を強めにしていて、一部のスタイルが「不要」と判断されている
• キャッシュ系プラグインとSWELLの機能が重なり、反映タイミングが分かりにくくなっている
• ファイルをまとめる機能を使っていて、ごく一部のページだけ崩れて見える

イメージをまとめると、次のような感じです。

状況	起きやすい現象	対処の考え方
cssの最適化レベルが高い	特定のパーツだけスタイルが当たらない	最適化レベルを一段階ゆるめて様子を見る
キャッシュ系プラグイン＋テーマ側の高速化	更新しても見た目が変わらない	どちらか一方の機能を一時的にオフにして確認する
css/JSの結合機能を使用	特定ページでのみレイアウトが崩れる	対象の機能を個別にオフにして検証する

むやみに高速化のチェックを全部外すよりも、「どの設定が影響していそうか」を一つずつ試していく方が、結果的には安定しやすいです。

表示速度とデザインのバランスをどう取るか

正直なところ、「表示速度」と「リッチなデザイン」はある程度トレードオフです。ただ、ブログパーツ周りのcssだけでサイトが重くなることはあまりありません。

むしろ、次のような基本を押さえておく方が重要です。

• 画像サイズを必要以上に大きくしない（特にヘッダーやバナー）
• 複雑なアニメーションや動きを多用しすぎない
• 似た機能のプラグインをいくつも入れない

このあたりを意識していれば、高速化設定を少しゆるめたとしても、体感の速度が極端に落ちることはそう多くありません。ブログパーツの見た目が崩れてしまうくらいなら、バランスを取り直した方が良い場面もあります。

それでもデザインが崩れるときのチェックリスト

いろいろ試してもSWELLのブログパーツがうまく表示されないときは、次のチェックリストを上から順に確認してみてください。

私も何度も経験しましたが、「キャッシュを消した瞬間にちゃんと効いていたことに気づく」というパターンは本当に多いです。焦らず、一つずつ確認していきましょう。

よくある質問

Q1.SWELLブログパーツ cssは、記事ごとに書いてもいいですか？

A. やろうと思えばできますが、基本的にはおすすめしません。

記事ごとにcssをバラバラに書いてしまうと、次のような問題が出てきます。

• どの記事にどのcssを書いたのか、自分でも分からなくなる
• サイト全体のデザインを統一したくなったとき、修正箇所が多すぎて対応しきれない

SWELLのブログパーツに関係するcssは、できるだけ次のようなルールにしておくと長い目で見て楽です。

• 共通のパーツはブログパーツにまとめて管理する
• デザイン調整は、追加CSSか子テーマのstyle.cssに集約する

こうしておけば、あとから「このパーツだけデザインを変えたい」というときにも、探す場所が限られていて安心です。

Q2.SWELLブログパーツ cssが一部のページだけ崩れるのはなぜ？

A. そのページ特有のレイアウトやブロックの構成が、ブログパーツとぶつかっている可能性があります。

例えば、次のようなケースです。

• 固定ページでだけ、通常と違うテンプレートを使っている
• ランディングページ用に強めのcssを書いていて、それがブログパーツにも当たっている
• 親要素の幅や余白が、通常の投稿ページと大きく違っている

この場合は、次のような手順で原因を探していくのがおすすめです。

• ブラウザのデベロッパーツールで崩れている要素をチェックし、どのcssが当たっているか確認する
• ブログパーツ用のクラスに対するcssのセレクタを、必要な範囲だけ少し強くする
• それでも厳しい場合は、そのページだけ別パターンのブログパーツを用意して使い分ける

すべてのページでまったく同じ見た目にする必要はないので、「どうしても合わないページは別パーツにする」という割り切りも大切です。

Q3.css初心者ですが、SWELLブログパーツ cssを触っても大丈夫ですか？

A. いきなり難しいことをやろうとすると大変ですが、少しずつ試す分にはむしろおすすめです。

最初から全部のプロパティを覚える必要はなくて、まずは次の3つだけ意識してみてください。

• 色（color / background-color）
• 文字の大きさ（font-size）
• 余白（margin / padding）

この3つをいじれるようになるだけでも、ブログパーツの印象はかなり変わります。どうしても不安なときは、次のような工夫をすると安心です。

• ブログパーツを複製して「テスト用」を作り、そちらで先に試す
• 追加CSSの中で、「ここからこのパーツ用」とコメントを書いて分けておく

一度「自分で書いたcssでブログパーツの見た目が変わった」という体験ができると、そこからの上達スピードが一気に上がります。

まとめ｜SWELLブログパーツ cssを味方にする一歩

ここまでのポイントを整理します

今日からできる最初の一歩としては、次の3ステップがおすすめです。

• よく使っているパーツを1つだけ選ぶ（例：注意書きボックス）
• それをブログパーツとして登録し、外側のブロックに独自クラスを付ける
• 追加CSSかstyle.cssに、そのクラス用のスタイルを1つだけ書いてみる

この小さな一歩で、「ブログパーツの見た目を自分でコントロールできる」という感覚がつかめるはずです。私も最初の1個がうまくいったときに、「これでサイト全体のデザインがぐっと楽になる」と実感しました。少しずつ試しながら、あなたのサイトに合ったSWELLのブログパーツとcssの付き合い方を見つけていきましょう。