当サイト使用のWPテーマ「SWELL」の評判口コミはこちら

SWELLの使い方|16個のオリジナルブロックや便利機能まで解説

URLをコピーする
URLをコピーしました!
じゅんた

この記事はSWELLの使い方を、62枚の画像を使って具体的に分かりやすく解説しています!

この記事の内容
  • SWELLの使い方全体概要
  • SWELLオリジナルブロックの使い方
  • SWELLの便利機能の使い方

大人気のWordPressテーマ「SWELL」

機能がとても充実しているので初心者は使い方が分からないと言う方も多いです。

使い方といってもいろいろあるので本記事ではSWELLの基本的な操作と装飾、オリジナルブロックの使い方を解説します。

また最後には便利機能の使い方も解説しているのでぜひ最後までご覧下さい。

それ以外のSWELLの設定関係やGutenbergの使い方等は下記の通り別記事で解説していますのでこちらも参考にして下さい。

購入を検討中の方はこちらをご覧下さい! /

この記事を書いた人

じゅんた 

15年目商社営業マン

全日本SEO協会 SEO検定3級

1984年生まれ37歳 突破力が強みのブロガー
ブログ読者やお客様の悩み事解決を一番に考え活動

ブログや仕事で悩んでいる方向けに当サイト「しごとFUNくらぶ」を運営
副業サラリーマンとして「会社員がブログで人生を変えるための情報」を発信中

2020年 6月 「しごとFUNくらぶ」開設
✔従業員2,500人の商社で優秀社員表彰3回
✔なかじさんの「ウェブ職TV」出演
✔タケウチさん2ヶ月無料コンサル企画採用
✔サイトのドメインパワー30達成中
✔狙ったKWで検索1位19個達成中
✔SEOによるブログ月収5桁達成中

読みたいところから読める「目次」

SWELLの使い方全体概要

SWELLの使い方概要

上記はWordPressの記事編集画面です。

まずは概要ということで一般的なGutenbergの使い方と重なる部分もありますが①~③のメニューをそれぞれどういったことに使うのか解説していきます。

参考記事>>WordPressグーテンベルクの使い方を54枚の画像で解説!

①ブロックメニューバー

ブロックメニューの使い方解説画像
  • 赤字はSWELL独自機能
  • 緑字はGutenberg標準機能
  • 青地はGutenberg標準機能のSWELLカスタマイズ

ブロックメニューバーは上記の通りブロックの編集や文字装飾に使います。

標準機能の階層を上げる方法は下記の通りです。

」ボタンを押して、ブロックツールバーの表示設定にチェックを入れると追加されます。

SWELL装飾機能の設定

②右サイドメニュー

右サイドメニューはブロックの色やスタイルを変更することができます。

SWELLの場合は下記のようにアイコンを見ながら直感的に編集ができるので簡単です。

SWELL右サイドメニュー(上部)
SWELL右サイドメニュー(上部)
SWELL右サイドメニュー(中部)
SWELL右サイドメニュー(中部)
SWELL右サイドメニュー(下部)
SWELL右サイドメニュー(下部)

③左サイドメニュー

左サイドメニューはブロックを呼び出し選択できます。

ただしブロックは下記のように「+」ボタンでも読み出せますし「/」のショートカットキーを使った方が速いので私はほとんど使いません。

ブロックの呼び出し
ブロックの呼び出し2(ショートカット)

SWELL16個のオリジナルブロックの使い方を解説

ブロック名使用頻度ブロック名使用頻度
①広告タグ②ふきだし
③ブログパーツ④投稿リスト
⑤関連記事⑥RSS
⑦ABテスト適時使用⑧アコーディオン
⑨バナーリンク⑩SWELLボタン
⑪キャプション付ブロック⑫説明リスト
⑬FAQ⑭フルワイド
⑮ステップ⑯タブ

SWELLの16個のオリジナルブロックを使用頻度と一緒にまとめてみました。

それぞれ使い方を詳しく解説していきます。

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

広告タグは事前に登録した広告タグを呼び出すブロックです。

登録しておく事でタグを編集したいときに一括で変更出来ます。

また表示回数やクリック数にクリック率も自動計算されるので分析に便利です。

下記のようにWordPress管理画面にて確認できます。新規登録する場合は上の「新規追加」ボタンをクリックします。

広告タグ管理画面

そして下記画面にて広告タイプを選んでASPのアフィリエイトタグを広告タグにコピペすればOKです。

(タイトル名は何でも良いです。管理しやすい名前がおすすめです。)

広告タグ新規登録

実際の使い方は投稿画面で広告タグブロックを呼び出すだします。

広告タグブロック使い方

次に登録した広告タグを選んで完了です。

広告タグの選択

広告タグがテキスト型の場合はどうするの?

テキスト型の場合は下記赤枠の「呼び出しコード」を貼り付けるだけでOKです。

コピーしてそのまま文章に貼り付けて下さい。(文中でもOKです。)

プレビューか公開するとテキストリンクに変わっています。

広告タグの呼び出しコード確認

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

ふきだしブロックの使い方はまず最初に良く使うふきだしの形を事前登録します。

WordPressの管理画面から「ふきだし」→「新規追加」をクリックします。

ふきだしの管理画面

画像を選択しお好みの設定にして公開します。

ふきだしの新規登録

そして投稿画面にて呼び出します。

ふきだしブロックの呼び出し

そして事前登録した「ふきだし」を選択します。

※下記画面のように選んだ「ふきだし」は編集したり、個別に一から作成することもできます。

ふきだしブロック編集

③ブログパーツの使い方

ブログパーツは「ブロックの集合体」をブログパーツとして登録しておく事で、自由に投稿画面で呼び出すことができます。

またカテゴリページでブログパーツを設定する事でカテゴリページを作り込むことができます。

※当サイトでもカテゴリページはブログパーツを使って編集しています。

参考>>当サイトのWordPressカテゴリページ

それではさっそくブログパーツの使い方を説明します。

まずはWordPress管理画面でブログパーツを作ります。

ブログパーツ管理画面

下記のように通常の投稿と同じように記事を作成し「用途」を選んで「公開」をクリックします。

ブログパーツ作成画面

後は投稿画面でブログパーツを呼び出して使います。

ブログパーツブロックの呼び出し

そして用途を選択してから、使用したいブログパーツを選択すると事前に作ったブログパーツが出てきます。

ブログパーツの選択

カテゴリページで使う場合はどうするの?

カテゴリページで使う場合はカテゴリページの編集画面でブログパーツを選択します。

下記画面のようにカテゴリページの下の方にスクロールすると「ページで呼び出すブログパーツ」という項目があるので、ここで作成したブログパーツを選択します。

カテゴリーページでブログパーツを使う画面

④投稿リストの使い方

投稿リストは、投稿記事一覧を呼び出すブロックです。

コチラに関しては、トップページやカテゴリページにて使うことが多いです。

使い方に関してはSWELLトップページのカスタマイズ方法の記事で解説していますので、そちらをご覧下さい。

別記事で解説>>SWELLで魅力的なサイト型へ!トップページのカスタマイズ方法を解説!

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

関連記事ブロックはいわゆるブログカードを呼び出すブロックです。

まず投稿画面で関連記事ブロックを呼び出します。

関連記事ブロックの呼び出し画面

下記図のように呼び出したい関連記事のタイトル名の一部を入力すると候補が出てくるので選択します。

※記事IDを入力しても良いですが、確認したりと手間がかかるので私はタイトル名を入力しています。

呼び出したい関連記事を選択

呼び出した関連記事を右側サイドバーで設定して完了です。

※キャプションは空欄だと「✔あわせて読みたい」になります。

関連記事ブロックの設定

⑥RSSブロックの使い方

RSSブロックはお好みのRSSフィードのURLを入力しておくと、記事内に表示されるブロックです。

正直なところ私はRSSフィードを使っていないので全く使いません。

また使っていても記事内に表示する事もあまりないかと思いますので使用頻度は低いです。

念の為、使い方を解説します。

まず最初に投稿画面でRSSブロックを呼び出します。

RSSブロックを呼び出す画面

そしてRSSフィードのURLを入力して完了です。

RSSフィードのURLを入力

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

ABテストはAブロック、Bブロックで異なるコンテンツを作り、どちらがクリック率が良いかテストできるブロックです。

例えばボタンブロックの文言を迷った際に実際にテストをして良い方を採用すると言うような事ができます。

使い方は下記の通りです。

まず最初に投稿画面でABテストブロックを呼び出します。

ABテストブロックの呼び出し

下記図のようにAブロックを選択してコンテンツを作成します。

ABテストブロックAブロックの作成

次にBブロックを選択してコンテンツを作成します。

ABテストブロックBブロックの作成

これでAブロックコンテンツとBブロックコンテンツがランダムに表示されるので後は広告タフブロックやSWELLボタンでクリック率を計測します。

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

アコーディオンブロックとは下記のようなものです。

クリックすると開いてコンテンツが見れます。

使い方は簡単でアコーディオンブロックを呼び出すだけです。

アコーディオンブロックを呼び出す画面

そして下記のように作成していきます。

アコーディオンブロックの編集画面

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

バナーリンクブロックとはリンク付きの画像を設置したいときに使います。

使い方は投稿画面でバナーリンクブロックを呼び出します。

バナーリンクブロックの呼び出し

リンクさせたいURLを入力し画像を選択します。

バナーリンクブロックに画像をアップロード

最後に右サイドメニューでお好みの設定に変えて完了です。

バナーリンクブロックの設定画面

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

次はSWELLボタンブロックです。

  • 標準のボタンブロックと比べてSWELLボタンの良いところは下記の通りです。
  • クリック率等を計測できる。
  • アフィリエイトタグの入力項目がある。

とても便利です。

使い方も簡単です。

投稿画面でSWELLボタンを呼び出します。

SWELLボタンブロックの呼び出し

下記のようにボタンの名前を直接入力してリンクするURLを貼り付けます。

※アフィリエイトタグを入力する場合は不要。右サイドメニューから入力します。

SWELLボタンの名前入力

右サイドメニューでは下記のように設定できます。

ここでアフィリエイトタグの貼り付けや、クリック率の計測までできます。

SWELLボタンブロック設定(上部)
SWELLボタンブロック設定(中部)
SWELLボタンブロック設定(下部)

⑪キャプション付きブロックの使い方

キャプション付きブロックとは下記のようなブロックです。

ここにラベルを入力

ここにコンテンツを作成

用途は様々ありプロフィールや口コミにも使ったりできます。

参考記事>>簡単!SWELLでおしゃれなプロフィールを作成する3つの方法!

使い方は下記の通りです。

まずはキャプション付きブロックを呼び出します。

キャプション付きブロックの呼び出し

下記のように「キャプション」「コンテンツ」を作成し右サイドメニューにて設定します。

キャプション付きブロックの設定

⑫説明リストブロックの使い方

説明リストブロックとは下記のように説明文を加えたリストを作成できるブロックです。

AAA

ここにAAAを説明する文章

BBB

ここにBBBを説明する文章

使い方は下記の通りです。

説明リストブロックの呼び出し

次に説明リストブロックのスタイルを選択して完了です。

説明リストブロックの設定

⑬FAQブロックの使い方

FAQブロックのは下記のようなFAQを作成することができます。

SWELLはFAQに便利な機能はありますか?

FAQブロックがあります。

FAQブロックの使い方は簡単ですか?

簡単です。

FAQブロックの使い方は下記の通りです。

FAQブロックを呼び出す画面

後はFAQブロックのスタイルやアイコンの色を決めて完了です。

FAQブロックのスタイルや色を選ぶ画面

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

フルワイドブロックは1カラムで使用したときに効果的なブロックです。

下記のように画面いっぱいにコンテンツを表示する事ができます。

また背景画像を追加することでインパクトのあるコンテンツが作れます。

このように文章が入ります。

フルワイドブロックの使い方は下記の通りです。

フルワイドブロックを呼び出す画面

下記のように右サイドメニューでお好みの設定にできます。

背景画像を入れたい時は右サイドメニューの「メディアから選択」をクリックして画像を選びます。

フルワイドブロックの設定画面

背景画像を選択すると「背景効果」をつけることができます。

「Fixed Background」「パララックス効果」は読者に印象を強く残せる効果なので紹介しておきます。

背景画像の効果を選択する画面

Fixed Backgroundは下記のようにスクロールすると背景画像がスライドします。

Fixed Background効果

※パソコンのみの効果です。(モバイル機器では背景画像は動きません。)

※テキストカラーを白にオーバーレイカラーを黒に変えています。

パララックス効果は下記のようにスクロールすると背景画像がゆっくり動きます。

パララックス効果

※モバイル機器でも背景画像が動きます。

※テキストカラーを白にオーバーレイカラーを黒に変えています。

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

ステップブロックは下記のように手順を説明する際に便利なブロックです。

STEP
ステップブロックを呼び出す

まず最初に下記図のようにステップブロックを呼び出します。

ステップブロックを呼び出す画面
STEP
ステップブロックの設定をする

下記のように右サイドメニューでスタイルを決めたり設定を変えたりできます。

ステップブロックの設定をする画像

⑯タブブロックの使い方

タブブロックとは下記のようにタブで表示内容を切り替えること出来るようにするブロックです。

下記のようにタブブロックを呼び出します。

タブブロックの呼び出し画面

以上がSWELLのオリジナルブロックの使い方になります。

次の章ではSWELLの便利機能の使い方を紹介していきます。

その他SWELLの便利機能の使い方を5つ紹介

上記の通り私が良く使うSWELLの便利機能を5つ紹介します。

それぞれ詳しく解説します。

1.装飾・書式をクリアする

装飾・書式を全てクリアにする方法を紹介します。

一つずつ装飾・書式を元に戻さなくても良いので楽です。

参考例として下記のような装飾をクリアにします。

テキストを装飾した文章

下記のようにクリアしたい部分を選択し「」ボタンの「書式クリア」をクリックします。

テキストの装飾を全クリアする画像

すると下記のように何も装飾されていない文章に戻します。

装飾が全クリアされた文章

2.ブロック下の余白の幅を変更する

ブロック下の余白を変更する方法です。

SWELLではボタン2クリックで余白を変更出来るようになっています。

余白を変更する方法はブロックメニューバーから変更する方法と右サイドメニューで変更する方法の2パターンあるので使いやすい方法で使ってみて下さい。

SWELLでブロック下の余白の幅を変更する画面

3.ブロックをグループ化する

ブロックをグループ化はブロック全体のスタイルを変更したいときなどに使います。

私は結構な頻度で使っています。

ここでは例としてリストブロックのスタイルを変えてみます。

まずグループ化したいリストブロックを選択して赤枠の「」ボタン→「グループ」をクリックします。

リストブロックをグループ化

するとグループ化されるので右サイドメニューからスタイルを選んで完了です。

グループ化したブロックのスタイルを変更する

4.ページ内ジャンプする

ページ内ジャンプはリンクをクリックすると同じ記事内の指定した場所にジャンプする機能です。

そうすることで読者は自分に必要な情報に早くたどり着く事が出来ます。

当記事でも多用していますので当記事を参考にお伝えします。

まずジャンプしたいブロックを選択します。

右サイドメニューの下の方に「HTMLアンカー」というものがあるのでそこに任意の1~2単語を入力します。

※ここでは例で「cd」と入れてます。

ジャンプしたいブロックに任意のHTMLアンカーを入力する画面

つぎにジャンプ元のリンクを作成します。

リンクのURLを入力する欄に「#」とその後ろに「任意のHTMLアンカー」を入力します。

※ここでは先ほど指定したHTMLアンカーにジャンプしたいので「#cd」と入れます。

ジャンプ元のリンクを作成する画面

これでページ内リンクの作成完了です。

参考>>4.ページ内ジャンプに戻る

これを利用すると別の記事からも指定のブロックまでジャンプすることが出来ます。

その場合はURLの後に「#」「任意のHTMLアンカー」を入力します。

※例:https://funfunjp.com/how-to-use-swell#cd

別記事から指定のブロックまでジャンプするリンクを作る画像

5.文章でアイコンを使う

下記のような特殊なアイコンを使う場合はシュートコードで呼び出します。

例:      

下記リンク先から使いたいアイコンを選びアイコンクラス名をコピーします。

>>SWELLで使えるアイコンはこちら(SWELL公式サイト)

アイコンクラス名をコピーする画面
アイコンを使いたい場所で「[icon class="アイコンクラス名"]」と入力します。

例:AMAZONのアイコンを使いたいときは下記のように入力します。

icon class="icon-amazon"

まとめ

まとめ

今回は上記3点のSWELLの使い方を解説してきました。

SWELLはとても使いやすいWordPressテーマなので、便利に使ってブログライフを楽しみましょう!

またまだSWELLを導入しておらず、検討中の方は下記からSWELLの詳細をチェックしてみて下さい。

参考記事>>SWELLは評判以上!7つのテーマを使う私の口コミ&レビュー!

最後までご覧頂きましてありがとうございます。

何かご不明な点があれば下記連絡先からお気軽にご連絡下さい。

また当記事の感想など頂ければとても嬉しいです。

Twitterでメンション(@jun_sigotofun)つけてツイートして頂ければ私もリツィートして拡散します!

今後ともよろしくお願いいたします。

関連記事>>時短!25項目のSWELL初期設定を公式マニュアルにない具体的な値で解説

関連記事>>SWELLで魅力的なサイト型へ!トップページのカスタマイズ方法を解説!

関連記事>>完全版!WordPressグーテンベルクの使い方を54枚の画像で解説!

シェア頂けると嬉しいです!よろしくお願いします!
URLをコピーする
URLをコピーしました!

コメント

コメントする

読みたいところから読める「目次」
閉じる