SWELLのブログパーツでCTAを全ページに置く方法｜1か所の更新で全記事に反映する設計と注意点

記事やサービスページの最後に置く問い合わせ導線（CTA）を、ページごとに書いていると、文言を1つ変えるだけで全ページを直すことになります。SWELLのブログパーツを使えば、CTAを1か所で管理し、呼び出したすべてのページに反映できます。

株式会社アマノートでも、全ページ共通の問い合わせCTAや、サービス紹介ページに並べる「サービス一覧」をブログパーツで管理しています。本記事では、その運用で分かった作り方と注意点を解説します。

SWELLのブログパーツとは

ブログパーツは、ブロックで作ったまとまりを部品として保存し、別のページから呼び出せるSWELLの機能です。管理画面の「ブログパーツ」メニューで作成・編集します。

呼び出し先には元の内容がそのまま表示されるため、元のブログパーツを編集すると、呼び出しているすべてのページの表示が変わります。CTA、サービス一覧、注意書きなど、複数のページで同じ内容を見せたい部分に向いています。

SWELLのブログパーツでCTAを作る手順

ブログパーツを新規作成してCTAを組む

「ブログパーツ」メニューから新規追加し、見出し・説明文・ボタンなど、CTAとして見せたい内容をブロックで組みます。タイトルは管理用なので、「CTA｜全ページ共通」「CTA｜LLMO」のように用途が分かる名前にしておくと、パーツが増えても探しやすくなります。

IDを確認して呼び出す

作成したブログパーツにはIDが付きます。記事やページでは、ブログパーツを呼び出すブロックを使うか、次のショートコードを書いて呼び出します。

当社のLLMOコンサルティングのページでは、ページの途中と末尾に、用途の違う4つのブログパーツを呼び出しています。

表示を確認する

呼び出したページを公開画面で開き、ボタンのリンク先、スマートフォンでの折り返し、前後の余白を確認します。エディター上の見た目と公開画面では、適用されるCSSが異なることがあるためです。

ブログパーツを複数ページで使って起きた表示の崩れ

便利な反面、ブログパーツは「呼び出し先のページのCSSの中で表示される」ため、ページ側のCSSの影響を受けます。当社で実際に起きたことを紹介します。

記事本文向けのCSSが、パーツの中にも当たる

SWELLのブログパーツは、呼び出し先で <div class="p-blogParts post_content"> という要素に包まれて出力されます。記事本文と同じ post_content クラスを持つため、.post_content h2 のような本文向けのCSSが、パーツの中の見出しにもそのまま当たります。

当社では、サービス紹介ページの見出しを順番に数える演出をCSSで入れていたところ、共通CTAのパーツの中で数え直しが起き、ページ途中の「お問い合わせ」の見出しだけ番号がずれて表示されました。数え始めを指定するセレクタを .post_content:not(.p-blogParts) にして、外側の本文だけを対象にすることで直りました。

/* 外側の本文だけでカウンタを始める（パーツ内では始め直さない） */
.post_content:not(.p-blogParts) { counter-reset: section; }

パーツのCSSは、パーツの中に閉じる

パーツ専用のデザインをサイト全体の追加CSSに書くと、パーツを使わないページにも影響が出たり、パーツを別サイトに移すときにCSSを探し回ったりすることになります。

当社の共通CTAは、CSSをブログパーツの本文内に <style> で書き、すべてのクラス名に専用の接頭辞を付けています。こうしておくと、テーマのCSSやページ側のCSSとぶつかりにくく、パーツを編集するだけでデザインも完結します。CSSがどの順番で読み込まれるかは、SWELLでCSSが反映されないときの確認手順で解説しています。

CTAのリンクを計測するときの注意点

内部リンクにUTMパラメータを付けない

どのページのCTAから問い合わせが来たかを知りたくて、サイト内のリンクにUTMパラメータを付けたくなることがあります。しかし、Google アナリティクス 4 では、サイト内のリンクにUTMを付けると、その時点でセッションの流入元が書き換わり、もともと検索から来たのか、広告から来たのかが分からなくなります。

当社のサイトでは内部リンクにUTMを付けない決まりにしています。どのCTAから来たかを区別したい場合は、?from= のような独自のパラメータや、問い合わせフォームの非表示項目で受け取る方法があります。

文言は、返信の目安など事実で書く

CTAの文言は、全ページに一度に反映されるぶん、誇張した表現が入ると影響も広がります。当社の共通CTAでは「平均1営業日以内にご返信」「無理な営業は一切いたしません」など、実際に守っている運用を書いています。

SWELLのブログパーツに関するよくある質問

ブログパーツを編集すると、過去の記事にも反映されますか？

反映されます。呼び出し先にはブログパーツの現在の内容が表示されるため、過去の記事も含めて一度に変わります。キャッシュ系のプラグインを使っている場合は、キャッシュの削除後に反映されます。

ページによってCTAの内容を変えたいときは？

テーマ別にブログパーツを分けるのが管理しやすい方法です。当社では、全ページ共通のCTAのほかに、LLMOの記事向けなど、テーマに合わせたCTAのパーツを用意しています。

使っていないブログパーツは削除してよいですか？

削除する前に、ショートコードやブロックで呼び出しているページがないか確認してください。呼び出し先が残ったまま削除すると、そのページのCTAが表示されなくなります。

まとめ：SWELLのブログパーツでCTAを1か所で管理する

• CTAをブログパーツにすると、1か所の編集で呼び出し先すべてに反映できる
• パーツは p-blogParts post_content に包まれるため、本文向けのCSSがパーツ内にも当たる
• パーツ専用のCSSはパーツの中に閉じ、クラス名に接頭辞を付ける
• 内部リンクにUTMを付けず、独自パラメータやフォームの非表示項目で計測する

株式会社アマノートは、SWELLなどの既存テーマを使ったサイト制作から、問い合わせにつながる導線の設計まで支援しています。詳しくはWordPressサイト制作のページをご覧ください。