WPテーマ「SWELL」ブロックエディタ主な機能の使い方

ザッキーのアイコン画像ザッキー

今話題のWPテーマ「SWELL」の主な使い方を説明するね。SWELLは現在、月に3-4回のアップデートを行い、どんどん進化しているので、追いつくのが大変だけど最新情報をお伝えしたい。

SWELLの凄さは、”WPテーマ「SWELL」購入レビュー おすすめ理由15” をお読みいただくとして、本記事ではSWELLが持つ多彩な機能の使い方を説明したいと思う。

SWELLはCSSの追加やプラグインをインストールせずにほとんどのことができてしまうが、ここでは多くの機能の中から比較的によく使う(少なくとも筆者がよく使う)機能のハウツーを説明する。

SWELLを導入する前、筆者はブロックエディタ(Gutenberg)は使いにくいと感じ、クラシックエディタを使っていたが、SWELLに乗り換えてからはブロックエディタを使うことになった。

SWELLならブロックエディタを簡単に楽しく使いこなせてしまったのだ。

それに、クラシックエディターは2021年の12月31日でサポートが終了するので、この際ブロックエディタに切り替えようと思った、ということもある。

というわけで、ここでのSWELLの使い方は、ブロックエディタによるものとなる。

SWELLとは?おすすめ15の理由/

スポンサーリンク

タップで飛ぶ目次

アコーディオン、吹き出し、ボタン、FAQ、タイムライン等が簡単に作成

」(ブロックの追加)から、ふきだし、アコーディオン、タブ、FAQなどが簡単に作成できる。

アコーディオン、タブ、吹き出し、ボタン、キャプション付きブロック、FAQ(Q&A)、ステップ(タイムライン)等が簡単に作成できる。

「1.プラグインが最小限で済む」で触れたように、クラシックエディタは削除してしまったので、以下の説明はブロックエディタ(Gutenberg)で作業する場合とさせていただく。

FAQ(Q&A)を作成する

1.

「+」(ブロックの追加)→「SWELLブロック」クリック

2.

「FAQ」をクリック

3.

ブロックを選択し、右のバーで形や色の指定を行う。

4.

右バーの赤枠のように選択すると、左ブロック内のようになる。

ふきだしを作成する

「ふきだし」は一度設定しておけば、「SWELLブロック」から呼び出し簡単に作成できる。

設定は、ワードプレスダッシュボードサイドバーの「ふきだし」→「新規設定」。

タイトルを追加」、「アイコン画像」の読み込み、「名前」付けのほか、アイコンの丸枠の有無、「ふきだしの形」(「発言」か「心の声」)か、「ふきだしの向き」(アイコンが左側か右側か)、「ふきだしの線」の有無、「ふきだしの色」などが設定できる。後半の「ふきだしの形」以降は「SWELLブロック」で呼び出してからでも変更できるのが嬉しい。

1.

投稿欄で「+」(ブロックの追加)→「SWELLブロック」→「ふきだし」

2.

ふきだし欄にテキストを入力し、右サイドバーから「ふきだしセット」を選択、「ふきだし設定」で色などを設定する。

3.

右サイドバーで赤枠のように選択すると、投稿欄のブロック内に、このような「ふきだし」が作成される。

他のテーマだと実際のふきだしは見えずショートコードが表示され、いちいちプレビューしなければならないが、SWELLは実際のふきだしを見ながら編集できるので間違いが生じにくく、手間を大幅に減少できる。

SWELLにはこうした、ちょっとした使いやすさが随所に散りばめられている。

SWELLボタンの作成

1.「」→「SWELLボタン

2.ブロックにボタンが現れる。赤にしたければ「ボタンカラー設定」の赤丸をクリックする。

3.赤に変わる。リンクURLやボタン内の文字を入力する。

4.ボタンの幅を広げたい時は「」ボタンをクリックする。

5. ボタンが拡大する。

ボタンの形や色、グラデーションの設定は、「SWELL設定」→「エディター設定」→「ボタン」から行う。

リストの作成

リストも簡単に作成できる。

1.

「+」(ブロックの追加)→「一般ブロック」→「リスト」

2.

ブロックを選択し、右サイドバーからスタイルを選択する。

リストのスタイルには次のような種類がある。

丸数字リストの設定

筆者は、頭に丸数字が付くリストをつくる方法が分からずしばし困った。最初、サイドバーの「丸数字」を選べば良いと思ったのだが、円内の数字がすべて「0」になってしまい、1,2,3、4と並ばなかったからだ。そこら中探してやっと分かった。リストのブロックを選択すると上のバーに現れる赤枠内をクリックすると数字が振られるのだ。

  • リスト
  • リスト
  • リスト
  1. リスト
  2. リスト
  3. リスト

色、ボーダー、スタイル、ボックス設定

1.

「SWELL設定」→「エディター設定」と進む。

2.

「カラーセット」「マーカー」「ボタン」「アイコンボックス」「ふきだし」「その他(ブログカード)」の設定ができる。

このような設定ができる。

サムネイルの肩に付くカテゴリーを消す方法

筆者が丸数字のナンバリングとともに、なかなか分からなかった方法がサムネイルの肩に付くカテゴリーの外し方だ。

初期設定ではカテゴリはサムネイルの上部に表示されるように設定されている。

ところが、筆者にはこのカテゴリーが鬱陶しく感じられ、今まで使用していたテーマ「JIN」では、CSSを追加して消していたから、「SWELL」での消し方もネットで調べた。

が、その方法は分からず、結局SWELL内を探してやっと見つけた。SWELLの機能に入っていたのだ。

サムネイルのカテゴリの消し方

1.

「カスタマイズ」→左サイドバー「記事一覧リスト」クリックする。

2.

左サイドバーを下方にスクロールして「カテゴリーの表示設定」の「投稿のカテゴリー表示位置」のプルダウンメニューから「表示しない」を選び、「公開」する。

3.

「投稿日時の横に表示」を選ぶと、サムネイルの写真やタイトルにかからずカテゴリーを表示できる。

「投稿リスト」の場合、サイドバー「カテゴリー表示位置」で「表示しない」を選べば消すことができる。抜粋文のなし(0)、その文字数(40,80,120,160)も設定できる。

広告タグの作成

SWELLの広告設定は、「SWELL設定」にある「広告コード」とダッシュボードの「広告タグ」という2つを使う。

広告コード」は、ショートコード[ad]で配置できる「記事内広告【ad】」、クリック率が高い目次前に広告を配置できる「目次前広告」、GoogleAdSense(アドセンス)の自動広告が設定できるがページごとに非表示にできる「自動広告」、トップページのサムネイルの間に広告を挟める「インフィード広告」の欄があり、そこにアドセンスなどのコードを入力することで、広告が配置できる。

「JIN」の場合、「記事下」「関連記事下」などにも配置できる欄があるが、「SWELL」では、「目次前」しかないのは残念。

アドセンスの自動広告は、とんでもない所に広告が入ってしまったりするので筆者は使わない。使ってみたが止めた。ページによって非表示にできるのは良い。

記事内にはショートコード[ad]で広告を配置できるのは便利。

広告タグ」は、「テキスト型」、「バナー型」、「アフィリエイト型」、「Amazon型」、「ランキング型」が設定できる。

アフィリエイト型の例

広告タグの使い方

1.

タイトルを追加」に自分が分かりやすい適当なタイトルを入れ、「広告タイプ」を選び、枠ありか枠なしかを選択し、広告コードをペーストする。右側の「公開」ボタンをクリックするこの画像は登録した後なので「公開」が「更新」に変わっている)。

2.

サイドバーの「広告タグ」をクリックすると、赤枠の位置にショートコードが現れるので、これをコピーして記事の中にペーストすれば広告が表示される。

投稿欄から広告タグの広告を呼び出す方法は次のとおり。

1.

「+」(ブロックの追加)→「SWELLブロック」→「広告タグ」クリック

2.

広告タグには「バナー型」「アフィリエイト型」「Amazon型」「ランキング型」があるが、ここでは「バナー型」を選ぶ。

3.

登録済みの中から例としてここでは「U-NEXT」を選ぶ。

4.

登録したバナー広告が現れる。

関連記事(合わせて読む)の作成

次の手順で「合わせて読む」などのブログカードが簡単に作れる。

1.

」→「SWELLブロック」をクリック

2.

記事をキーワードで検索するか記事のIDで呼び出す。ここではワードで検索し、該当記事を選ぶ。

3.

「合わせて読みたい」記事が現れる。

4.

「合わせて読みたい」というワードを変えたければ、「合わせて読みたい」関連記事をクリックすると現れる、右のキャプション欄に変更したいワードを入力する。

これは外部リンクにも同様に使えるスグレモノだ。

ページ速度の高速化

多くのプラグインを削除することができ、追加CSSが減ることでページ速度がかなり高速化する。また、「SWELL設定」で高速化できる。

1.

「SWELL設定」→「設定ページへ」→「高速化」

2.

自分に必要な項目を選んで左下の「変更を保存」ボタンをクリックする。

Rinker(リンカー)の表示を整える

SWELL公式サイトで提供されているCSSを「追加CSS」にペーストするだけでRINKERで作った商品リンクが整う。

RINKERの表示を整えた例がこれ↓

RINKERを呼び出す方法

「+」(ブロックの追加)→「レイアウト要素」→「Rinker」

2.

「商品リンク追加」をクリック

この空欄に商品のショートコードを入れれば「5」の画面が現れる。

3.

Rinkerの商品検索欄が現れるので、呼び出したい商品名等を入力し、「検索」ボタンをクリック

4.

候補が現れるので、掲載したい商品の「商品リンクを追加」をクリック

5.

すると次のような商品リンクのユニットが現れる。

目次の自動作成/デザインは4種類

SWELLには 目次の自動作成機能が備わっているのでTOCなどの目次作成プラグインが不要となる。しかも、デザインが4種類から選べる(最近のアップデート2.1.7で「上下ボーダーが加わり、3種類から4種類に増えた)。

シンプル

ボックス

上下ボーダー

ストライプ背景

目次の設定

1.

「カスタマイズ」をクリック

2.

左サイドバーから「投稿・固定ページ」をクリック

3.

「目次」をクリック

4.

目次のスタイルを「シンプル」「ボックス」「上下ボーダー」「ストライプ背景」という4種類の中から選ぶ。

ここでは以下の設定だ可能だ。

  • 目次の表示を投稿ページか固定ページか、あるいはそのどちらにもかを選べる。
  • 目次のタイトルを付けられる。
  • 目次のデザインも4種類の中から選べる。
  • 数字とドット部分のカラーも設定できる。
  • どの階層の見出しまでを抽出するか。
  • 見出しが何本以上あれば抽出するか。

目次の設定ではないが、目次前広告を目次の後におく設定もここでできる。

ドット・数字部分のカラーを変えてみた。

「ブログパーツ機能」の使い方

SWELLには、パーツを登録して呼び出せる「ブログパーツ機能」がある。

これもあったらいいなと思っていた機能。

ブログパーツを登録する。

1.

ワードプレスのサイドバーから、「ブログパーツ」→「新規追加」

2.

タイトルとパーツを作成し、「下書き保存」する。「非公開」でも構わない。

3.

左上の「」かブロックの「」をクリックし、「SWELLブロック」の「ブログパーツ」をクリックする。

4.

使いたいブログパーツを選択する。

5.

ブログパーツのプレビューが現れる。ショートコードでも呼び出せる。

画像のサイズを変更

たとえば、ブログ記事制作においてアップロードした画像のサイズを変えたいことはよくあることだが、SWELLはこれも簡単にできてしまうのだ。

イメージを選択すると、サイドバーに赤枠の操作パネルが現れるが、大まかに「サムネイル」「」「」「フルサイズ」と変更できる以外にも、(高さ)を変えられたり、25%50%75%にボタンひとつで変更できたりする。

さらに、「少し小さく表示」「小さく表示」などの微調整も簡単に行える。

画像に枠やシャドウを付ける

たとえば下の写真のように白バックの場合、枠やシャドウを付けたいことがある。

そんな時、写真を選択後1クリックで枠やシャドウが付けられるのだ。

写真(画像)に枠や影をつける方法

1.

写真ブロックを選択し、上のバーの写真アイコンをクリックする。(実はこの画像もこの方法で枠を付けている)

3.

「枠あり」をクリックすれば枠が付くし、「影あり」をクリックすればシャドウが付く。

4.

枠あり写真のできあがり。

「影あり」にすると↓

「角丸」を選ぶと↓

1クリックで枠も影も角丸も! 実に簡単だ!

\開発者のTwitterよりSWELLでブロックエディタを使う様子(動画)/

SWELLとは?おすすめ15の理由/

ダウンロード・購入はSWELL公式サイトから/

関連記事

タップで飛ぶ目次
閉じる