【便利!】スマホだけ非表示や改行も簡単!SWELLのブロックツールバーの使い方

【便利!】スマホだけ非表示や改行も簡単!SWELLのブロックツールバーの使い方

今回はWordPressテーマ『SWELL』のブロックエディター専用機能の一部、ブロックツールバーの機能と使い方をご紹介します。

トップページなどのレイアウトを組むために便利な機能や、記事を書いていく上で重宝する機能など、ツールバーの拡張機能だけでもとても充実しています。

どれも簡単な操作で使えますよ…!
SWELLのブロックツールバーの魅力
  • スマホ、PCサイズで表示、非表示をクリックだけで切り替え
  • ショートコードで便利機能を簡単に呼び出せる
  • マーカーなどテキストの装飾も充実
WordPressテーマ「SWELL」
  • ブロックエディタ完全対応
  • 複数サイトで使用OK
  • サポートも充実
オシャレなサイトで楽しく記事を書こう!
目次

SWELLはブロックツールバーの機能が豊富!

SWELLはブロックエディターに最適化されたテーマです。

そのため、SWELL専用のブロック機能が豊富に搭載されています。

その中で、今回はブロックツールバーに注目して、おすすめの機能を紹介していきたいと思います。

ブロックツールバーとは

任意のブロックを選択している時に、ブロック上部に表示されるツールバーのこと。

SWELLのブロックツールバー

PC、スマホの改行位置や表示/非表示の切替がクリックだけでできる!

SWELLではブロックを組み合わせながら、オリジナリティのあるトップページを作ることができます。

そんな時に、僕がとてもありがたいと感じている便利な機能をまずは2つ紹介します。

どちらも、PCとスマホで閲覧した時の表示を切り替えることができる機能です。

  • デバイスごとにブロック表示、非表示を切り替える
  • デバイスごとに改行を挿入できる
さとしん

どちらもマウスをクリックするだけで設定を変更できます…!

デバイスごとにブロックの表示、非表示を切り替える

PCからの閲覧時には表示したいけど、スマホで閲覧する際はスペースの都合で非表示にしたい。といったケースがあります。

例えばSWELLのレビュー記事では、比較用の2つの画像の表示方法をPCとスマホで変えています。

PCとスマホで表示を分けた例

これが、ブロックツールバーのタブをクリックするだけで設定可能です。

もちろん、逆の「PCでは非表示、スマホでは表示」の設定もできます。

では、設定方法を解説します。

STEP
対象のブロックを選択
STEP
ブロックツールバーから「デバイスコントロールタブ」をクリック
SWELLのデバイスコントロール-2
STEP
お好みの表示方法をクリック
SWELLのデバイスコントロール-3
  • スマホだけで表示させる場合:スマホサイズでのみ表示する
  • PCだけで表示させる場合:PCサイズでのみ表示する
さとしん

それぞれのデバイスに合った要素を簡単に配置できるのでとても重宝しています…!

デバイスごとに改行を挿入できる

こちらもトップページを作る際などにとても便利な機能です。

文章の中の任意の場所で、スマホ、PCそれぞれ改行を設定することができます。

この機能は、テーマ『SWELL』専用のショートコードと呼ばれるものを呼び出すことで簡単に設定が可能です。

設定方法は以下の通りです。

STEP
ブロック内の改行したい場所にカーソルを合わせる
STEP
ブロックツールバーから「ショートコード」をクリック
SWELLのショートコード
STEP
お好みの改行方法をクリック
SWELLのショートコード-2
  • スマホだけで改行させる場合:スマホだけ改行
  • PCだけで改行させる場合:PCだけ改行
さとしん

デバイスの画面サイズに合わせて適切な位置で改行してあげると、見栄えも良くなりますよね…!

広告やアイコン挿入のショートコードも搭載!

デバイスごとに改行位置を指定できるショートコードを紹介しましたが、その他にもショートコードが用意されています。

  • 記事内広告
  • アイコン用ショートコード
  • 評価用スター
  • ログイン時限定コンテンツ

記事内広告

例えば、Googleアドセンスなどの広告を任意の場所に簡単に呼び出すことができます。

事前にショートコードで呼び出す広告を設定しておく必要があります。

以下の手順で設定が可能です。

STEP
管理画面→「SWELL設定」をクリック
SWELLの記事内広告
STEP
「広告コード」タブ→「記事内広告」内に広告のURLを入力
SWELLの記事内広告-2

設定が完了していれば、挿入したい場所でショートコードから「記事内広告」をクリックするだけで広告の挿入が可能です。

SWELLのショートコード-3

[ ad]と直接入力してもOKです。

さとしん

毎回長いコードを入力しなくて良いので楽ちんです…!

アイコン用ショートコード

SWELLのショートコード-4

ブロック内の任意の場所にアイコンを呼び出すショートコードもあります。

ショートコードを呼び出すと[ icon class="アイコンクラス名"]と表示されるので、”アイコンクラス名”の箇所に任意のクラス名を入力するだけでOKです。

SWELLで使用できるアイコンの一覧やアイコンクラス名は公式サイトでまとめられています。

また、Font Awesomeのアイコンを使用することができます。こちらも公式サイトのマニュアルを参考にしてください。

さとしん

公式サイトのマニュアルが充実していて本当にありがたいです…!

評価用スター

SWELLのショートコード-5

評価用のスターを呼び出せるショートコードです。

[ review_stars */*]のアスタリスクにした部分に任意の数字を入力するだけでOKです。

たとえば、5点満点中3.5点()とする場合は[ review_stars 3.5/5]と入力します。

3点満点中の3点()であれば、[ review_stars 3/3]となります。

さとしん

簡単なので使ってみてください…!

ログイン時限定コンテンツ

SWELLのショートコード-6

ログインしている時にだけ表示する要素を設定できるショートコードです。

まだ途中で、一般のユーザーには見せたくないテキストなどがある場合に有効です。

ショートコードを呼び出すと[ only_login]ログイン時にだけ表示したいコンテンツ[ /only_login]と表示されます。

ここの“ログイン時にだけ表示したいコンテンツ”の箇所にログイン時のみ表示させたいテキストを入力すればOKです。

[ only_login] と[ /only_login]で囲ってあげる必要があるので注意してください。

ブロック下の余白も簡単に変更できる!

『SWELL』ではブロックの下の余白をボタンのクリックだけで変更することができます。

STEP
任意のブロックを選択
STEP
ブロックツールバーから「ブロック下の余白量」をクリック
SWELL-ブロック下の余白量
STEP
任意の余白量を選択
SWELL-ブロック下の余白量-2

この機能を使うと例えば、以下のようなマイクロコピーも簡単に作ることができます。

\ おすすめのWordPressテーマ /

これは\おすすめのWordPressテーマ/と入力した段落ブロックの余白を「無し(0)」に設定しています。

もちろんマーカー線などテキスト装飾機能も充実!

ブロックツールバーには「SWELL装飾」という項目もあります。

SWELLのテキスト装飾

ここでは、よく見かけるマーカー線などのテキスト装飾が可能です。

マーカー線は以下の手順で4種類から選択することができます。

STEP
管理画面→「エディター設定」をクリック
SWELLのテキスト装飾
STEP
「マーカー」タブをクリック
SWELLのテキスト装飾-2
STEP
好きなスタイルとカラーを選択
SWELLのテキスト装飾-3
さとしん

僕は細ストライプがお気に入りです…!

その他、「SWELL」装飾から以下のような設定もできます。

  • フォントサイズの変更
  • 背景色の設定
  • 注釈 注釈は文字が小さく薄く表示される機能です。

それぞれのテキスト装飾を適用させてみました。

いずれの機能も記事を書いていく中で使う場面が多々あるので、ツールバーから設定できるのはとても助かりますね。

ブロックツールバーから簡単に設定できるので記事の執筆が早くなる!

今回は、SWELL専用のブロックツールバーの拡張機能をご紹介しました。

記事の装飾やトップページのレイアウトなど、いろいろな場所で活躍する機能がとても多いと感じています。

また、ブロックツールバーで設定が変更できると、マウスの移動が最小限で済むので無駄な動きを少なくすることができます。

その結果、記事を書くスピードが早くなるという効果も期待できます。

ブロックエディターに関する機能が豊富な『SWELL』、ブロックエディターを効率よく使っていきたいという方におすすめです!

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

WordPressテーマ「SWELL」
  • ブロックエディタ完全対応
  • 複数サイトで使用OK
  • サポートも充実
オシャレなサイトで楽しく記事を書こう!
【便利!】スマホだけ非表示や改行も簡単!SWELLのブロックツールバーの使い方

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

よかったらシェアしてね!

この記事を書いた人

WordPressとSWELLが好きな20代のブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。

目次
閉じる