【SWELL編】ブロックエディターの使い方｜WordPress初心者が最初に知ってべき機能10選！

 

こんな疑問に答えていきます。

 

 

こんにちは！祐太です。

現在、WordPressでは従来のクラシックエディターからブロックエディター(グーテンベルク)に新しく変わりました。

クラシックエディターのサポートは、2021年12月31日で終了すると告知されているので、特に今からWordPressを始める方はブロックエディターに使い慣れた方が良いでしょう。

ただ文字を打つだけならともかく、文章を枠で囲ったり、記事の中に画像を挿入する方法もいまいち分からない…。

見やすい記事が書けるようになるまで気が遠くて、それまでモチベーションが続くか心配という方もいると思います。

 

そこで今回は、WordPress歴4年の僕が、

WordPress初心者がブロックエディターで最初に知っておくべき、上記10個のやり方を一つずつお伝えしていきます。

その他にも機能はありますが、ここでお伝えする10個をおさえれば、ブログを書くのに困ることなく、読者に見やすい記事ができます。

ぜひ、最後までご覧になって、今後のブログ運営に役立ててください！

 

今、WordPressテーマの中で人気がある「SWELL」は、標準でブロックエディターに対応していて、非常に使いやすくなっています。

 

以下の動画では、実演で解説しています。

記事と併せて参考にしてください。

【【SWELL編】WordPress初心者が最初に知っておくべきブロックエディターの使い方10選！】

 

【SWELL編】ブロックエディターの使い方10選

ブロックエディターの使い方ということで、ここではSWELLを使用したブロックエディターで10個の機能をお伝えします。

 

1．吹き出し

吹き出しを挿入したいブロックにカーソルを合わせて、＋ボタンの『ブロックの追加』を押します。

そしたら、ブロックの検索の部分に、ひらがなで「ふきだし」と入力してください。

すると、吹き出しのボタンが表示されるので、それを選択します。

 

ふきだしセットの使い方

 

 

ふきだしブロックの使い方

ふきだしセットを使用しなくても、ふきだしブロックからカスタムして、ブロックに吹き出しを表示させることも可能です。

 

2．枠線

まずは、枠で囲いたい適当な文字をブロックに入力します。

ここでは、「その１、その２」と入れています。

 

枠で囲いたい部分の文章を選択したら、縦に3つ並んでいる丸の『オプション』をクリックします。

 

『グループ化』を選択します。

 

右のバーにいろんな枠線のデザインがあります。

その中から、好みの枠線を選択すると、ブロックに枠線を反映させることができます。

 

3．リスト

リストしたい部分の文章を選択したら、『ブロックのタイプを変更する』のボタンを押して、『リスト』を選択します。

 

右のバーに、リストのスタイルが色々とあるので、好みに合わせて変更することができます。

 

4．文字装飾

文字色を変更するには、まず変更したい文字を選択します。

その後、『続きを読む』を選択し、『テキスト色』をクリックします。

 

 

 

マーカーを入れたい文字を選択したら、②の『SWELL装飾』を選択します。

その中にある『マーカー線』をクリックすると、文字にマーカー線を入れることができます。

 

 

背景色を入れたい文字を選択し、②の『SWELL装飾』を選択します。

その中にある『背景色』をクリックして、お好みの背景色を入れることができます。

 

5．空白行

まずは、空白行を入れたいブロックを選択します。

そしたら、＋ボタンの『ブロックの追加』を押して、ブロックの検索に「スペーサー」と入力します。

すると、スペーサーのボタンが表示されるので、それをクリックしてください。

 

 

6．見出し

見出しを挿入するには、入れたい部分のブロックを選択します。

ブロックを選択したら、＋ボタンの『ブロックの追加』を押して、ブロックの検索に「見出し」と入力します。

最後に見出しのボタンを押すと、ブロックにH2の見出しを表示させることができます。

 

①の『見出しレベルを変更』をクリックすると、見出しを変更することができます。

 

7．画像挿入

画像を挿入したいブロックを選択して、＋ボタンの『ブロックの追加』を押します。

ブロックの検索に「画像」と入力すると、画像のボタンが表示されるのでクリックします。

 

『アップロード』のボタンを押して、挿入したい画像を選択すると、ブロックに画像が反映されます。

 

8．カラム

カラムとは「段組み」のことを指す言葉で、ページのレイアウトが何列になっているかを1カラム、2カラム、3カラムというように表現します。

 

カラムを挿入したいブロックを選択し、＋ボタンの『ブロックの追加』を押します。

ブロックの検索に「カラム」と入力し、カラムのボタンを押してください。

 

赤枠で囲った部分から、カラムのパターンを選択します。

ここでは、2カラムを選択しています。

すると、以下のように2つのブロックが表示されます。

 

あとは、それぞれのブロックから、例えば左側のブロックに画像を挿入して、右側のブロックにリストで画像の説明といった感じにすることも可能です。

イメージとしては、以下のような感じです。

 

 

9．引用

まず、引用したい文章を入力していきます。

その後、②の『オプション』を押して、『グループ化』を選択します。

 

もう一度、引用したい文章を選択し、①の『ブロックのタイプを変更する』をクリックします。

そしたら、『引用』を選択していきます。

 

最後に引用元を記載し、上の画像の手順でリンクを貼り付ければオッケです。

 

10．ボタン

まず、ボタンを表示させたいブロックを選択し、『ブロックの追加』を押します。

ブロックの検索に「ボタン」と入力すると、SWELLボタンが表示されるのでクリックします。

 

あとは、上の画像のようにボタンを編集していけばオッケーです。

 

まとめ

今回は、ブロックエディターの使い方について、以下の10個をご紹介させていただきました。

 

それでは、今回の記事はこれで以上になります。

最後まで読んでいただき、ありがとうございました！