SWELLを導入したのに、ブロックエディターの使い方がよくわからない。
そう感じている人は多いと思います。
WordPressのブロックエディターは最初こそ戸惑いますが、慣れると記事作成のスピードが大幅に上がります。
特にSWELLはオリジナルブロックが充実しているため、使いこなすほど記事の見栄えと作業効率が向上します。
この記事では、SWELLのブロックエディターの基本操作からオリジナルブロックの使い方まで、初心者向けに解説します。
SWELLのブロックエディターとは
ブロックエディターはWordPressの標準エディターで、全てのテーマに共通の標準ブロック（コアブロック）が用意されています。
SWELLには豊富なオリジナルブロックがあり、さらにWordPressのブロックエディター標準のブロックの機能を拡張して使いやすくなっています。
つまりSWELLのブロックエディターは「WordPressの標準ブロック」と「SWELLオリジナルブロック」の2種類を組み合わせて使う形になります。
ブロックエディターの使い心地が素晴らしく、記事の執筆が快適になったと感じているユーザーが多いのもSWELLの特徴のひとつです。
画面の基本構成を理解する
SWELLのブロックエディターは大別すると3つのエリアに分かれます。
① トップツールバー
画面上部に表示される操作バーです。ブロックの追加・元に戻す・プレビュー・記事の公開などの基本操作がここに並んでいます。
② 編集エリア（メインエリア）
記事の本文を書くメインの場所です。ここにブロックを追加して記事を作っていきます。
③ 右側サイドバー
「投稿タブ」ではパーマリンク・カテゴリー・アイキャッチなどの設定を行います。
選択したブロックの詳細設定もここで行います。
ブロックの基本操作
ブロックを追加する
記事内の「+」ボタンをクリックすると、追加できるブロックの一覧が表示されます。
検索欄にブロック名を入力すると素早く見つけられます。
よく使うブロックはショートカットで追加することも可能です。
段落ブロックで「/」を入力すると、ブロック検索のメニューがその場に表示されます。
ブロックを移動・削除する
各ブロックの左側に表示される矢印アイコンをクリックするか、ドラッグして順番を入れ替えられます。
削除はブロックを選択してキーボードのDeleteキー、またはブロックのツールバーにある「⋮」→「削除」から行いましょう。
トップツールバーを固定する
エディターの右上にある「⋮」マーク→「トップツールバー」にチェックを入れると、ブロックツールバーが上部に固定されます。
これにより画面がスッキリして作業しやすくなります。慣れてきたらオンにすることをおすすめ！
よく使う標準ブロック
SWELLでもWordPressの標準ブロックは全て使えます。
まずよく使うものを押さえておきましょう。
段落ブロック
最も基本的なブロックで、通常の文章を書くために使います。
テキストを入力したらEnterキーで新しい段落が追加されます。
見出しブロック
h2・h3・h4などの見出しを追加します。
SEO的にはh2が最も重要で、記事の大きなテーマを表す見出しに使います。
画像ブロック
記事に画像を挿入します。
「メディアライブラリ」からアップロード済みの画像を選ぶか、直接ドラッグ&ドロップで追加できます。
リストブロック
箇条書きや番号付きリストを作ります。
読者が情報を整理しやすくなります。
テーブルブロック
表を作成します。
比較表や料金表などに使います。
SWELLオリジナルブロックの使い方
SWELLオリジナルブロックは22種類。
その中でも特に使用頻度が高いブロックを解説します。
① ふきだしブロック
キャラクターのアイコンと吹き出しを表示するブロックです。
読者との会話形式で記事に親しみやすさを加えられます。
「+」ボタンから「SWELL ふきだし」を選択して追加し、事前にSWELL設定でキャラクターを登録しておく必要があります。
詳しい設定方法はSWELLで吹き出しを使う方法の記事を参考にしてください。
おすすめの使い方
- 読者の疑問を先回りして会話形式で答える
- 重要なポイントを強調する
- 自分の体験談・意見を伝える
② ボタンブロック
SWELLのボタンは表示された回数やクリック率を測定することができます。
また、アフィリエイトコードをまるごとペーストできる機能も備わっており、デザインはノーマル・立体・キラッと・アウトライン・MOREボタンの5種類があります。
アフィリエイトリンクや内部リンクへの誘導に最も効果的なブロックです。
ボタンの設置例
- 記事のまとめ部分にConoHaやSWELLへの誘導ボタンを設置
- 関連記事への内部リンクボタン
- お問い合わせページへの誘導
③ 関連記事（ブログカード）ブロック
一般的にブログカードと呼ばれるカード状の記事リンクです。
記事内で他の記事を紹介するときに便利で、使い方が簡単でURLをペーストするだけで、サムネイル画像やタイトルなどを自動で取得して表示してくれます。
内部リンクはもちろん外部リンクにも対応しています。
内部リンクを視覚的に目立たせて、読者のブログ内回遊を促すのに効果的です。
④ 目次ブロック
記事の見出し構造から自動的に目次を生成します。
長い記事でも読みたい箇所へすぐにジャンプでき、ユーザビリティが向上します。
SWELLの目次ブロックはデザインもカスタマイズ可能です。
SWELL設定で目次の自動挿入をオンにしている場合は、このブロックを手動で追加する必要はなく、特定の位置に目次を表示させたいときに使います。
⑤ アイコンボックスブロック
アイコンとテキストを組み合わせた装飾ボックスです。
箇条書きや簡単な説明を、アイコンを添えてわかりやすく表示できます。
「メリット・デメリット」「注意点」「ポイント」など、特定の情報を目立たせたいときに便利です。
⑥ キャプション付きブロック
上部にキャプションのついたコンテンツを簡単に作成できるブロックです。
画像や表の上に説明文を付けたいときに使い、「手順1」「比較表」などのラベルを付けることで、記事の構成がよりわかりやすくなります。
⑦ ボックス装飾
SWELLでは段落ブロックとグループブロック用に数多くのボックスデザインを用意しています。
右サイドバーの「スタイル」パネルから、ワンタッチで様々なデザイン装飾を施すことができ、段落ブロックを選択した状態で右サイドバーの「スタイル」から様々なボックスデザインを適用できます。
よく使うボックスの種類
- 注意ボックス（赤系）：読者への警告や注意点
- チェックボックス（緑系）：メリットや推奨事項
- ポイントボックス（青系）：重要なポイントの強調
- 引用ボックス：公式情報や他者の言葉を引用するとき
記事作成を効率化するショートカット
ショートカットキーを覚えておくと作業効率がかなり上がります。
| ショートカット | 動作 |
|---|---|
| Ctrl + Z | 元に戻す |
| Ctrl + Shift + Z | やり直す |
| Ctrl + S | 下書き保存 |
| / | ブロック検索メニューを表示 |
| Ctrl + B | 太字 |
| Ctrl + I | イタリック |
| Ctrl + K | リンクを挿入 |
特に「/（スラッシュ）」でその場でブロック検索ができるショートカットは覚えておくと便利です。
記事公開前に確認すること
ブロックエディターで記事を書いたら、公開前に以下を確認しましょう。
右サイドバーの設定確認
- パーマリンク（スラッグ）が英数字で設定されているか
- カテゴリーが正しく選択されているか
- アイキャッチ画像が設定されているか
- メタディスクリプションが入力されているか（SWELL設定のSEO欄）
プレビューで確認する
右上の「プレビュー」ボタンから、PC・スマートフォン両方で表示を確認しましょう。
ブロックエディターで見えている状態と、実際の公開画面では見た目が異なることがあります。
よくある質問
Q. ブロックエディターとクラシックエディターどちらがいいですか？
SWELLはブロックエディターに完全対応しており、オリジナルブロックもブロックエディター前提で設計されています。
SWELLを使う場合はブロックエディターを使うことをおすすめします。
Q. ブロックを誤って削除してしまいました。元に戻せますか？
Ctrl + Z（Mac：Command + Z）で元に戻せます。
ブラウザを閉じてしまった後は復元できないため、こまめに下書き保存（Ctrl + S）する習慣をつけましょう。
Q. スマートフォンでブロックエディターは使えますか？
使えますが、PC・タブレットと比べると操作しにくい場面があります。
記事の執筆はPCで行うことをおすすめします。
まとめ
SWELLのブロックエディターの使い方をまとめます。
- 「/」ショートカットでブロックを素早く追加する習慣をつける
- ふきだし・ボタン・ブログカードなどオリジナルブロックを積極的に使う
- ボックス装飾で重要な情報を視覚的に強調する
- 公開前にパーマリンク・カテゴリー・アイキャッチ・メタディスクリプションを確認する
- PC・スマートフォン両方でプレビューして見た目を確認する
SWELLのブロックエディターは、使えば使うほど記事作成が速くなります。
最初は慣れるまで時間がかかっても、1〜2週間使い続けることでスムーズに操作できるようになります。
コメント