「SWELL ブロックエディタの使い方がよく分からない…」
「思いどおりにデザインできない…」
と悩んでいませんか？
特に初心者の方にとって、ブロックエディタの操作は最初の大きな壁になりがちです。
でも安心してください。
この記事では、SWELL ブロックエディタの基本操作から応用テクニックまで、分かりやすく丁寧に解説します。
この記事を読めば、あなたが知りたい答えがきっと見つかります。
効率よく記事作成を進め、理想のサイトを実現するためのヒントを手に入れましょう。
ブロックエディターとは
ブロックエディター（Gutenberg）とは、2018年のWordPress5.0から採用されているエディターで、ブロックを組み合わて記事を書いていくので「ブロックエディター」と呼ばれています。
たとえば、こんな記事があったとして▼
実際は以下のようなブロックで構成されてます▼
WordPress共通のブロックエディターの基本的な使い方は、以下の記事で参考にどうぞ。
本記事では、ブロックエディターの基本的な使い方に加え、WordPressテーマのSWELLにおけるブロックエディターの使い方も紹介します。
ブロックエディターの画面構成
SWELLのブロックエディターは、大別すると3つのエリアに分かれます。
- トップツールバー
- 右ツールバー
- メインコンテンツエリア
構成1：トップツールバー
トップツールバーは、「ブロック追加」「元に戻す」「プレビュー」「記事公開」といった基本項目が並ぶエリア。
以下のように、デフォルトだとブロックツールバーはブロックのすぐ上部に表示されます。
エディターの右上にある「⋮」マーク＞「トップツールバー」にチェックを入れます。
すると、ブロックツールバーが上部に固定されるようになります。
この状態をトップツールバーと呼びます。
お好みで設定してください。
構成2：右ツールバー
右ツールバーは「投稿タブ」と「ブロックタブ」の２つに分かれます。
投稿タブ
「投稿タブ」では、パーマリンク（URL）、カテゴリー、アイキャッチなどの設定を行います。
ブロックタブ
「ブロックタブ」ではボックス装飾、テキストカラー、フォントサイズ変更などが行えます。
構成3：メインコンテンツエリア
記事本文を入力して、記事作成を行うエリアです。
ブロックエディターで記事を公開するまでの4ステップ
SWELLブロックエディターを使って記事を公開するまでの流れを紹介します。
- タイトル入力
- 本文作成
- 投稿設定
- 記事公開
ステップ1：タイトル入力
まず、「タイトルを追加」となっている箇所をタップして、タイトルを入力します。
ステップ2：本文入力
続いて、メインエリアで本文や画像などを入力していきます。
上記の部分に「文章」「見出し」「画像」など、様々なブロックを組み合わせて記事を作成していきます。
以下はSWELL公式サイトによる動画。記事作成のイメージをざっとつかみたい方は参考にどうぞ。
ステップ3：投稿設定
タイトル、記事本文の入力が完了したら「投稿設定」をします。
設定する主な項目は、
- アイキャッチ画像
- URL(パーマリンク)
- カテゴリー
アイキャッチ画像設定
右ツールバーにある「アイキャッチ画像を設定」をクリックし、アイキャッチ画像に使う画像を設定します。
アイキャッチ画像って何？という方は、以下の記事をご覧ください。
URL(パーマリンク)設定
URL（パーマリンク）は、記事のURLの一部を構成するもの。
入力欄に任意の文字列を入力します。記事の内容を簡潔に表した英語にしておくのがおすすめ。
カテゴリ設定
記事のカテゴリを設定します。
右ツールバーにある「カテゴリー」内の中から、記事に適したカテゴリを選びます。
ステップ4：記事の公開
最後に、トップツールバーの「公開」をクリックします。
これで記事の投稿が完了です。
以上、ブロックエディターでの記事作成の流れを紹介しました。
ブロックエディターの基本的な使い方
続いて、ブロックエディターの基本的な使い方を紹介します。
特によく使う使い方は以下のとおり。
- ブロックの追加
- ブロックの移動
- ブロックの削除
- ブロックのコピー
- ブロックのグループ化
ブロックの追加
ブロックの追加方法は以下の3つの方法があります。
- トップツールバーの「＋」から追加
- メインコンテンツエリアの「＋」から追加
- 「/」を入力して追加
順に見ていきましょう。
方法1：トップツールバーの「＋」から追加
方法2：メインコンテンツエリカの「＋」から追加
ブロックが6個表示されるので、使いたいブロックがあれば選びます。
もし使いたいブロックがなければ、検索ボックスから検索するか、「すべてを表示」をクリックします。
ステップ2で「すべてを表示」をクリックした場合は、左メニューにブロック一覧が表示されるので、その中から選びます。
方法3：「/」を入力して追加
段落ブロックで「/+ブロック名」を入力するだけで、ブロックを追加できます。
たとえば、「/heading」と入力すると見出しブロックを簡単に呼び出せます。
「/見出し」のように日本語でもOK。
主要なブロックを呼び出すための英字キーワードを以下にまとめておきます。
| ブロック名(コアブロック) | キーワード |
|---|---|
| 見出し | /heading |
| リスト | /list |
| 画像 | /image |
| ボタン | /buttons |
| 表 | /table |
| カラム | /columns |
| スペーサー | /spacer |
| グループ | /group |
| ブロック名(SWELLブロック) | キーワード |
|---|---|
| ふきだしブロック | /ballon |
| SWELLボタンブロック | /button |
| キャプションブロック | /cap |
| フルワイドブロック | /fullwid |
| 関連記事ブロック | /blogcard , /postlink |
| ステップブロック | /step |
| 投稿リストブロック | /postlist |
| タブブロック | /tab |
| アコーディオンブロック | /accordion |
| 説明リストブロック | /dl |
| リッチカラムブロック | /rich-columns |
| 制限エリアブロック | /restrict-area |
上記のキーワードを含め、便利なショートカットは以下をご覧ください。
ブロックの移動
移動させたいブロックの横をクリックすると、選択した状態になります。
今回は例として上に移動させるので、上のマークをクリックします。
すると、ブロックを上に移動できます。
ブロックの削除
すると、削除したいブロックが消えます。
ブロックのコピー
すると、コピーされます。
ブロックのグループ化
グループ化を行うことで、グループ単位での装飾や移動ができるようになります。
すると、選択した箇所がグループ化されます。
ヒデハルグループ化すると、グループ単位での装飾や移動ができるようになります。
SWELLのブロックエディター機能を把握する
ここまでWordPress標準のブロックエディターの使い方を説明してきました。
ここからは、SWELLオリジナルの機能を紹介します。
SWELL ブロックエディタとは？特徴を解説
SWELL ブロックエディタは、初心者でも直感的に使えるWordPressテーマ専用の編集ツールです。
まず、SWELLはシンプルで高速なテーマとして知られ、特にブロックエディタとの相性の良さが特徴です。
Gutenbergの標準機能に加え、SWELL独自のオリジナルブロックが用意されているため、デザイン性の高いページが簡単に作成できます。
さらに、クリック操作が中心で、コードの知識がなくてもプロ並みの仕上がりを実現できます。
たとえば、見出し・ボタン・ふきだし・FAQなどの要素は、すべて「ブロック」として用意され、必要なものを選んで配置するだけ。
この仕組みを理解することで、あなたの記事作成の幅は大きく広がります。
重要なのは、「ブロックを組み立ててページを作る」という発想です。
SWELL ブロックエディタと他テーマの違い
SWELL ブロックエディタの特徴は、標準のWordPressテーマや他社テーマと比べても群を抜いています。
他テーマ（例：Cocoon、JIN、THE THOR）と比べると、SWELLは「純正ブロックエディタに完全対応」しており、プラグイン不要で多彩な装飾が可能です。
つまり、追加ツールに頼らずにシンプルな構成で強力なデザインが作れるってこと。
また、表示速度の最適化やSEO対策もデフォルトで組み込まれており、初心者でもプロ並みの成果が出せます。
他テーマから乗り換えると、その使いやすさとスピードに驚く方が多いです。
他テーマと比べたときのSWELLの秀逸さを詳しく知りたい方は以下をご覧ください。
ブロックが表示されないときの対処法
SWELL ブロックエディタでブロックが表示されない場合は、テーマやプラグインの競合が原因のことが多いです。
まず確認すべきは、WordPress本体・SWELLテーマ・使用中のプラグインがすべて最新バージョンかどうかです。
古いバージョンのままだと、表示の不具合が発生しやすくなります。
次に、プラグイン同士の競合が疑われる場合は、一度すべてのプラグインを停止し、問題が解消するか確認しましょう。
その後、1つずつプラグインを有効化していき、原因を特定します。
SWELLで推奨のプラグインは以下にまとめているので参考にしてください。
また、キャッシュやブラウザの問題も見逃せません。
キャッシュを削除し、シークレットモードで再確認することで、解決することがあります。
SWELLオリジナルのブロックエディターの機能
SWELLで使えるブロックエディターの公式マニュアルは以下です。
SWELLオリジナルのブロックエディターの機能を大別すると以下の3つ。
順に見ていきましょう。
SWELLオリジナルのブロック21個
SWELLオリジナルのブロックの使い方を紹介します。
以下はSWELL公式サイトによる使い方の紹介動画。使い方のイメージをざっとつかみたい方はご覧ください。
以下は本章で紹介するブロック。クリックするとジャンプします。
| キャプションボックス | ふきだし | SWELLボタン |
| FAQ | アコーディオン | ステップ |
| タブ | 関連記事 | ブログパーツ |
| 説明リスト | バナーリンク | 広告タグ |
| ABテスト | フルワイド | 投稿リスト |
| RSS | リッチカラム | 制限エリア |
| ボックスメニュー | 商品レビュー | リンクリスト |
では順に見ていきましょう。
キャプションボックスブロック
キャプションボックスブロックは、キャプション(短い説明文やタイトル)がついたボックスを作成できる機能。
例1
- 使いやすく、記事執筆を時短できる
- 専門知識ゼロでもブログをおしゃれにできる
- カスタマイズ性が高く独自デザインにできる
例2
- SEO対策が万全。検索上位表示に有利になる
- マニュアルが充実。トラブルに対応しやすい
- 最新のブロックエディタに完全対応している
SWELLのキャプションボックスブロックは以下のメリットがあります。
- 文章だけでなく、リストや画像も配置できる
- カラーや形などスタイルを柔軟に変更できる
- スタイルを事前に設定、一括変更できる
- キャプションにアイコンを設定できる
キャプションボックスブロックの形やカラーは管理画面から一括で設定できます。
詳しくは公式マニュアルをご覧ください。
ふきだしブロック
ふきだしブロックはふきだしを作成できるブロック。
SWELLのふきだしブロックはメチャ便利！
ヒデハルこんな感じでオシャレだし
ヒデハル左右の位置を選択できるし
ヒデハル吹き出しの色や枠線を変更できるし
ヒデハルアイコンも変更できる
ふきだしは、WordPress管理画面の「ふきだし」から事前に登録できます。
詳しくは公式マニュアルをご覧ください。
SWELLボタンブロック
SWELLボタンブロックは、SWELL専用のブロック作成機能。
WordPress側にも「ボタンブロック」がありますが、SWELLボタンブロックは機能が拡張されていて、超便利。
例1
例2
SWELLボタンは以下のようなメリットがあります。
- カラーや形などスタイルを柔軟に変更できる
- テキスト型の広告タグを改変せずに貼り付け可
- クリック率を計測できる
- アイコンを設定できる
ボタンの形やカラーは管理画面から一括で設定できます。
詳しくは公式マニュアルをご覧ください。
FAQブロック
FAQブロックは、「よくある質問」のようなQ&Aを簡単に設置できるブロックです。
例1
- おすすめのWordPressテーマは何？
-
SWELLです。
- SWELLは有料ですか？
-
はい。買い切りで17,600円です。
例2
- おすすめのWordPressテーマは何？
-
SWELLです。
- SWELLは有料ですか？
-
はい。買い切りで17,600円です。
SWELLのFAQブロックは、以下のメリットもあります。
- 構造化データを出力できるの
- 質問テキストを見出しにできる
詳しくは公式マニュアルをご覧ください。
>>【SWELLブロック】Q&Aを簡単に設置！FAQブロックの使い方
アコーディオンブロック
アコーディオンブロックは、サイト訪問者のクリックやタップの操作で自由にコンテンツを開閉できるブロックです。
例
ここをクリックしてみてね！
ヒデハルこれが「アコーディオンブロックです」
長文の補足説明など、ふだんは隠しておいて、みたい人だけアコーディオンを開いて読むといった使い方ができます。
SWELLのアコーディオンブロックは、以下のメリットがあります。
- キーボードでアコーディオンの開閉ができる
- ページ内検索でアコーディオン内部のテキストもヒットする
詳しくはSWELL公式マニュアルをご覧ください。
ステップブロック
ステップブロックは、手順の解説などに便利なブロックです。
例1
ここにテキストを入力
ここにテキストを入力
ここにテキストを入力
例2
ここにテキストを入力
ここにテキストを入力
ここにテキストを入力
詳しくはSWELL公式マニュアルをご覧ください。
タブブロック
タブブロックは、複数のコンテンツを並列に配置し切り替えながら表示できるブロックです。
比較記事などにも活躍します。
例
SWELLのタブブロックは以下の特徴があります。
- タブのスタイルを3種類から選択できる
- タブのサイズをデバイスごとに設定できる
- 最初に開くタブを指定できる
関連記事ブロック
関連記事ブロックは、関連する記事のリンクをカード形式で表示できる機能。
「ブログカード」と呼ばれたりもします。
この関連記事ブロックでは、内部リンクはもちろん外部リンクも設置可能。
例：内部リンク
例：外部リンク
ブログカードの表示スタイルは、管理画面から設定できます。
詳しくは以下の公式マニュアルをご覧ください。
>>【SWELLブロック】関連記事ブロックで簡単にブログカード作成！
ブログパーツブロック
ブログパーツブロックは、よく使うブロックや定型文をあらかじめ登録しておくことで、簡単に使いまわせる機能です。
ブログパーツブロックはWordPressの標準機能「パターン」と基本的な機能としては同じ。
しかし、SWELLのブログパーツは以下のメリットがあります。
- ショートコード化して使うこともできるのでウィジェットなどにも挿入できる
- メインビジュアルやカテゴリーページのカスタマイズでも活躍
たとえば、ボックスメニューをサイドバーに設置するときは、ブログパーツを使います。
ショートコード化して呼び出せるから。手順は以下をご覧ください。
なお、ブログパーツを作成・編集しようとすると、「wp-revisions-controlプラグインでエラーが発生したためレンダリングできません。」というメッセージがでることがあります。
あまり気にする必要はありませんが、気になる方は以下の記事をご覧ください。
ブログパーツブロックの詳細は以下の公式マニュアルをご覧ください。
>>登録したコンテンツを自由に呼び出せる「ブログパーツ」機能
説明リストブロック
説明リストブロックは、項目と項目に対する説明をセットで表示できる機能。
例1
- ドメイン
-
インターネット上でWebサイトやメールアドレスの「住所」を表す文字列。
- レンタルサーバー
-
インターネット上にWebサイトやメールアドレスなどのサービスを提供するために必要なサーバーを、業者から借りて利用するサービス。
- WordPress
-
Webサイトやブログを簡単に作成・管理できる、無料のCMS (コンテンツマネジメントシステム)。
例2
- ドメイン
-
インターネット上でWebサイトやメールアドレスの「住所」を表す文字列。
- レンタルサーバー
-
インターネット上にWebサイトやメールアドレスなどのサービスを提供するために必要なサーバーを、業者から借りて利用するサービス。
- WordPress
-
Webサイトやブログを簡単に作成・管理できる、無料のCMS (コンテンツマネジメントシステム)。
SWELLの説明ブロックは以下のメリットがあります。
- スタイルを4種類から選択できる
- 説明欄(ddタグ)部分にはブロックを自由に挿入できる
バナーリンクブロック
バナーリンクブロックは、画像の上に文字を入力してリンクを設定できるブロックです。
バナーリンクブロックを使えば、オシャレな見た目のバナーを設置できます。
例
広告タグブロック
広告タグブロックは、広告タグ管理機能で登録した広告を記事内に呼び出せるブロック。
広告タグ管理機能と広告タグブロックを組み合わせると、広告をかんたん設置でき、クリック率も計測できて便利。
詳しくは公式マニュアルをご覧ください。
ABテストブロック
ABテストブロックは、読者に表示される内容を2パターン用意して、ランダム表示ができるブロックです。
このABテストを使って、広告の効果測定ができます。
ABテストブロックの詳細は以下をご覧ください。
フルワイドブロック
フルワイドブロックは画面の横幅全体を使って背景画像や背景色を設定できる機能。
SWELLのフルワイドブロックは、サイトをオシャレにカスタマイズするってときに便利。
特に、トップページの作成時に活躍します。
例1
さぁ、SWELLでブログを始めよう。
例2
さぁ、SWELLでブログを始めよう。
SWELLのフルワイドブロックは以下の特徴があります。
- 背景に画像や塗りつぶしを適用できる
- ブロック上下の境界線の形状を変更できる
詳しくは公式マニュアルをご覧ください。
投稿リストブロック
投稿リストブロックは、投稿の一覧を表示することができるブロックです。
トップページやカテゴリーページなどを作りこむときに活躍します。
例1
例2
SWELLの投稿リストブロックは、
- 表示スタイル
- 表示順
- 表示条件
を細かく設定できるので便利です。
RSSブロック
RSSブロックでは、RSSフィードのリストをSWELLのデザインに合わせた形で最大10件まで表示してくれる機能。
このRSSブロックで設定できる内容は、上述した「投稿リストブロック」と似てます。
以下は、私の別サイトの記事を表示させた例。
例
リッチカラムブロック
リッチカラムブロックは、WordPress標準のカラムブロックを強化した上位互換の機能。
いろんな表示形態のサイトを作る際に重宝します。
例
リッチカラムは以下のようなメリットがあります。
- デバイスごとの表示列数を柔軟に設定できる
- 余白設定も柔軟に調整できる
- CSSの編集不要
詳細は公式マニュアルの以下をご覧ください。
(リッチカラムブロックではなく、カラムブロックの説明ですが、機能は概ね同じですので)
制限エリアブロック
制限エリアブロックは、特定の期間だけブロックを表示したり、ユーザーごとにブロックの表示／非表示を切り替えたりできる機能。
特定の期間だけブロックを表示
例
上記のような期間限定セールを、指定の期間だけ表示できます。
手動で期間限定セールの情報を追記したけど、セール期間終了後に削除し忘れる・・・というミスを防げるのがメリット。
ユーザーごとにブロックの表示／非表示を切り替え
大きくは以下の2つの制限を指定できます。
- 非ログインユーザー
- ログインユーザー
ログインユーザーの場合は以下のようにさらに細く制限できます。
ボックスメニューブロック
ボックスメニューブロックは、アイコンとテキストが組み合わされたボックス型のリンクを簡単に作成できる機能。
サイトバーとかに置くと、それだけでクオリティーが高くみえます。
例1
例2
例3：サイドバーに設定
のサイドバーSWELLボックスメニューは以下のメリットがあります。
- レイアウトや列数を柔軟に変更できる
- 設定できるアイコンの種類が豊富
- アイコンは画像も設定できる
- アイコンやテキストのカラーやサイズを変更可
- ボックス同士の余白を調整できる
ボックスメニューの詳細は以下をご覧ください。
商品レビューブロック
商品レビューブロックは、レビュー用のボックスを作成できる機能。
評価用のスターマークやメリット・デメリットをおしゃれに作成できるので、レビュー記事で重宝します。
例
- 使いやすく、記事執筆を時短できる
- 専門知識ゼロでもブログをおしゃれにできる
- カスタマイズ性が高く独自デザインにできる
- 料金は安くはない
商品レビューブロックは以下のメリットがあります。
- 商品レビュー用のボックスを簡単かつオシャレに作成できる
- メリット・デメリットや星評価を構造化データとして出力できる
リンクリストブロック
リンクリストブロックは、その名のとおりでリンクのリスト。
リンク集や記事一覧をつくるときに便利。
例1
例2
リンクリストブロックは以下のメリットがあります。
- リストのデザインを2種類から選択できる
- リストのアイコンを4種類から選択できる
- リストを横並びにもできる
SWELLで強化されたWordPress標準ブロック
段落ブロック
記事を書く上で最も使用するブロックが段落ブロックで、文字入力に使う基本のブロックです。
SWELLでは、クリック操作だけで段落ブロックへの装飾が可能。
SWELLとWordPress標準の段落ブロックの設定項目を比較すると以下のとおり。
SWELL
標準
ヒデハルSWELLの段落ブロックの充実さがわかりますね！
詳しくは公式マニュアルをご覧ください。
グループブロック
グループブロックは複数のブロックをグループ化してくれるブロック。
SWELLのグループブロックはとても便利！
手順：
1. グループ化したいブロックを選択
2. 「⋮」マークをクリック
3. グループ化をクリック
すると、先ほどの段落ブロックで設定できる装飾の一部がグループブロックにも適用できます。
見出しブロック
見出しブロックは見出しを表示できるブロック。
SWELLの見出しブロックでは、2種類のスタイルを選択できます。
デフォルト
セクション用
デフォルトのスタイルは通常の記事で使用します。
セクション用のスタイルはフルワイドブロックと組み合わせてトップページで使うことが多いです。
詳しくは公式マニュアルをご覧ください。
見出しのデザインは以下の場所で変更できます。
WordPress管理画面＞「外観」＞「カスタマイズ」＞「投稿・固定ページ」＞「コンテンツのデザイン」
画像ブロック
画像ブロックは記事の中に画像を埋め込めるブロック。
WordPress標準の場合、画像ブロックのスタイルは2種類しかありませんが、SWELLの場合は7種類から選べます。
リストブロック
リストブロックは箇条書きが簡単に作れるブロック。
WordPress標準の場合、リストブロックのスタイルは2種類しかありませんが、SWELLの場合は8種類から選べます。
例
- これがリスト
- これがリスト
- これがリスト
- これがリスト
- これがリスト
- これがリスト
- これがリスト
- これがリスト
- これがリスト
それぞれのリストアイコンのカラーは管理画面から変更できます。
SWELLのリストブロック独自の機能として以下のような装飾もできます。
- 下線を付ける
- 横並び
詳しくは公式マニュアルをご覧ください。
テーブルブロック
テーブルブロックは表を作れるブロック。
WordPress標準の場合、テーブルブロックのスタイルは2種類しかありませんが、SWELLの場合は4種類から選べます。
また、SWELLのテーブルブロックは、WordPress標準だとできない機能がたくさんあります。
- 1列目をthタグ風に表示する
- 1列目を固定する
- 横スクロールできる
- 背景に記号に表示する
など。
例：横スクロール
| No | 項目1 | 項目2 | 項目3 | 項目4 | 項目5 | 項目6 |
|---|---|---|---|---|---|---|
| 1 | ここはテキスト | ここはテキスト | ここはテキスト | ここはテキスト | ここはテキスト | ここはテキスト |
| 2 | ここはテキスト | ここはテキスト | ここはテキスト | ここはテキスト | ここはテキスト | ここはテキスト |
例：背景に記号を入れる
| 商品A | 商品B | 商品C | |
| 機能A | 少し古い | 普通 | 最新機能 |
| 機能B | 非対応 | 制限付き | 使用可 |
| 性能A | 200 | 500 | 1000 |
| 性能B | 500 | 1000 | 800 |
詳しくはSWELL公式マニュアルをご覧ください。
SWELLで強化されたブロックツールバー
ブロックツールバーとは、任意のブロックを選択している時に、ブロック上部に表示されるツールバー。
WordPress標準の状態とSWELLのブロックツールバーを比較すると、以下のとおり。
SWELL
標準
ヒデハルSWELLの項目の多さが分かりますね！
ボタン位置のカスタマイズ機能
エディター右上にあるSWELLのアイコンをクリックすると、以下のような設定が出現します。
ここの設定によって、いくつかのボタンについて、表示の有無や位置を調節することが可能です。
テキストの装飾
WordPressの標準機能として、太字 や イタリック文字、取り消し線 などのテキスト装飾ができるようになっていますが、SWELLではこれらの機能をさらに強化されています。
マーカー線を引いたり、フォントサイズを調節したり、文字色を変えたり、といった様々なテキスト装飾がツールバーからサクッとできるようになっています。
テキストの装飾に使うブロックツールバーは以下の赤枠。
詳しくは公式マニュアルをご覧ください。
ブロック下の余白設定
ブロック下の余白量を設定して、行間を広げたり狭くしたりを簡単にできます。
詳細は公式マニュアルをご覧ください。
>>SWELLの各ブロックで使用できるレイアウト設定・上下の余白調節
PC、スマホの表示設定
PCだけで表示させたり、スマホだけで表示させたりを設定できます。
「デバイスコントロール」という機能で、以下で設定します。
PCだといい感じにレイアウトになっていたとしても、スマホだと見づらい、といったときにこの機能を使うとよいでしょう。
アイコン
アイコンがたくさん用意されています。
赤枠のアイコンマークをクリックして、アイコンを選択すればOK。
ショートコードの呼び出し
テキスト装飾だけでなく、SWELLで使える便利なショートコードを簡単に呼び出すためのツールボタンも用意されています。
- 記事内広告
- スマホだけ改行・PCだけ改行
- アイコン用ショートコード
- 評価用スター（）
- HTML挿入
などのショートコードを呼び出せます。
評価用スターの使い方は以下の記事をご覧ください。
カスタム書式
SWELLには書式セット機能というものがあります。
たとえば、”マーカー”+”太字”など、良く使う文字装飾の組み合わせを事前に作っておき、記事内で簡単に装飾できる機能です。
カスタム書式の設定方法
カスタム書式の使い方
すると、事前に設定した書式がすぐに反映されます。
ヒデハル時短になるので活用しましょう！
記事執筆で活躍する便利機能
ブロックエディターでコンテンツを作成するときの便利機能を紹介します。
- パターン
- ページ内リンク
- ポチップ(商品リンクプラグイン)
パターン
パターンは、よく使うブロックの組み合わせやレイアウトをあらかじめ登録しておき、エディター上で簡単に呼び出すことができる機能。
パターンを使うことで記事作成を効率化できます。
2023年8月9日にリリースされたWordPress6.3から、従来の「ブロックパターン」と「再利用ブロック」が統合されて『パターン』という名称に変更されました。
パターンは、同期する仕様と同期しない仕様の2種類あります。
- 同期するパターン (従来の再利用ブロック)
- 同期しないパターン (従来のブロックパターン)
同期するパターンは、パターンを編集すると、別の場所で使っている同じ同期パターンにも変更が反映されます。
非同期パターンはパターンを編集しても、他ページなどで使っている同じパターンに変更は反映されません。
同期させたいかさせたくないかによって、2つを使い分けましょう。
パターンの登録方法
作成したパターンを同期させるなら「同期」ボタンをオンにします。
同期させないなら「同期」ボタンをオフにします。
パターンの使い方
登録したパターンを使用する方法を紹介します。
ページ内リンク
ページ内リンクは、同じページ内の任意の箇所にリンクを設置できる機能。
たとえば、以下のリンクをクリックしてみてください。1章までジャンプします。
記事の中でうまくページ内リンクを活用すると、読者にとって見やすい記事になるので、ぜひ作り方を覚えておきましょう。
ページ内リンクの詳細は以下をご覧ください。
ポチップ(商品リンクプラグイン)
ポチップは、Amazonや楽天、Yahoo!などのリンクを作成、管理できるプラグイン。
ポチップを導入すれば、おしゃれな商品リンクを10秒でサクッと作成できます。
例
ポチップは無料のプラグインですが、機能が拡張された有料版のポチッププロもあります。
ポチッププロを導入すると以下のメリットがあります。
- セール情報を複数設定できる
- 商品画像を自由に変更できる
- セールイベントを自動で取得できる
- 設置したブロックごとにクリック率を計測できる
- お知らせバーにセール情報を表示できる（SWELLユーザーのみ）
上記の「お知らせバー表示機能」はSWELLとポチップの組み合わせのみで使用できる機能で、SWELLとの相性も抜群のプラグインです。
ポチップの使い方の詳細は以下をご覧ください。
まとめ｜SWELL ブロックエディタの使い方をマスターして効率的な記事作成を実現しよう
SWELLのブロックエディタの基本操作から応用テクニックまでを紹介しました。
SWELL ブロックエディタをしっかり理解し、活用することで、あなたの記事作成はぐっと効率化されます。
ぜひ今回紹介した基本・応用テクニックを試し、実際のサイト運営に役立ててください。
SWELLのデザインをカスタマイズしたい方は以下の記事を参考にどうぞ。
