有料テーマの購入を検討中の方におすすめ記事

【SWELLブロック】全20種類の使い方!初心者向けにわかりやすく解説

  • URLをコピーしました!

SWELL専用のブロックエディタ『SWELLブロック』の機能を知っていますか?

記事を執筆する前にブロックエディタの種類を把握することで、記事に幅が出るようになります。

本記事ではSWELLブロックの用途と使用例をかんたんに、わかりやすく説明していきます。

▼本記事の内容

  • SWELLブロックの機能がわかる
  • SWELLブロックの使い方がわかる
  • SWELLブロックの使用例でイメージが湧く
SWELL
初心者におすすめのWordPressテーマ
  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ
タップできる目次

SWELLブロックは全部で何種類?

悩子ちゃん

SWELL専用のブロックはなん種類あるの?

ケイ@

SWELLブロックは、全部で20種類。
アップデートで、増えていくことがあるよ。

悩子ちゃん

20種類...。
そんなに覚えられるかなぁ?

ケイ@

大丈夫。
ここでは、誰でも簡単にわかりやすく説明していくよ。

上から順番にやっていくので、先に知りたいことがある方は、目次から選んでください。

SWELLブロックの使い方

SWELLブロックの呼び出し方は、簡単!

STEP
左上にある「+」をクリック。
SWELLブロックの呼び出し方
SWELLブロックの呼び出し方
STEP
②下にスクロールして、赤枠内の使いたいブロックを選択すれば完了です。
SWELLブロックの種類
SWELLブロックの種類

キーボード操作で呼び出す方法

STEP
半角の/を打とう。

何も書いていない状態の段落に「/」を打つと下記のようになります。
(「」は、打たないで半角の/だけ打ち出せば出ます。)

ブロックエディタの使い方
ブロックエディタの使い方
STEP
枠から選択または、文字を入力してブロックを呼び込もう。

②・上記の赤枠内に無いブロックを使いたい場合は、「/」の横に文字を打ち出します。

例:リッチカラムが使いたい場合

リッチカラムの使い方
リッチカラムの使い方

ローマ字で出すこともできます。

ローマ字でリッチカラムを使う方法
ローマ字でリッチカラムを使う方法

アコーディオンブロックの使い方

アコーディオンブロックとは、タイトルだけ表示して内容を隠したいときに使います

アコーディオンブロックの実際の使用例

スタイルは全部で4種類

アコーディオンブロックとは

内容を開閉機能で隠せます。

アコーディオンブロックは

Q&Aで使われることが多いです。

今日の運勢

あなたの今日の運勢は、大吉!

思わず跳ね上がるぐらいうれしいことが起こるかも。

ラッキーカラーは、朝日のようなオレンジ

ラッキーアイテムは、お雑煮を食べる

ラッキーナンバーは、3

着物を着ている人に注目!

見ちゃダメ...

みーたーなぁーーーー(; ・`д・´)

こんな感じで使えます。

説明をするときやQ&Aなど隠したいものがあるときや、中身が長くなってしまった時の省略などに使えます。

アコーディオンブロックの使い方を知りたい方は、こちら

ABテストブロックの使い方

ABテストとは、AとBそれぞれ違うパターンをいれてランダムに表示させることができます。

ABテストブロックの実際の使用例

上記のように、ふたつのパターンを作成すると、この二つのパターンがランダムに表示されるようになります。

しかも、広告タグやSWELLボタンを使用することで、クリック率まで測定することができます。

ABブロックを使用することで、どちらの広告が効果的か測定することができます。

バナーリンクブロックの使い方

バナーリンクとは、画像にリンクを貼り付けられる機能のことです。

バナーリンクブロックの実際の使用例

デフォルト

ブラー効果をつける(背景をぼかせます)

影をつける(画像に影が付きます)

画像を丸くする

このような見た目に設定できます。

そのほかに、「テキストカラー」「オーバーレイカラー」「オーバーレイの不透明度」を変えることができます。

バナーリンクは、リンクに画像を添付することでリンク先を相手にイメージしやすくでき、クリック率を上げることができます。

SWELLボタンブロックの使い方

SWELL専用のボタンブロックです。

SWELLボタンブロックの実際の使用例

デフォルト

立体

キラッと

アウトライン

MOREボタン

SWELLボタンの設定画面から、広告を貼ることができます。

下記の、赤枠内に広告タグ(HTML)を入力することで、ボタン型の広告が作れるようになります。

SWELLボタンは、上記のように装飾でき、クリック率の測定や広告タグをかんたんに貼ることができるボタンです。

SWELLボタンの詳しい使い方は下記の記事にて解説しています。

キャプションボックスブロックの使い方

 キャプションボックスは、見出し・タイトル付きボックスです。

キャプションボックスブロック実際の使用例

デフォルト

デフォルト

枠上

枠上

枠上2

枠上2

枠内

枠内

浮き出し

浮き出し

内テキスト

内テキスト

上記の7種類のスタイルを選択でき、4種類のカラーがあります。

キャプションボックスは、読者にわかりやすく伝えることができるボックスです。

リッチカラムブロックの使い方

リッチカラムは、カラムの上位相互。
カラムとは、横並びにコンテンツを配置できるブロックです。
リッチカラムは、カラムの幅や、カラムとカラムの間の隙間の幅を変更したり、表示列を変更することができます。

リッチカラムブロックの実際の使用例

画像サイズ(パソコンのみ全サイズ表示されています)

広告タグの使い方
SWELLのブログパーツの使い方
SWELL グローバルナビの設定方法
SWELL ヘッダーメニュー

余白なし

広告タグの使い方
SWELLのブログパーツの使い方
SWELL グローバルナビの設定方法
SWELL ヘッダーメニュー

カルムの幅の変更

広告タグの使い方
SWELLのブログパーツの使い方
SWELL グローバルナビの設定方法
SWELL ヘッダーメニュー

上記のように、画像サイズの変更や、カラム幅・空白の幅が簡単に調整できます。

また、画像にリンクを貼り付けたりもできます。

リッチカラムは、コンテンツをじぶんの好きなようにカスタマイズできる使い勝手抜群のカラムです。

説明リストブロック(DL)の使い方

説明リストは、項目と内容が一つになっているリストです。
(DL)は、ダウンロードという意味ではなく、HTMLのタグで「リスト」という意味を持ちます。

ケイ@

わたしは、ずっとダウンロードだと思っていました。(恥)

説明リストの実際の使用例

説明リストとは

項目と内容が一つになっているリストです。

上記の
「説明リストとは」が、項目
「項目と内容が一つになっているリストです」が内容の部分になります。

説明リストは、落ち着いたイメージで説明をしたいときに使用できるブロックです。

FAQブロックの使い方

FAQブロックは、Q&Aをかんたんに装飾できるブロックです。

FAQブロックの実際の使用例

パソコン初心者でも、有料テーマにしたほうがいいですか?

パソコン初心者の方ほど、有料テーマのほうが向いています。

なぜパソコン初心者のほうが、有料テーマに向いているんですか?

かんたんに装飾や、カスタマイズができるように設計されているからです。

FAQブロックは、どんな装飾ができますか?

QとAのアイコンの色や形を変えることができます。

ほかには、どんなことができますか?

スタイルをボックスや線あり、ストライプなどに変更できます。

FAQブロックは、Q&Aとして使用するブロックです。

フルワイドブロックの使い方

フルワイドボックスとは、横幅いっぱいに使えるブロックです。
トップページのカスタマイズをするときに、かなり役に立つブロックです。

フルワイドブロックの実際の使用例

画像を貼る

画像を貼る

画像を貼って、その上に文字を書いたり、背景効果をつけることができます。
背景効果
・Fixed Background
背景をフルワイドのサイズに変更して、固定してくれます。
・パララックス効果
背景がスクロールに合わせて動きます。

斜線

ジグザグ

 

上記のように、ブロックの形を変えて使用することもできます。

「斜線」「円」「波」「ジグザグ」は、境界線レベルを調整して高さを変えられます。

フルワイドブロックは、トップページを自由にカスタマイズできるブロックです。

ステップブロックの使い方

ステップブロックは、やり方や使い方を説明するときにステップ形式でわかりやすく説明できるブロックです。

 

ステップブロックの実際の使用例

スッテプブロックの使い方

STEP
左上にある+をクリック。
STEP
SWELLブロックにあるステップをクリック。
STEP
これでスッテプが使えるようになります。
STEP
STEP
STEP
STEP

上記のように、スッテプ内の色を変えたり、画像や動画なども貼ることができます。

スタイルも全部で3種類あります。

スッテプブロックは、わかりやすく説明や、順番を明確に伝えることができるブロックです。

タブブロックの使い方

タブとは、札やつまみなどの意味を持ちふせんのように、わかりやすくカテゴリーなどを分けることができます。

タブブロックの実際の使用例

このように、新着記事と人気記事をわかりやすく分けることができます。

タブブロックは、カテゴリーやパターンをまとめられるブロックです。

広告タグブロックの使い方

広告タグは、広告をカスタマイズできます。

広告タグブロックの実際の使用例

バナー型

アフィリエイト型

Amazon型

ランキング型

ダッシュボードから広告タグの設定をすることで、クリック数の測定や、上記のような見た目に
カスタマイズできます。

コードをいじれないわたしが唯一おすすめする活用方法をお伝えします!

広告タグは、テキストリンクがおすすめ!

テキストリンクを「カスタムHTML」で貼ろうとすると、下記のよう離れてしまいます。

しかし、広告タグを使用すると、

上記のように、繋げて使うことができます。

広告タグは、ブロックからかんたんに広告を貼り付けられます。
クリック数の測定や、見た目のカスタマイズもできるのでおすすめです。

詳しい広告タグの使い方は、【SWELL】広告タグの使い方とすぐにできるクリック率の測定方法をご覧ください。

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

ふきだしブロックは、ふきだしをかんたんに使えるブロックです。

ふきだしブロックの実際の使用例

発言

悩子ちゃん

テキストの枠がとんがってるよ。

心の声

悩子ちゃん

テキストの枠がもくもくしてるわ。

左右の調整

ケイ@

わたしだけ、右側(泣)

上記のように、枠のパターンや、色などが変えられます。

ふきだしブロックは、ダッシュボードから設定すると

マウスを3クリックするだけで
使えちゃいます!

ふきだしは、毎記事必ず使うので、この短縮はかなり助かっています。

ふきだしブロックは、カスタマイズを設定し保存することでかんたんに使用することができるブロックです。

ふきだしブロックの登録方法や詳しい使いかたは、こちら

ブログパーツブロックの使い方

ブログパーツブロックは、よく使うコンテンツをショートコード化して記事内やウィジェットなどいろいろな場所で使用することができるブロックです。

ブログパーツブロックの実際の使用例

\パソコン初心者におすすめ/

ダッシュボードで登録しておくと、上記のボタンが「5クリック」でできます。

使用できる場所
  • 記事内(固定記事・投稿記事)
  • ウィジェット内
  • タグページ内
  • カテゴリーページ内
  • CTA内
  • その他

ブログパーツは、投稿をしておくことでいろいろな場所で使いまわせるブロックです。

ブログパーツはとても便利なブロックですが、パソコン初心者には少し難しいブロックです。

パソコン初心者でも理解できる使い方を解説しています。

【初心者向け】ブログパーツの使い方から使用例を紹介しますをご覧ください。

投稿リストブロックの使い方

投稿リストは、自分が書いた記事をカテゴリーやタグ別に自分の好きなようにカスタマイズして表示することができるブロックです。

投稿リストブロックの実際の使用例

カード型

リスト型

リスト型(左右交互)

サムネイル型

テキスト型

上記のように、レイアウトが変更できます。

ほかにも

表示順(新着順・人気順等)
表示設(公開日・更新日・pv数等)
カテゴリーの表示設定

カテゴリーで分ける
タグで分ける

などもできます。

投稿リストブロックは、カテゴリー別やタグ別で人気順や新着順等をかんたんに設置できるようになるブロックです。
トップページのカスタマイズをする際にかなり役に立つ優れもののブロックになっています。

関連記事ブロックの使い方

関連記事ブロックは、自分の記事や、紹介したい記事のブログカードを作成してくれるブロックです。

関連記事ブロックの実際の使用例

内部リンク

IDやキーワードを入力するだけで選べて作成できます。

外部リンク

URLを入力するだけで、下記のように作成してくれます。

そのほかに、

テキストリンクで表示する
画像を非表示にする
抜粋文を非表示にする

ことができます。

関連記事ブロックは、内部リンクや外部リンクのブログカードをかんたんに作成してくれます。
企画記事やまとめ記事を書く際に役立つブロックです。

制限エリアブロックの使い方

制限エリアブロックは、人や期間などを制限できる(決められる)ブロックです。

制限エリアブロックの実際の使用例

ログインしている人だけ、見ることができます。

上には、何も表示されていないですが、実際は

上記のように、画像を入れてます。

視聴できるユーザーを指定もできます。

コンテンツを視聴できるユーザー
  • 管理者
  • 編集者
  • 投稿者
  • 寄稿者
  • 購読者

など、指定できるので有料コンテンツの購入者限定記事を載せたり、外注さんにお願いするときに使用したりもできると思います。

期間も決めることができます。

今だけ!や、期間限定の情報を提供したいときに使えます。

制限エリアブロックは、見せる人を制限したり、期間を制限することで削除のし忘れを防いでくれたり、特定の人だけに見せたいときに使用するブロックです。

RSSブロックの使い方

RSSブロックは、最新の情報や更新情報をまとめてアップしてくれるブロックです。

RSSブロックの実際の使用例

上記のように、記載されます。

記事数は、1~10まで選べ「カード型」「リスト型」「テキスト型」を選んでカスタマイズできます。

RSSブロックは、企業サイトなどの新着情報やアップデート情報を伝える際に使用されているブロックです。

SWELLのブロックエディタを説明してみて感じたこと。

SWELLブロックは、かんたんに使用できるものも多くあります。

しかし、パソコン初心者には難しいところもありました。

特に、説明リスト(DL)やRSSは意味を調べるのが物凄く大変でした。(笑)

このブログを通じてみなさんの「わからない」を解決していきましょう!

SWELL
初心者におすすめのWordPressテーマ
  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ

ブログ村参加しています。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
タップできる目次