SWELLショートコードの使い方大全｜失敗しない10のコツ

SWELLを入れたものの、「ショートコードって結局どう使えばいいの？」と手が止まっていないでしょうか。

この記事では、SWELLのショートコードの基本から、よく使うものの一覧、ブログでの具体的な活用パターンまでを一気にまとめます。

この記事を読むと分かること

SWELLでよく使うショートコードと、それぞれの役割
どこにどう入力すれば正しく動くのか
レビュー記事やまとめ記事での実践的な使い方の例

結論としては、「よく使うショートコードだけを用途別に覚える」だけで十分です。この記事を開きっぱなしにしながら、一つずつ試してみてください。

SWELLのショートコードとは？基本をサクッと整理
SWELLショートコードの使い方を始める前の準備
用途別に見るSWELLショートコードの使い方一覧
ブログでの実践例：ショートコードの使い方アイデア
ブロックとショートコードの使い分けとSWELLならではのポイント
ショートコードの使い方がうまくいかないときのチェック
よくある質問
まとめ：SWELLショートコードの使い方をすぐ実践しよう

SWELLのショートコードとは？基本をサクッと整理

ごとう

まずは、SWELLのショートコードがどんな仕組みなのかイメージをそろえておきましょう。ここでざっくり理解しておくと、後半の具体的な使い方もすっと入ってきます。

SWELLショートコードの全体像をざっくり把握しよう

ショートコードは、かんたんに言うと「短い命令文でパーツを呼び出す合図」です。広告や目次、記事一覧、吹き出しなど、毎回ゼロから組み立てるのが面倒なものを、短い一行だけで呼び出せる仕組みになっています。

よくある「やりたいこと」と「使うショートコード」を並べると、こんなイメージです。

やりたいこと	ショートコードの例	よく使う場所
記事の途中に広告を入れたい		本文の見出しと見出しの間
好きな位置に目次を表示したい	[SWELL_toc]	リード文の下・中見出しの前
特定カテゴリの最新記事一覧を出したい	[post_list cat=”スラッグ”]	トップページ・まとめ記事
会話風のふきだしを出したい	[speech_balloon id=”1″]〜[/speech_balloon]	レビュー・解説記事の本文中

こんな感じで、「何を出したいか → どのショートコードか」の対応関係だけ分かっていればOKです。細かいオプションは、使いながら少しずつ覚えていけば大丈夫です。

ショートコードとブロックの違い

SWELLはブロックもかなり充実していて、「ブロックだけでも別に困らないけど、ショートコードも用意されている」という構図になっています。

ざっくりした違いは次のようなイメージです。

ブロック：編集画面を見ながらデザインを調整したいときに向いている
ショートコード：サイドバーやフッターなど、何度も同じものを呼び出したいときに向いている

とくにウィジェットや、カテゴリー別のカスタマイズ用など、「同じパーツをいろんな場所で使いまわしたい場面」ではショートコードがあるとかなり楽です。逆に、そのページだけで完結する装飾は、ブロックで作ったほうが直感的で扱いやすいです。

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

稼げる広告
稼げるキーワード
稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

SWELLショートコードの使い方を始める前の準備

ごとう

「よし、ショートコードを入れてみよう」と思っても、どこに書くのが正解なのか、最初は迷いやすいところです。ここでは入力場所と、コピペ前に気をつけたいポイントを確認しておきます。

ショートコードはどこに入力すればいい？

ブロックエディター（Gutenberg）でショートコードを使う場所は、だいたい次の3つです。

ショートコードブロック
段落ブロックのテキスト部分
ウィジェット（サイドバーやフッター）のカスタムHTML

それぞれの使い分けを整理すると、こんな感じになります。

場所	向いている使い方	ポイント
ショートコードブロック	や [SWELL_toc] など1行で完結するもの	他のテキストと混ざらず、後から見返しても分かりやすい
段落ブロック	文中にアイコンなどを差し込みたいとき	文章と同じ行にちょっとだけ入れたいときに便利
カスタムHTMLウィジェット	バナー、記事一覧、PR表記などの共通パーツ	サイドバーやフッターの「全ページ共通表示」にぴったり

迷ったときは、「記事本文ならショートコードブロック」「サイドバーやフッターならウィジェット」と覚えておくと判断しやすいです。

コピペ前にチェックしたい3つのポイント

ショートコードは基本的にコピペでOKですが、ちょっとしたタイポで動かないこともよくあります。特に初心者の方がつまずきやすいのは次の3つです。

かっこの [ と ] が全角になっていないか
idの数字や名前が、自分のサイトで実際に存在しているか
前後に余計なスペースや改行が紛れ込んでいないか

私も、全角と半角が混ざっていてうまく動かず、「テーマがおかしいのかな？」と勘違いしたことがあります。表示されないときは、いったん深呼吸して、一文字ずつ見直してみてください。

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

用途別に見るSWELLショートコードの使い方一覧

ごとう

ここからは、よく使うショートコードを用途別にまとめていきます。全部覚える必要はないので、「自分のブログでよくやる動き」に関係しそうなものから拾っていきましょう。

よく使うSWELLショートコードの全体マップ

まずは「どんな種類があるか」をざっと眺めておきましょう。細かいオプションはあとからでも大丈夫です。

用途	ショートコード例	主な役割
広告	/ [ad_tag id=”1″]	記事内広告・特定の広告タグを表示
目次	[SWELL_toc]	任意の位置に目次を挿入
記事一覧	[post_list cat=”スラッグ”]	カテゴリ・タグなど条件付きの投稿リスト
ブログカード	[post_link id=”123″]	個別記事へのカード型リンク
再利用パーツ	[blog_parts id=”投稿ID”]	登録済みブログパーツの呼び出し
ログイン制御	[only_login]〜[/only_login]	ログイン中だけ見せたい内容を制御
吹き出し	[speech_balloon id=”1″]〜[/speech_balloon]	会話形式のふきだしを表示
アイコン		チェックマークなどのアイコンを表示

この表をブックマークしておけば、「あの機能どうやるんだっけ？」となったときに、すぐ逆引きできます。

広告・目次まわりのショートコードの使い方

まずは出番が多い、広告と目次まわりのショートコードから押さえておきましょう。

記事内広告： を挿入すると、SWELLの広告タグで設定した内容がその位置に出ます。
特定の広告： [ad_tag id=”1″] のように、IDを指定して個別の広告タグを呼び出せます。

たとえば「まとめの前には必ず1つ広告を入れる」と決めておくと、あとから広告デザインやコードを変えたくなったときも、広告タグ側を直すだけで全記事に反映されます。

目次を自由な位置に出したいときは [SWELL_toc] を使います。通常は最初の見出しの上に自動で表示されますが、ショートコードを使えば「導入文のすぐ下」「中盤の区切り」など、好きな場所に出せます。

記事一覧やブログカードのショートコード

関連記事を見せたいときに便利なのが、投稿リストとブログカードのショートコードです。

投稿リスト： [post_list cat=”スラッグ”] で、特定カテゴリの記事一覧を作成
タグ別： [post_list tag=”タグ名”] でタグごとのまとめも作成可能
ブログカード： [post_link id=”123″] で、個別記事をカード型リンクで表示

カテゴリーページの下部に [post_list] を入れておくと、「このカテゴリの他の記事」が自動で並びます。SWELLのショートコードの中でも、回遊率アップを体感しやすい部分なので、早めに慣れておくと得です。

再利用パーツ・バナー系ショートコード

よく使う「注意書き」「プロフィール」「特典案内」などは、ブログパーツやカスタムバナーとして登録して、ショートコードで呼び出すと管理がかなり楽になります。

ブログパーツ： [blog_parts id=”投稿ID”] で登録済みパーツを呼び出し
カスタムバナー： [custom_banner title=”タイトル” text=”説明文” link=”URL” img_url=”画像URL”] でバナーを生成

たとえば「この記事を書いた人」ボックスをブログパーツにしておけば、本文中では [blog_parts] 一行だけ書けばOKです。あとから自己紹介の内容を変えたくなっても、ブログパーツ側を1回直すだけで、全記事分が一気に更新されます。

ログイン制御やPR表記などのショートコード

少し踏み込んだ使い方として、ログイン状態による表示切り替えや、PR表記用のショートコードも用意されています。

ログイン中ユーザーだけに見せる： [only_login]ここに会員向けの内容[/only_login]
ログインしていない人だけに見せる： [only_logout]ここに未ログイン向けの案内[/only_logout]
PR表記： [pr_notation] で「当ページのリンクには広告が含まれています。」のような定型文を表示
HTML挿入： ここにHTML のように、生のHTMLを挿入

とくにアフィリエイトやタイアップ案件が多いブログでは、PR表記のショートコードを使っておくと、表現を変えたくなったときに一括で差し替えができて便利です。

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

センスが必要
文章力が要る

【稼げるキーワード教えます】
▼　　▼　　▼

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

ブログでの実践例：ショートコードの使い方アイデア

ごとう

ここからは、実際のブログ記事でどう組み合わせて使うかを、具体的なパターンで見ていきます。「このまま真似しよう」と思えるものがあれば、そのまま自分の型にしてしまってOKです。

レビュー記事でのSWELLショートコード活用例

商品レビュー記事で私がよくやる構成を、ショートコード込みで並べてみます。

記事のパート	使えるショートコード例	ねらい
冒頭すぐ下の目次	[SWELL_toc]	記事全体の流れを一目で見せる
結論前の広告	/ [ad_tag id=”1″]	読み切ったタイミングで商品への導線を出す
評価の星マーク	[review_stars 4.5] / [review_stars 4.5/5]	パッと見で評価の高さを伝える
関連記事の紹介	[post_list cat=”レビュー”]	他のレビュー記事へ自然に誘導する

最初はこの表どおりにテンプレを作っておき、毎回同じ位置に同じショートコードを差し込むと、書くたびに考えることが減ってかなり楽になります。

まとめ記事・ランキング記事での活用例

まとめ記事やランキング記事では、投稿リスト系のショートコードが特に役に立ちます。

カテゴリまとめ：冒頭に [SWELL_toc]、最後に [post_list cat=”おすすめ”] で関連記事一覧
ランキング記事：各順位の下に [post_link id=”◯◯”] を置き、詳しいレビュー記事に飛ばす

ランキング記事はどうしても縦に長くなりがちなので、目次と投稿リストをうまく組み合わせて、「どこに何があるか分かる状態」を作ってあげるのがコツです。

会員限定コンテンツ・クローズド情報の活用例

もし、オンラインサロンや会員向けコンテンツを運営しているなら、ログイン制御系のショートコードがかなり使えます。

一部だけ会員限定にする：[only_login]ここだけ会員限定のノウハウ[/only_login]
未ログイン向けのお知らせ：[only_logout]ログインしていない人への案内文[/only_logout]

一般公開記事の中に、1ブロックだけ会員限定の内容を混ぜる、という使い方も簡単です。サーバー側の難しい設定をしなくても、SWELLのショートコードだけで軽めの会員エリアっぽい見せ方ができます。

ブロックとショートコードの使い分けとSWELLならではのポイント

ごとう

「何でもショートコードでやったほうがいいのかな？」と思うかもしれませんが、実際はブロックと併用したほうが楽です。ここでは、使い分けの考え方を整理しておきます。

ショートコードを使うと便利な場面

ショートコードが得意なのは、「共通パーツ」「条件付きの表示」「一括変更したいもの」です。具体的には次のような場面です。

サイドバーやフッターなど、全ページに出したい案内・バナー
広告やPR表記など、あとから文言やデザインを変えたいもの
カテゴリ別やタグ別の投稿リストなど、自動で一覧を作りたいもの

比較しやすいように、ざっくりとした向き・不向きを表にしてみます。

項目	ショートコード向き	ブロック向き
共通パーツ	◎ 何度も使うなら一括管理できて楽	△ 特定ページだけならOK
デザインの細かい調整	△ テキストベースでの調整になる	◎ 編集画面を見ながら調整しやすい
あとからの修正のしやすさ	◎ 元のパーツを直せば全てに反映	△ ページごとに修正が必要になる
直感的な分かりやすさ	△ 仕組みを理解するまで少し慣れが必要	◎ 見た目を見ながら作業できる

ざっくり「何度も使い回すものはショートコード」「そのページだけの装飾はブロック」と決めておくと、迷う時間が減ります。

ブロックを優先したほうがいい場面

反対に、ブロックのほうが向いている場面もあります。

装飾ボックスをそのページだけで使うとき
見出し・段落・画像などを柔軟に組み合わせてレイアウトしたいとき
後からデザインの雰囲気を変える可能性が高いとき

このあたりをショートコードでやろうとすると、属性が増えすぎてかえって分かりにくくなります。SWELLのブロックは見た目を確認しながら調整しやすいので、「見た目を詰めたいところはブロック」と割り切ってしまったほうが、最終的には時短になります。

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

実際に10万稼いだキーワード
今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

ショートコードの使い方がうまくいかないときのチェック

ごとう

ここでは、実際に私もつまずいたことのあるトラブルと、そのときに見直しているポイントをまとめます。表示がおかしいときのチェックリストとして使ってください。

ショートコードが文字列のまま表示されるとき

ショートコードを書いたのに、画面になどの文字がそのまま出てしまう場合は、次のどれかに当てはまっていることがほとんどです。

症状	よくある原因	対処のヒント
かっこごと文字として出てしまう	かっこが全角になっている	半角の [ ] で打ち直す
属性のところだけ色が変わっている	idやクラス名の引用符が抜けている	id=”1″ のように、” まで含めて半角で入力
何も表示されない	指定したidのブログパーツや広告タグが存在しない	管理画面側でIDが合っているか確認