※ 本記事は2024年12月の記事をリライトしました。
WordPressテーマ『SWELL』、使い始めたばかりだとブロックの多さに「どこから手をつければ…」と戸惑いませんか？私も最初はそうでした。
このブログ「秘亭のネタ」でSWELLを3年使い続けてきた経験をもとに、全ブロックと便利機能をまとめました。活用例はもちろん、設定で実際に詰まった場面と解決策も一緒に載せています。
SWELLってどんなテーマ？ブロックを使う前に
SWELLの大きな特徴は、細かいカスタマイズがプラグイン不要でテーマ内だけで完結できること。他のテーマではCSSをいじったりプラグインを探したりと手間がかかる場面でも、SWELLならサイドバーからサクッと設定できます。
「おしゃれなブログを作りたいけど、コードはわからない」という方に特に向いています。私自身、AFFINGER6から乗り換えて最初に感じたのは「設定画面がこんなに直感的でいいの？」という驚きでした。
ブロックの挿入方法：まずはここから
ブロックの追加は、慣れてしまえば数秒でできます。手順はシンプルです。
- 投稿や固定ページの編集画面を開く
- ブロックを追加したい位置をクリック
- 表示される「＋」アイコンをクリック（画面上部のツールバーにもあります。下の赤枠を参照）
- ブロック一覧から使いたいブロックを選択
ブロック名がわからないときは検索バーが便利。名前の一部を入れるだけで候補が絞られます。
挿入したブロックはドラッグ＆ドロップで並べ替えられ、右サイドバーでデザインも調整できます。直感的に操作できるので、最初の「壁」さえ越えれば後は楽しくなってきますよ。
初心者にもおすすめのSWELL専用ブロック＆機能
1. フルワイドブロック｜トップページをおしゃれにする定番
画面の横幅いっぱいに広がるセクションを作れるブロックです。背景画像＋テキストの組み合わせが映えます。
トップページのファーストビューや、記事内のセクション区切りに使うと一気に「ちゃんと作ったサイト感」が出ます。私はトップページのデザインにフル活用しています。
Open in Autumn
背景画像を設定してパララックス効果を追加できます。
波（上部）・波（下部）
パラックス効果の設定
ブロックデザインの編集はここで
色や境界線の設定は、ブロックを選択して右サイドバーの編集メニューから変更できます。「なんか雰囲気変えたい」というときに、コードを触らずにできるのが地味にありがたい。
2. ブログパーツ｜一度作ればどこでも使い回せる
定型文やデザインを一度登録しておくと、ボタン一つで呼び出せる機能です。アフィリエイトの紹介文やキャンペーン情報など、複数の記事にまたがって使うものを登録しておくと作業がぐっとラクになります。
私が特に便利だと感じたのは一括更新ができること。案件の内容が変わったとき、登録内容を1か所直すだけで全記事に反映されます。これ、知らないと手動で全記事修正する羽目になるんですよね……（経験談）。
ブログパーツで動画編集ソフトの「PowerDirector」のアフィリエイトバージョンを作ってみました。
ブログパーツのコードを貼り付けると、この編集画面は、こんな感じ。
実際の表示はこちら⬇️
PowerDirectorの最新バージョンで、映像編集がもっと楽しくなります！
新機能を使って、編集の技術を向上させながら、オリジナルな映像作品を作ってみませんか？
最新の体験版はこちらをクリックして公式サイトでご確認ください。
ブログパーツの設定場所
管理メニューの「ブログパーツ」から、通常の投稿と同じように作成・編集できます。呼び出したい内容をエディターで自由に作っておけばOKです。
呼び出しコードを記事に貼るだけで表示されます。一度やってみると「あ、こういうことか」とすぐわかります。
3. SWELLボタンブロック｜クリックしたくなるボタンが作れる
プラグインもCSSも不要でデザイン性の高いボタンが作れます。広告コードを直接貼り付けられるうえ、クリック数の測定機能まで搭載されているのがポイント。丸くしたり光らせたり、色を自由に変えることもできます。
「アフィリエイトリンクをボタンにしたいけど、どうするの？」という悩みがこれ一つで解決します。
ちょっと押してみてくださいね♪
この機能、プラグインもCSSもいらないのがほんとに嬉しいんです。
SWELLボタンブロックの入力画面
4. ステップブロック｜手順説明が見違えるほどわかりやすくなる
①②③と番号付きで手順を整理できるブロック。料理やDIY、パソコンの操作説明など、順番が大事な記事に特に向いています。
シンプルな箇条書きより「流れ感」が出るので、読者が迷わずついてきやすくなるのがいいですね。
例として、卵焼きを作る手順で試してみます。
himeteiまずはボウル、フライパン、菜箸を用意しましょう。
卵を2個割り、ボウルに溶きほぐす。（勢いよく混ぜすぎると泡が立つので注意！）
みりん、醤油、塩少々を加えて混ぜる
卵液を少し流し込み、菜箸で大きく混ぜながら薄焼きにする。
端から巻き始め、奥まで巻く
卵が半熟になったら、端からゆっくり巻く。（巻くのが下手でも気にしない。後で整えたらOK。）
ステップが増やせないときの対処法
ステップを追加しようとしたら、数字が増えずに「親と子の括り」になってしまった——これ、私もハマりました。
本来はステップの下に大きな「➕」ボタンが出るはずなのですが……。
追加ボタンが閉じた状態で横の「➕」を押すと、こんなことに。
こうなったら、追加で出てきたブロックエリアをいったん削除してみてください。
ステップブロックのエリアを再度クリックすると、正しい「＋」ボタンが現れて、そこから新しいステップを追加できるはずです。
5. FAQブロック｜SEO効果も狙えるQ&Aコーナーが簡単に作れる
よくある質問をQ&A形式でまとめられるブロックです。構造化データとしてGoogleに認識されやすく、SEO効果も期待できます。
サービスページや商品ページの末尾に置くと、読者の「あの疑問」を先回りして解消できます。
- 発送までどのくらいかかりますか？
-
通常、2～3営業日以内に発送いたします。
- 注文内容を変更したいのですが、どうすればよいですか？
-
ご注文確定前の場合は、マイページから変更が可能です。ご注文確定後は、お電話またはメールにてお問い合わせください。
「問い」のQが自動で太字になるのが地味に便利です。「➕」をクリックするだけでQ&Aのセットが増やせます。
6. 広告タグブロック｜広告を一括管理できる地味に最強の機能
複数の記事で使う広告リンクを一か所で管理できる機能です。ショートコードで呼び出す仕組みなので、記事ごとに貼り直す手間がありません。
案件が終了したり、リンク先が変わったりしたとき——ダッシュボードで1回直すだけで全記事に反映されます。アフィリエイト運営に慣れてくると、この機能の恩恵をじわじわ感じてきます。
広告タグブロックの設定場所
管理メニューの「ブログ広告」から登録・編集ができます。わかりやすい名前をつけておくと、後で探すときに迷いません。
7. テーブルブロック｜エクセル感覚で比較表が作れる
セルの統合や分割ができるテーブルブロックです。商品やサービスを横並びで比較したいとき、箇条書きよりもずっと見やすくなります。
レビュー記事の「スペック比較表」に使うと、読者がパッと判断しやすくなりますよ。
| 商品名 | 価格 | 特徴 |
|---|---|---|
| 商品A | 2,000円 | 初心者向け |
| 商品B | 3,500円 | 上級者向け |
8. アコーディオンブロック｜開閉できる「たたみコンテンツ」
クリックで開閉するコンテンツを作れるブロックです。補足情報や長めの説明を「たたんで」おけるので、ページがスッキリします。
「▼」をクリックすると開きますよ。試してみてください。
前菜
本日の前菜は、シェフ自慢のテリーヌです。旬の鴨肉をふんだんに使用し、フォアグラの濃厚な風味とパンの香ばしい食感が絶妙に調和した一品です。
メインディッシュ
本日のメインディッシュは、鮮魚と車海老のポワレです。白ワインソースと季節の野菜を添えて、素材の旨みをシンプルに引き出しました。
SWELLならではの便利ブロック機能
9. カードリンクブロック｜URLを貼るだけで関連記事がおしゃれに表示される
URLを貼り付けるだけで、アイキャッチ画像付きのリンクカードが自動生成されます。文字だけのリンクより断然クリックされやすくなります。
赤い点線の枠にURLを貼り付けるだけ。これだけでカードが完成します。
10. 吹き出しブロック｜会話形式で読者を引き込む
プラグインもCSSも使わず、会話形式の文章が作れるブロックです。登場人物を設定しておけば、読者がナチュラルに対話の中に引き込まれやすくなります。
突然ですが、聞いてほしいことがあります。
何ですか？
吹き出しブロックの便利なところ
吹き出しの形を「発言」「心の声」などから選べます。状況に合わせて使い分けると、記事のテンポがぐっとよくなります。
11. バナーリンクブロック｜写真×テキストで視覚的に誘導できる
画像とテキストを組み合わせたバナー型のリンクを作れるブロックです。「文字だけのリンクよりクリックされやすくしたい」という場面で活躍します。
バナーリンクブロックの好きなところ・気になるところ
- 背景色・文字色・サイズを自由に設定できるのが◎
- フォントの大きさや種類が選べないのはちょっと残念。バージョンアップに期待！
himetei紫川ラーメンのお店のリンクを貼りました。
12. ボックスメニューブロック｜アイコン付きメニューでナビゲーション感UP
複数のリンクをアイコン付きのボックス形式で並べるブロックです。カフェのメニューページや、カテゴリ一覧ページのナビゲーションに使うとぐっと見やすくなります。
ボックスメニューブロックの気になる点
固定ページのトップメニューでは問題なく使えたのですが、投稿ページでは画像読み込みがうまくいかないことがありました。画像が小さく表示されてしまうことも。バージョンアップで改善されることを期待しています。
himeteiレイアウトをしっかり組みたいなら「リッチカラム」ブロックのほうが使いやすいと思います。
13. キャプションボックスブロック｜タイトル付きのおしゃれなボックスを作れる
キャプション（見出しラベル）付きのボックスを作れるブロックです。（ボックス内にさらにブロックを配置できます）
「注意事項」「ポイント」「〇〇のコツ」といったラベルをつけておくと、読者がパッと重要情報を見つけられます。旅行記事やレビュー記事で特に活躍するブロックです。
オンラインストアで「期間限定セール中！」のキャプションを目立たせてクリックを誘導するのも面白い使い方です。
himetei⬆️この商品、字に自信がない方に本当におすすめです。私も「のし袋の文字が…」とずっと悩んでいて、思い切って買いました。
7つのスタイルから選べます
14. リッチカラムブロック｜2カラム以上のレイアウトが簡単に作れる
2カラム以上の横並びレイアウトを作れるブロックです。画像とテキストを左右に並べたり、商品の特徴を比較したりと用途が広い。このブログのトップページのデザインにも使っています。
当ブログ「秘亭のネタ」トップページのレイアウトに使っています。
15. 説明リストブロック｜用語集や仕様一覧をスッキリ見せる
キーワードと説明をペアで並べるブロックです。箇条書きよりも「対応関係」が視覚的にわかりやすく、用語集や製品スペック、FAQ的な使い方に向いています。
AI用語集を例にするとこんな感じです。
- AI
-
Artificial Intelligenceの略。人工知能のこと。
- 機械学習
-
コンピュータが大量のデータからパターンを学習し、予測や分類を行う技術。
- 深層学習
-
機械学習の一種で、人間の脳の神経回路を模倣したニューラルネットワークを用いる。
- 自然言語処理
-
コンピュータが人間の言葉を理解し、生成する技術。
スタイルは4種類から選べます。記事の雰囲気に合わせてどうぞ。
16. タブブロック｜複数の情報をコンパクトにまとめる
タブをクリックして情報を切り替えられるブロックです。レビュー記事でスペック・評価・口コミを1つのコンパクトなエリアに整理したいとき、特に重宝します。
タブをポチポチ押してみてください。
CPU: Core i7
メモリ: 16GB
ストレージ: 512GB SSD
ポチップ
スタイルは3種類から選べます。3つのスタイルが選べます。
17. 商品レビューブロック｜星評価付きのレビューが手軽に作れる
商品の評価を星付きとテキストで表示できるブロック。デザイン性の高いレビュー形式が、コードなしで簡単に作れます。
ガジェットのレビュー記事で「デザイン：★★★★☆ / 性能：★★★★★」といった形で詳細な評価を書くと、読者が比較しやすくなります。
商品レビューブロックを使っている記事はこちらです。
入力画面はこんな感じです。
18. リンク入りブロック｜リンク集を階層的にまとめられる
複数のリンクをリスト形式で整理して表示するブロックです。カテゴリ別にリンクをまとめたいときや、読者に複数のリソースを紹介したいときに便利です。
- 学習ブログで「おすすめ教材リンク集」をカテゴリ別に整理するのに向いています。
- 旅行ブログで「観光地・宿泊先・グルメ」のリンクをまとめて提示するのもよいですね。
19. ABテストブロック｜広告やCTAの効果を比較できる
2種類のコンテンツをランダムに表示して、どちらのクリック率が高いかを比べられるブロックです。「このボタン、本当に押されてる？」という疑問を検証するのに使えます。
編集画面はこんな感じです。
表示比率はサイドバーの「ブロック設定」から調整できます。
サイドバーの「ブロック設定」をクリックすると設定が出てきます。
20. 制限エリアブロック｜会員限定コンテンツを作れる
ログインしたユーザーや特定の条件を満たす読者だけに表示するコンテンツを作れるブロックです。有料記事や会員制サイトを運営している方に向いています。
ログインしたユーザーだけが閲覧できるエリアを、このブロック一つで設定できます。
制限エリアブロックの設定方法
ブロックを選択して、右上のカスタマイズ編集をクリックすると設定画面が開きます。
【まとめ】3年使って思うSWELLの一番の強み
SWELLを使い始めてから3年。正直、乗り換える前は「有料テーマってそんなに変わるの？」と半信半疑でした。でも使ってみたら、ブロック一つひとつの完成度の高さに驚きました。
一番のお気に入りは、プラグインに頼らずテーマ内で完結できること。CSSをゴリゴリ書かなくても、見た目のカスタマイズがここまでできるのはSWELLならではだと思います。
- 他のテーマと何が違うの？
-
他のテーマではCSSの編集やプラグインの追加が必要な場面でも、SWELLではサイドバーからその場で調整できます。「コードはちょっと…」という方に特に向いています。
乗り換えを検討している方は、こちらの記事も参考にどうぞ。AFFINGER6との比較も含めて書いています。
コメント