SWELLのブログパーツの作り方と活用術7選【初心者でも時短】

ブログを書いていて、毎回同じボックスやCTAを一から組み立てていませんか。私も最初はそうで、「これコピペで済ませられないかな…」といつも思っていました。

この記事では、SWELLのブログパーツの作り方や使い方をまとめて、ブログパーツを使って記事作成をぐっと楽にできる状態を目指します。

一言でまとめると、「よく使うパーツをブログパーツとして登録しておけば、記事作成の手間が大きく減る」という話です。SWELLのブログパーツの作り方を覚えて、今日からの執筆時間を少しでも短くしていきましょう。

SWELLのブログパーツとは？まずはざっくり全体像をチェック

ブログパーツとブロックパターン・同期パターンの違い

最初にみんながつまずきやすいのが、「ブログパーツ」「ブロックパターン」「同期パターン」という言葉のごちゃまぜ問題です。整理すると、ざっくりこんなイメージになります。

機能名	主な用途	呼び出し場所	編集の反映イメージ
ブログパーツ	よく使うコンテンツの共通パーツ	記事・ウィジェット・カテゴリーページなど	通常のブログパーツとして呼び出した場合は、元を編集すると呼び出し先も更新
ブロックパターン	レイアウトのひな型（テンプレ）	記事編集画面などブロックエディター内	挿入後は別ブロックとして扱われ、元を直しても既存には反映されない
同期パターン	共通ブロックの一括変更	記事編集画面などブロックエディター内	同期パターンを編集すると、そのパターンを使っている全ての箇所が変わる

ざっくり言うと、ブログパーツは「サイト全体で使い回す共通パーツ」、ブロックパターンは「レイアウトの型」、同期パターンは「WordPress標準の共通ブロック」と考えると分かりやすいです。

SWELLのブログパーツが便利なのは、記事の中だけでなく、次のような場所にも呼び出せる点です。

• サイドバーやフッターなどのウィジェットエリア
• カテゴリーページやタグページの上部
• 記事下のCTAエリア
• メインビジュアル付近のエリア

「同じ内容をいろんな場所で使いたい」ときに、ブログパーツをベースにしておくと、あとからの修正がとても簡単になります。

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

ブログパーツの作り方を覚えておくと、具体的にこんなメリットがあります。

• 毎回同じボックスやCTAを一から作り直さなくてよくなる
• 見た目のルールを揃えやすくなり、サイト全体の統一感が出る
• リンク先や文言を一箇所変えるだけで、呼び出している箇所をまとめて更新できる
• 広告やキャンペーンの差し替え作業がかなりラクになる

私も、プロフィールボックスや記事下のCTAをブログパーツにしただけで、「毎回ちょっとずつ組み直す時間」がほぼゼロになりました。更新したいときもブログパーツ側だけ触ればいいので、精神的にもだいぶ楽です。

SWELLブログパーツの作り方【基本ステップを分解】

ブログパーツを新規作成する基本の流れ

まずは、ブログパーツを新しく作るときの流れです。

一番大事なのは、タイトル（名前）の付け方です。適当に付けてしまうと、あとから「どれがどのパーツだっけ？」と必ず迷います。

おすすめは、次のようなルールで統一してしまうことです。

• 用途_場所_内容
• カテゴリ_役割_内容

例えば、こんな感じです。

• CTA_記事下_メルマガ
• CTA_記事下_商品A
• プロフィール_記事下_通常
• バナー_サイドバー_ランキング

こうしておくと、ブログパーツ一覧を見たときに「どこで使っている何のパーツか」がすぐ分かります。

用途・公開設定でつまずかないためのポイント

SWELLのブログパーツには、「用途」という設定項目があります。この用途によって、連携できる場所や使い方が少し変わります。

• カテゴリ用：カテゴリーページの上部などに表示する用途
• タグ用：タグアーカイブなどで使いたいときの用途
• CTA用：記事下のCTAエリアなどと組み合わせたいときの用途
• ブロックパターン用：記事内にひな型として挿入したいときの用途

用途を設定しなくても、ブログパーツ自体は公開・呼び出しができます。ただ、後からウィジェットやCTAの設定と組み合わせることを考えると、「使いたい場所に合わせて用途を選んでおく」と管理が楽です。

公開前には、必ずプレビューで実際の見え方を確認しておきましょう。プレビューを見ながら、

• スマホで見たときに文字が小さすぎないか
• 余白が狭すぎて窮屈に見えないか
• ボタンが押しやすいサイズになっているか

といった点をチェックすると、完成度が一段階上がります。

最初に作っておくとラクなブログパーツの例

ブログパーツの作り方を覚えたあとに「何から作ればいいの？」となりがちなので、まず用意しておくと楽になるものを挙げておきます。

このあたりをブログパーツとして登録しておくと、「毎回同じようなものを作る時間」が一気に減ります。まずは記事下CTAとプロフィールボックスだけでも作っておくと、かなり快適になります。

作り方だけじゃない！ブログパーツの呼び出し方・使い方

記事内でブログパーツを呼び出す方法

記事本文の中でブログパーツを使う方法は、大きく分けて次の2つです。

• 専用ブロック（SWELLのブログパーツブロック）から呼び出す
• ショートコードで呼び出す

ブロックエディターに慣れていないうちは、専用ブロックから呼び出す方が直感的で分かりやすいと思います。

それぞれのイメージを、ざっくり表にするとこんな感じです。

呼び出し方法	やり方のイメージ	向いているケース
ブログパーツブロック	ブロック追加 → SWELLブロック → ブログパーツ → 一覧から選ぶ	普通の記事内で共通パーツを使いたいとき
ショートコード	[blog_parts id=”◯◯”] のようにショートコードを書く	固定ページや、一部のウィジェット、カスタムHTML内で呼び出したいとき

普段のブログ記事であれば、ほとんどの場合はブログパーツブロックだけで事足ります。ショートコードは、「ブロックを直接挿入できない場所で使いたいときの裏ワザ」という位置付けで覚えておくと混乱しません。

ウィジェットやサイドバーでのブログパーツの使い方

サイドバーやフッターなどのウィジェットエリアにブログパーツを表示することもできます。よくあるパターンは次のようなものです。

• サイドバーにプロフィールボックスを表示する
• サイドバーに人気記事ランキングを出す
• フッターにメルマガ登録ボックスを設置する

設定のイメージとしては、

• 外観 → ウィジェットを開く
• 表示したいエリアに「カスタムHTML」やブログパーツ関連のウィジェットを追加する
• ショートコードを貼る、または対象のブログパーツを選択する

といった流れです。

ただ、ウィジェットに要素を詰め込みすぎると、スマホ表示でかなり長くなってしまいます。サイドバーに置くブログパーツは、「本当に読んでほしいもの」に絞った方が、結果的にクリックされやすくなります。

ショートコードで柔軟に使うテクニック

ブログパーツは、ショートコードで呼び出すこともできます。公式の説明では、次のような形が代表的です。

• [blog_parts id=”投稿ID”]
• [blog_parts name=”ブログパーツ名”]
• [ブログパーツ id=”投稿ID”]
• [ブログパーツ name=”ブログパーツ名”]

これを使うと、次のような場所でもブログパーツを流用できます。

• 固定ページのレイアウトの中
• テーマやプラグインのHTMLの一部分
• ウィジェットのカスタムHTML内

うまく表示されないときは、

• IDの数字が正しいか
• name= で指定しているタイトルが正しいか（全角・半角やスペースに注意）
• ショートコードの前後に余計なタグが入っていないか

といった基本的なポイントを一度確認してみてください。意外と、タイプミスだけで表示されていないことも多いです。

SWELLブログパーツの活用アイデア7選

最初に作っておきたいブログパーツ7選

ブログ運営の現場で、私が「これはほぼ必須だな」と感じているパーツを、代表的な7つに絞って表にしました。

パーツ名	使う場所	目的・効果
記事下CTA	すべて、または特定カテゴリの記事下	メルマガ登録や商品案内への導線にする
プロフィールボックス	記事下・サイドバー	書き手の人柄を伝え、信頼感を高める
人気記事ランキング	サイドバー	他の記事も読んでもらい、回遊を増やす
カテゴリ別おすすめ記事ボックス	カテゴリーページ、まとめ記事内	そのテーマの導入記事に自然に誘導する
注意書き・補足ボックス	記事内の要所	重要な注意点や補足情報を目立たせて伝える
キャンペーン告知バナー	記事下・サイドバー・フッター	セールや企画の告知をまとめて行う
少し長めのLP風CTA	単価の高い商品・サービスの記事下	本文の続きとして、自然な形で成約につなげる

最初から全部作ろうとすると大変なので、まずは「記事下CTA」と「プロフィールボックス」だけでもOKです。それだけでも、サイトの印象と導線がかなり変わります。

収益化に効くCTAブログパーツの作り方のコツ

ブログで収益化を意識するなら、記事下に置くCTA用のブログパーツの作り方がかなり重要です。ポイントをいくつか挙げておきます。

例えば、

• 「この記事の内容を、動画で分かりやすく解説しています」
• 「作業を進めるためのチェックリストを無料で配布しています」

といった形で、「この記事の延長線上にある行動」を用意してあげるイメージです。本文とのつながりが自然なCTAほど、クリックされやすくなります。

サイト全体の統一感を出すブログパーツの使い方

ブログパーツの作り方に慣れてくると、つい「いろんなデザインを試してみたくなる」時期があります。ただ、サイト全体の印象を良くしたいなら、むしろデザインは揃えていく方が得です。

こうしたルールをブログパーツ側で固めておくと、「なんとなく整っているサイトだな」という印象になります。結果的に、読者が安心して読み進めやすくなり、離脱も減りやすくなります。

デザインを整えるブログパーツ用CSSの考え方

CSSを書く場所の選び方

SWELLでブログパーツのデザインを変えたいとき、CSSを書ける場所はいくつかあります。それぞれの特徴をまとめると、こんなイメージです。

書く場所	特徴	向いているケース
追加CSS	テーマカスタマイザーから手軽に編集できる	少しずつ試しながら見た目を整えたいとき
子テーマの style.css	ファイルとして残るので、変更履歴を管理しやすい	ブログ全体のカスタマイズをまとめておきたいとき
ブロックのカスタムCSS	特定のブロックだけにピンポイントで当てられる	一部のパーツだけデザインを変えたいとき

「どこに書けば正解なのか分からない」という場合は、まず追加CSSで試してみて、落ち着いてきたら子テーマ側に移す、という流れでも大丈夫です。

特定のブログパーツだけにCSSを当てるコツ

よくある要望が、「このブログパーツだけ背景色を変えたい」「このCTAだけ太めの枠にしたい」といったものです。特定のブログパーツだけを狙うときは、

• ブログパーツ全体にクラス名を付ける
• そのクラスに対してCSSを書く

という流れが基本です。

クラス名は、あとから見て用途が分かるように付けておくと便利です。

• c-bp-cta-main
• c-bp-profile-simple
• c-bp-note-alert

など、自分なりのルールで統一しておくと、「どのCSSがどのパーツに効いているのか」が分かりやすくなります。

よくある失敗とチェックリスト

ブログパーツ用のCSSでつまずきがちなポイントを、チェックリスト形式でまとめておきます。心当たりがあれば、一つずつ見直してみてください。

チェック項目	よくあるミスの例
クラス名・IDの指定	スペルミス、全角・半角の混在、余計なスペース
余白・行間の調整	paddingとmarginをどちらも大きくしすぎて窮屈になる
スマホ表示の確認	PCだけチェックして、スマホで崩れているのを見落とす
!important の使いすぎ	とりあえず!importantを付けてしまい、後で他の調整が効かなくなる

CSSは、一気に大きく変えようとすると原因を見つけにくくなります。1つ書いて1つ確認、という小さなステップで慣れていくと、失敗したときも戻しやすいです。

運用を楽にするブログパーツの管理・設計のコツ

命名ルールをあらかじめ決めておく

ブログパーツを増やしていくと、一覧画面があっという間に埋まっていきます。そこで重要なのが、「最初に命名ルールを決めてしまうこと」です。

おすすめは、次のような切り口を組み合わせた名前です。

• 用途（CTA、プロフィール、バナーなど）
• 場所（記事下、サイドバー、トップページなど）
• 内容（メルマガ、商品A、通常、セールなど）

具体的には、こんなイメージです。

• CTA_記事下_メルマガ
• CTA_記事下_商品A
• プロフィール_記事下_通常
• バナー_サイドバー_ランキング

ブログパーツが増えてきても、「どれを編集すればいいのか」がすぐに分かるので、後から自分を助けることになります。

整理しやすいブログパーツ設計のイメージ

ブログパーツの作り方に慣れてくると、つい「用途ごとに似たようなパーツを量産してしまう」ことがあります。ただ、役割がほぼ同じパーツが増えすぎると、どれを使うか迷ってしまいます。

整理しやすい設計のヒントを、表にまとめました。

分類の考え方	具体例
用途で分ける	CTA、プロフィール、注意書き、ランキングなど
ページ種別で分ける	記事用、カテゴリーページ用、トップページ用など
優先度で分ける	必ず表示したい共通パーツ、期間限定で使うパーツなど

「必ず使うもの」と「状況によって使うもの」を分けておくだけでも、運用のストレスはかなり減ります。

リニューアルを見据えた作り方のポイント

ブログを続けていると、「そろそろデザインを見直したいな」と思うタイミングが来ます。そのときに楽をするために、普段から次のようなことを意識しておくと良いです。

「1つのブログパーツを、いろんな場所で使い回す」イメージで設計しておくと、デザインを変えたいときもブログパーツ側を整えるだけで、全体の印象をすっと変えられます。

よくある質問（FAQ）

Q1：SWELLのブログパーツの作り方は難しくないですか？

A：基本的な部分だけであれば、そこまで難しくありません。普段の記事編集と同じブロックエディターで作業できます。

管理画面から「ブログパーツ → 新規追加」を開き、タイトルを付けてブロックを組み立て、必要なら用途を選んで公開する、という流れです。最初はシンプルなCTAボックスから作ってみると、感覚がつかみやすいと思います。

Q2：ブログパーツと同期パターンは、どう使い分ければいいですか？

A：どちらも「共通パーツを使い回す」という意味では似ていますが、得意な場面が少し違います。

• 記事の中だけで共通ブロックを管理したい → 同期パターンが向いている
• 記事以外（ウィジェットやカテゴリーページ、CTAエリアなど）でも同じパーツを使いたい → SWELLのブログパーツが向いている

ざっくりと、「サイト全体で使う共通パーツ」はブログパーツ、「記事の中だけで完結させたい共通ブロック」は同期パターン、と考えると整理しやすいです。

Q3：ブログパーツを作ったのに表示されません。どこを見直せばいいですか？

A：表示されないときは、次のポイントを順番に確認してみてください。

• 用途の設定が目的に合っているか（記事で使うのにカテゴリ用になっていないかなど）
• 公開状態になっているか（下書きや非公開のままになっていないか）
• ショートコードのIDやnameの指定が正しいか
• キャッシュ系プラグインが古い表示を見せていないか

特に、用途とショートコードの指定ミスは、SWELLのブログパーツの作り方に慣れていないときに起こりやすいポイントです。一つずつ落ち着いてチェックしていけば、原因は必ず見つかります。

まとめ：SWELLのブログパーツを作り方から活用まで一気にマスターしよう

この記事の内容をまとめます

今日からの最初の一歩として、まずは「記事下CTA」を一つ、ブログパーツとして作ってみてください。そのうえで、プロフィールボックスや人気記事ボックスなど、「毎回作っている共通パーツ」を少しずつブログパーツに移していくと、SWELLのブログパーツの作り方と使い方が自然と身についていきます。

一度慣れてしまうと、「もうブログパーツなしで記事を書くのは考えられない」と感じるくらい、作業が楽になるはずです。