![](https://hinakira.com/wp-content/uploads/2022/08/machiko悩み-1-150x150.png)
ブロックエディターの使い方がさっぱり分かりません・・・。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
OK。ブロックエディターの使い方を解説しますね。
SWELLにテーマを変えたけど、ブロックエディターの使い方が・・・。
といったお悩みがある方のために、ブロックエディターの使い方をできるだけ分かりやすく解説します。
なお、SWELL
それでは、まいりましょう。
![](https://hinakira.com/wp-content/uploads/2021/10/SWELL-REVIEW.png)
![](https://hinakira.com/wp-content/uploads/2021/10/SWELL-REVIEW.png)
ブロックエディターとは「積み木」のようなもの
![ブロックエディターは積み木](https://hinakira.com/wp-content/uploads/2022/08/ブロックエディター「積み木-1-1024x740.png)
![ブロックエディターは積み木](https://hinakira.com/wp-content/uploads/2022/08/ブロックエディター「積み木-1-1024x740.png)
ブロックエディター(Gutenberg)とは、2018年のWordPress5.0から採用されているエディターで、上記のように、ブロックを組み合わせるために「ブロックエディター」と呼ばれています。
- 見出しは「見出しブロック」
- 本文は「段落ブロック」
- 画像は「画像ブロック」
- 引用は「引用ブロック」
- リストは「リストブロック」
- テーブルは「テーブルブロック」
主に上記のようなブロックを組み合わせて記事を作成します。
言ってみれば、ブロックを積み上げていく「積み木」のようなものといえますね。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
ブロックエディターは、慣れるとサクサク記事作成ができますよ。
SWELLブロックエディターの「画面構成」
次にブロックエディターの画面構成について見ていきましょう。
![ブロックエディタ-画面構成](https://hinakira.com/wp-content/uploads/2022/08/ブロックエディターの-1-1024x591.png)
![ブロックエディタ-画面構成](https://hinakira.com/wp-content/uploads/2022/08/ブロックエディターの-1-1024x591.png)
SWELLのブロックエディターでは、大きく分けて3つのエリアに分けられます。
- トップツールバー
- 右ツールバー
- メインコンテンツエリア
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
ひとつずつ解説しますね。
①:トップツールバー
トップツールバーは、「ブロック追加」「元に戻す」「プレビュー」「記事公開」といった基本項目が並ぶエリアです。
![](https://hinakira.com/wp-content/uploads/2023/12/SWELLブロックエディタートップツールバーの説明-1024x148.png)
![](https://hinakira.com/wp-content/uploads/2023/12/SWELLブロックエディタートップツールバーの説明-1024x148.png)
WordPress管理画面(ダッシュボード)へ移動
②:右ツールバー
![](https://hinakira.com/wp-content/uploads/2023/12/右ツールバー-1024x637.png)
![](https://hinakira.com/wp-content/uploads/2023/12/右ツールバー-1024x637.png)
右ツールバーは「投稿タブ」と「ブロックタブ」の2つに分かれます。
右ツールバー「投稿」タブ
![](https://hinakira.com/wp-content/uploads/2023/12/投稿タブ-1024x641.png)
![](https://hinakira.com/wp-content/uploads/2023/12/投稿タブ-1024x641.png)
「投稿タブ」では、パーマリンク(URL)、カテゴリー、アイキャッチなどの設定を行います。
右ツールバー、「ブロック」タブ
![](https://hinakira.com/wp-content/uploads/2023/12/ブロックタブ-1024x635.png)
![](https://hinakira.com/wp-content/uploads/2023/12/ブロックタブ-1024x635.png)
「ブロックタブ」ではボックス装飾、テキストカラー、フォントサイズ変更などが行えます。
③:メインコンテンツエリア
記事本文を入力して、記事作成を行うエリアです。
![メインコンテンツエリア](https://hinakira.com/wp-content/uploads/2022/08/メインコンテンツエリア-1-1024x587.png)
![メインコンテンツエリア](https://hinakira.com/wp-content/uploads/2022/08/メインコンテンツエリア-1-1024x587.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
ここで文章を書いたり画像を入れたりしていきます。
SWELLブロックエディターの「記事公開までの5ステップ」
次に、SWELL
- タイトルを入力(メインコンテンツエリア)
- 本文の作成(メインコンテンツエリア)
- 投稿設定(右ツール「投稿」タブ)
- プレビューで確認(トップツールバー)
- 記事の公開(トップツールバー)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
上記の5ステップについて、やさしく解説します。
ステップ①:タイトルを入力
![ブロックエディタ-タイトル](https://hinakira.com/wp-content/uploads/2022/08/タイトルを入力-1-1024x400.png)
![ブロックエディタ-タイトル](https://hinakira.com/wp-content/uploads/2022/08/タイトルを入力-1-1024x400.png)
まず、「タイトルを追加」となっている箇所をタップして、タイトルを入力します。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
あとからでも変更できるので、ザックリとしたものでOKです。
ステップ②:メインエリアに本文を入力
続いて、メインエリアで本文や画像などを入力していきます。
![ブロックエディタ-本文](https://hinakira.com/wp-content/uploads/2022/08/本文の入力-1-1024x548.png)
![ブロックエディタ-本文](https://hinakira.com/wp-content/uploads/2022/08/本文の入力-1-1024x548.png)
上記の部分に「文章」「見出し」「画像」など、様々なブロックを組み合わせて記事を作成していきます。
記事作成の基本となる「文章入力」「画像挿入」「リスト作成」のやり方は以下のとおりです。
![段落ブロック](https://hinakira.com/wp-content/uploads/2022/08/段落ブロック-2-1024x646.png)
![段落ブロック](https://hinakira.com/wp-content/uploads/2022/08/段落ブロック-2-1024x646.png)
文章は「段落ブロック」に入力していきます。
![段落ブロックに文章入力](https://hinakira.com/wp-content/uploads/2022/08/段落ブロックに文章入力-1-1024x669.png)
![段落ブロックに文章入力](https://hinakira.com/wp-content/uploads/2022/08/段落ブロックに文章入力-1-1024x669.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
記事本文は、上記のように作成していきます。
続いて、文字入力すると出てくるメニュー「ブロックメニュー」の見方も解説していきます。
ブロックメニューの見方
ブロックエディターでは、文字を入力すると下記のような「ブロックメニュー」が出てきます。
見出し入力時のブロックメニュー
![ブロックメニュー](https://hinakira.com/wp-content/uploads/2022/08/ブロックツール-1-1024x418.png)
![ブロックメニュー](https://hinakira.com/wp-content/uploads/2022/08/ブロックツール-1-1024x418.png)
ブロックタイプまたはスタイルを変更したいときに使います。(文章を見出し、ふきだし、リストなどに変換可能)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
YouTubeでも解説しています
ステップ③:投稿設定をする
タイトル、記事本文の入力が完了したら「投稿設定」をします。
「アイキャッチ画像」「パーマリンク」「カテゴリー」といったものの設定ですね。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
それぞれ見ていきましょう。
アイキャッチ画像設定
アイキャッチ画像設定の流れは下記です。
- 右ツールメニューをクリック
- 投稿タブをタクリック
- 「アイキャッチ画像を設定」をクリックして画像を選択
![アイキャッチ画像](https://hinakira.com/wp-content/uploads/2022/08/アイキャッチ画像-1-1024x704.png)
![アイキャッチ画像](https://hinakira.com/wp-content/uploads/2022/08/アイキャッチ画像-1-1024x704.png)
URLスラッグの設定
![URLスラッグ](https://hinakira.com/wp-content/uploads/2023/12/URLスラッグ-1024x522.png)
![URLスラッグ](https://hinakira.com/wp-content/uploads/2023/12/URLスラッグ-1024x522.png)
URLスラッグは、上記のようにページURLの一部を構成するものです。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
英語の文字列にするのがオススメ。
URLスラッグ設定の流れは下記です。
- 右ツールメニューをクリック
- 投稿タブをクリック
- 「URLスラッグ」を変更
![パーマリンクを変更](https://hinakira.com/wp-content/uploads/2023/12/パーマリンクを変更-1-1024x631.png)
![パーマリンクを変更](https://hinakira.com/wp-content/uploads/2023/12/パーマリンクを変更-1-1024x631.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
僕の場合、タイトルを英語変換しています。
カテゴリーの設定
記事の「カテゴリー」を選択しましょう。
カテゴリー設定の流れは下記です。
- 右ツールメニューをクリック
- 投稿タブをクリック
- カテゴリーを選択
![カテゴリー選択](https://hinakira.com/wp-content/uploads/2022/08/カテゴリー選択-1-1024x649.png)
![カテゴリー選択](https://hinakira.com/wp-content/uploads/2022/08/カテゴリー選択-1-1024x649.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
カテゴリー選択は「1つ」だけを選ぶのがオススメ。
ステップ④:プレビューで記事を確認・点検する
記事が書けたら、プレビューで内容の確認をしましょう。
- トップツールバーの「プレビュー」をクリック
- 内容の確認(誤字脱字、レイアウトなど)
- PCだけでなく、モバイルでも確認
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
記事作成のゴールはもうすぐです。
ステップ⑤:記事を公開する
内容確認ができたら、トップツールバーの「公開」をクリック。
これで投稿完了となります。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
以上、ここまでがブロックエディターでの記事作成の流れになります。
ブロックエディター基本の使い方
次はブロックエディター基本の使い方についても解説していきます。
特に覚えておくべき内容は以下の5つ。
- ブロックの追加
- ブロックの移動
- ブロックの削除
- ブロックのコピー
- ブロックのグループ化
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
順番に解説していきますね。
基本①:ブロックを追加する
ブロック追加の方法は下記のとおりです。
![ブロック追加](https://hinakira.com/wp-content/uploads/2022/08/ブロック追加-2-1024x636.png)
![ブロック追加](https://hinakira.com/wp-content/uploads/2022/08/ブロック追加-2-1024x636.png)
①ブロック追加「+」をタップ。
![ブロックリスト](https://hinakira.com/wp-content/uploads/2022/08/ブロックリスト-1-1024x699.png)
![ブロックリスト](https://hinakira.com/wp-content/uploads/2022/08/ブロックリスト-1-1024x699.png)
②使いたいブロックを選んでクリックする。
すると、選んだブロックがメインコンテンツエリアに追加されます。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
ちなみに、SWELLでは80以上のブロックが使えます。
基本②:ブロックを移動させる
ブロック移動方法を見ていきましょう。
![移動したいブロック選択](https://hinakira.com/wp-content/uploads/2022/08/ブロック選択-1-1024x642.png)
![移動したいブロック選択](https://hinakira.com/wp-content/uploads/2022/08/ブロック選択-1-1024x642.png)
①移動させたいブロックをクリック。(文字の横付近をクリックしてみましょう)
![上をクリック](https://hinakira.com/wp-content/uploads/2022/08/上をクリック-1-1024x612.png)
![上をクリック](https://hinakira.com/wp-content/uploads/2022/08/上をクリック-1-1024x612.png)
②上下ボタンをクリック。(今回は上に移動したいので、上のマークをクリック)
![上にブロック移動完了](https://hinakira.com/wp-content/uploads/2022/08/上にブロック移動完了-1-1024x619.png)
![上にブロック移動完了](https://hinakira.com/wp-content/uploads/2022/08/上にブロック移動完了-1-1024x619.png)
③選んだブロックを上に移動できました。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
ブロック移動は良く使うので覚えておきましょう。
基本③:ブロックを削除する
ブロックの削除方法も見てい行きましょう。
![削除するブロック選択](https://hinakira.com/wp-content/uploads/2022/08/削除したいブロックを選ぶ-1-1024x588.png)
![削除するブロック選択](https://hinakira.com/wp-content/uploads/2022/08/削除したいブロックを選ぶ-1-1024x588.png)
①削除したいブロックを選ぶ。(文字の横付近をクリック)
![段落を削除](https://hinakira.com/wp-content/uploads/2022/08/段落を削除-1-1024x627.png)
![段落を削除](https://hinakira.com/wp-content/uploads/2022/08/段落を削除-1-1024x627.png)
②「〇〇〇を削除」をクリック。
![削除完了](https://hinakira.com/wp-content/uploads/2022/08/削除完了-1-1024x559.png)
![削除完了](https://hinakira.com/wp-content/uploads/2022/08/削除完了-1-1024x559.png)
③削除したいブロックが消えました。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
ちなみに、間違えて削除してしまったときは、トップツールバーの「元に戻す」から復元できます。
間違って削除してしまったとき
![元に戻す](https://hinakira.com/wp-content/uploads/2022/08/元に戻す-1-1024x566.png)
![元に戻す](https://hinakira.com/wp-content/uploads/2022/08/元に戻す-1-1024x566.png)
基本④:ブロックをコピーする
ブロックのコピー方法も見ていきましょう。
![コピーしたいブロックを選ぶ](https://hinakira.com/wp-content/uploads/2022/08/コピーしたいブロックを選ぶ-1-1024x609.png)
![コピーしたいブロックを選ぶ](https://hinakira.com/wp-content/uploads/2022/08/コピーしたいブロックを選ぶ-1-1024x609.png)
①コピーしたいブロックを選ぶ。
![コピーをクリック](https://hinakira.com/wp-content/uploads/2022/08/コピーをクリック-1-1024x650.png)
![コピーをクリック](https://hinakira.com/wp-content/uploads/2022/08/コピーをクリック-1-1024x650.png)
②「コピー」をクリック。
![右クリックして貼り付け](https://hinakira.com/wp-content/uploads/2022/08/右クリックして貼り付け-1-1024x628.png)
![右クリックして貼り付け](https://hinakira.com/wp-content/uploads/2022/08/右クリックして貼り付け-1-1024x628.png)
③貼り付けをしたい場所で、「右クリック」→「貼り付け(Ctrl+V)」をクリック。
![コピー完了](https://hinakira.com/wp-content/uploads/2022/08/コピー完了-1-1024x596.png)
![コピー完了](https://hinakira.com/wp-content/uploads/2022/08/コピー完了-1-1024x596.png)
④コピーされました。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
貼り付け方は、一般的なコピペの方法と同じです。
基本⑤:ブロックをグループ化する
続いて、複数ブロックのグループ化を見ていきます。
![グループ化したい範囲を選ぶ](https://hinakira.com/wp-content/uploads/2022/08/グループ化したい範囲を選ぶ-1-1024x606.png)
![グループ化したい範囲を選ぶ](https://hinakira.com/wp-content/uploads/2022/08/グループ化したい範囲を選ぶ-1-1024x606.png)
①グループ化したいブロックの範囲を選択。
![グループ化をクリック](https://hinakira.com/wp-content/uploads/2022/08/グループ化をクリック-1-1024x658.png)
![グループ化をクリック](https://hinakira.com/wp-content/uploads/2022/08/グループ化をクリック-1-1024x658.png)
②「グループ化」をクリック。
![グループ化された](https://hinakira.com/wp-content/uploads/2022/08/グループ化された-1-1024x569.png)
![グループ化された](https://hinakira.com/wp-content/uploads/2022/08/グループ化された-1-1024x569.png)
③グループ化されました。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
グループごとに移動をしたり、グループごとに囲い装飾したり、といった形で使用できます。
では、実際にグループ化したブロックを移動させてみます。
![グループ化して移動](https://hinakira.com/wp-content/uploads/2022/08/グループ化して移動-1-1024x517.png)
![グループ化して移動](https://hinakira.com/wp-content/uploads/2022/08/グループ化して移動-1-1024x517.png)
①移動したい範囲をグループ化。
![下に移動](https://hinakira.com/wp-content/uploads/2022/08/下に移動-1-1024x567.png)
![下に移動](https://hinakira.com/wp-content/uploads/2022/08/下に移動-1-1024x567.png)
②「上下」のいずれかをクリック。(今回は下に移動させます)
![グループ移動ができた](https://hinakira.com/wp-content/uploads/2022/08/グループ移動ができた-1-1024x538.png)
![グループ移動ができた](https://hinakira.com/wp-content/uploads/2022/08/グループ移動ができた-1-1024x538.png)
③グループ化した範囲を移動できました。
といったように、「グループ化」はブロックをまとめて移動する場合にも便利です。
ブロックエディターで「良く使うブロック」6つ
ここでは、使用頻度の高いブロックを6つ紹介したいと思います。
具体的には、以下の通り。
- テーブルブロック
- カラムブロック
- リストブロック
- 画像ブロック
- 見出しブロック
- 段落ブロック
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
では、順番に見ていきましょう。
①:テーブルブロック
まずは「テーブルブロック」です。
ブログ記事作成において表はとても便利なので、表を作れる「テーブルブロック」は重宝します。
![SWELLのテーブル](https://hinakira.com/wp-content/uploads/2022/08/SWELLのテーブル-1-1024x583.png)
![SWELLのテーブル](https://hinakira.com/wp-content/uploads/2022/08/SWELLのテーブル-1-1024x583.png)
なお、上記のテーブルはSWELL
※WordPress標準のテーブルはセルごとに色を変えたり、記号を入れたりはできません。
テーブルブロックの呼び出し
![テーブルを選択](https://hinakira.com/wp-content/uploads/2022/08/テーブルを選択-1-1024x666.png)
![テーブルを選択](https://hinakira.com/wp-content/uploads/2022/08/テーブルを選択-1-1024x666.png)
テーブルブロックは、ブロック一覧から「テーブル」をクリックすれば呼び出せます。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
ちなみに、テーブル内の文字はスニペットに表示されやすいので、検索結果で目立つ効果も。
②:カラムブロック
次に「カラムブロック」です。
通常は1つのブロックに1つの画像などしか使えませんが、カラムブロックを使うことで1つのブロックの中に複数のブロックを入れられます。
例えば、以下のような場合です。
![2カラム](https://hinakira.com/wp-content/uploads/2022/08/2カラム-1024x662.png)
![2カラム](https://hinakira.com/wp-content/uploads/2022/08/2カラム-1024x662.png)
これは左右に2つの画像を表示していますが、カラムブロックを使用して行います。(通常は1つのみしか表示できない)
カラムブロックの呼び出し
![カラム](https://hinakira.com/wp-content/uploads/2022/08/カラム-1-1024x663.png)
![カラム](https://hinakira.com/wp-content/uploads/2022/08/カラム-1-1024x663.png)
カラムブロックは、上記のようにブロック一覧の「カラム」をタップすれば呼び出せます。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
カラムブロックは、左右で分割してブロックを表示させたいときに使います。
③:リストブロック
下記が「リストブロック」。箇条書きの作成などに便利です。
![リスト](https://hinakira.com/wp-content/uploads/2022/08/リスト-1-1024x561.png)
![リスト](https://hinakira.com/wp-content/uploads/2022/08/リスト-1-1024x561.png)
リストブロックの呼び出し
![リスト](https://hinakira.com/wp-content/uploads/2022/08/リスト-2-1024x649.png)
![リスト](https://hinakira.com/wp-content/uploads/2022/08/リスト-2-1024x649.png)
リストブロックを呼び出すには、ブロック一覧の「リスト」をタップでオッケー。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
リストブロック、めちゃくちゃ重宝しますね。
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-リスト装飾-list-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-リスト装飾-list-1-300x158.png)
④:画像ブロック
下記は「画像ブロック」を使用した例です。
![画像ブロックを使用した例](https://hinakira.com/wp-content/uploads/2022/08/画像ブロックを使用した例-1-1024x645.png)
![画像ブロックを使用した例](https://hinakira.com/wp-content/uploads/2022/08/画像ブロックを使用した例-1-1024x645.png)
画像ブロックの呼び出し
![画像ブロック](https://hinakira.com/wp-content/uploads/2022/08/画像ブロック-1-1024x677.png)
![画像ブロック](https://hinakira.com/wp-content/uploads/2022/08/画像ブロック-1-1024x677.png)
画像ブロックを呼び出すには、ブロック一覧の「画像」をタップすればオッケーです。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
画像ブロックの使用頻度は高いです。
⑤:見出しブロック
下記は「見出しブロック」です。
![見出しブロック作成](https://hinakira.com/wp-content/uploads/2022/08/見出しブロック作成-1-1024x633.png)
![見出しブロック作成](https://hinakira.com/wp-content/uploads/2022/08/見出しブロック作成-1-1024x633.png)
見出しブロックの呼び出し
![見出し](https://hinakira.com/wp-content/uploads/2022/08/見出し-1-1024x617.png)
![見出し](https://hinakira.com/wp-content/uploads/2022/08/見出し-1-1024x617.png)
画像ブロックを呼び出すには、ブロック一覧の「見出し」をタップすればオッケーです。
または、あらかじめ段落ブロックにテキスト入力をしてから、ブロックタイプを「見出し」に変更する方法でも良いですね。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
見出し文を書いてから「ブロックパターン変更」の方法もあります。
(むしろそっちがオススメ)
⑥:段落ブロック
もはや説明の必要はないでしょう。
文章を入力するときに使用する「最もよく使う」ブロックです。
![段落ブロック](https://hinakira.com/wp-content/uploads/2022/08/段落ブロック-1-1024x577.png)
![段落ブロック](https://hinakira.com/wp-content/uploads/2022/08/段落ブロック-1-1024x577.png)
デフォルトで表示されるものが「段落ブロック」です。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
「段落ブロック」は文字入力に使う、基本のブロックです。
SWELLのおすすめブロック5選
\ 便利なSWELL専用ブロック/
![SWELLブロック](https://hinakira.com/wp-content/uploads/2022/02/SWELL専用ブロック-2-1024x219.png)
![SWELLブロック](https://hinakira.com/wp-content/uploads/2022/02/SWELL専用ブロック-2-1024x219.png)
当サイトも使用しているテーマ「SWELL
SWELL
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
SWELLブロックエディターの使い心地は、最高です!
ブロックエディターを使うならSWELL!ということで、SWELLの専用ブロックについて「ランキング形式で5つ」紹介します。
第5位:ステップブロック
ぼく的SWELL
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
手順の説明などの時に重宝します。
タイトル入力欄にタイトルを入力する。
メインコンテンツエリアで、記事本文を入力していく。
パーマリンク、アイキャッチ画像などの設定をする。
プレビューで変なところがないか確認する。
記事を全世界に羽ばたかせる。
こんな感じのものを作れます。
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-step-bloc-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-step-bloc-1-300x158.png)
第4位:SWELLボタンブロック
SWELL
しかもクリック率も計測できて便利です。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
おしゃれなボタンで押したくなっちゃいますね。ボタンの種類なんと60種類!
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-button-bloc-tukaikata-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-button-bloc-tukaikata-1-300x158.png)
第3位:関連記事ブロック
SWELL
下記のようにブログカード型、スリムカード型、テキストリンクにできます。
![](https://hinakira.com/wp-content/uploads/2022/03/How-to-get-started-with-SWELL-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/03/How-to-get-started-with-SWELL-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-kanrenkizi-bloc-tukaikata-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-kanrenkizi-bloc-tukaikata-1-300x158.png)
第2位:キャプション付きブロック
SWELL
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
下記のようなキャプション付きのボックスですね。
SWELLのキャプション付きブロック
おしゃれで使いやすい!
SWELLのキャプション付きブロック
おしゃれで使いやすい!
SWELLのキャプション付きブロック
おしゃれで使いやすい!
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-キャプションボックスの使い方-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2021/09/SWELL-キャプションボックスの使い方-1-300x158.png)
第1位:ふきだしブロック
SWELL
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
めちゃくちゃ使いやすいですよ!
![](https://hinakira.com/wp-content/uploads/2021/04/サンジ.png)
![](https://hinakira.com/wp-content/uploads/2021/04/サンジ.png)
![](https://hinakira.com/wp-content/uploads/2021/04/サンジ.png)
SWELLのふきだしブロック最高~!
![](https://hinakira.com/wp-content/uploads/2021/10/SWELL-ふきだしブロック-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2021/10/SWELL-ふきだしブロック-1-300x158.png)
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
まとめ|SWELLブロックエディターの使い方
今回は、SWELLブロックエディターの使い方を解説しました。
SWELLのブロックエディターは、とても使いやすく、そして書きやすいので、記事執筆の効率化に繋がります。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
実際、かなり効率化できました。
SWELLとともに、ブロックエディターとともに、楽しく効率的なブログライフを楽しんでいきましょう。
では、またねっ。
![](https://hinakira.com/wp-content/uploads/2022/03/How-to-get-started-with-SWELL-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/03/How-to-get-started-with-SWELL-300x158.jpg)
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
当サイト使用テーマ。最高です。
![](https://hinakira.com/wp-content/uploads/2022/07/SWELLの特徴.jpg)
![](https://hinakira.com/wp-content/uploads/2022/07/SWELLの特徴.jpg)
- 購入者限定アフィリエイトがあるからテーマで稼げる
- 書きやすくて時短になるから生産性があがる
- ChatGPTとの相性もバツグンで時短が加速
- 誰でも簡単にオシャレなデザインにできる
- 買い切り、複数サイトにバンバン使える
- アプデが多くて進化がスゴイ
- SEOにも強い
- 価格が高い
- 個人開発の不安
- 人気すぎてデザインが被りがち
\ 時短になって生産性が爆上がりするテーマ /
※おしゃれで書きやすくてブログが楽しくなる
コメント
コメント一覧 (5件)
はじめまして。
SWELLでブログを作成しています。
今まで携帯電話で記事を作成していたのですが、文字を装飾したりするバーが、スクロールすると隠れてしまい、記事の装飾ができなくなってしまいました。
執筆集中モードにもなっていなく、どのようにするのがよろしいでしょうか?
ご存じであればおしえていただきたいです。
失礼ながら、困っておりコメントをさせていただきました。
初めまして、コメントありがとうございます!!!
うーん、スマホだと扱いにくいんですよね・・・。正直。
なので、僕は装飾はPCでやっていますよ~。
はじめまして。
今月から、SWELLを使い始めました。
なんといっても、キャッシュの性能が高くて、表示スピードが魅力ですね?
SWELLなら殆どの有料キャッシュプラグインを凌駕できているのではないでしょうか?
ところで、もし可能であれば、以下の質問に回答頂けませんでしょうか?
グループ化したブロックからパターンを作成することはできるのですが、作成したパターンの削除方法が判らないのです。
どうぞ、よろしくお願いいたします。
blocのパターン作成は「ブログパーツ」がおすすめですよ。簡単に修正も削除もできますから。
「ブログパーツ」は全く知らなかったので、これから調べてみます。
ご回答、ありがとうございました。