管理も簡単!SWELLのふきだし機能の使い方

記事上のウィジェットエリア

このページでは、SWELLに標準搭載されている、「ふきだし機能」の使い方を紹介します。

スマホねこ
こんな感じです!
がんばって作ったよ…
目次
目次広告表示エリア

表示するときはショートコードで呼び出すだけ

ふきだし機能はカスタマイズ性の自由度が大切なので、ショートコードで呼び出せるようにしています。

ショートコードの呼び出し名は[ふきだし]または[speech_balloon]です。

もっともシンプルな呼び出し

属性値を何も指定しない、もっともシンプルな呼び出し方法だと以下のようになります。

[ふきだし]ここにふきだしの内容を記述します[/ふきだし]

実際のよびだし
ここにふきだしの内容を記述します

このように、画像なしのグレー色のふきだしとなります。

ふきだしショートコード に使用できる属性値について

ショートコードは、属性値というものを指定することで内容をカスタマイズできます。

SWELLのふきだしで使用できる属性値は以下の通りです。

  • 登録済みの「ふきだしセット」を呼び出すために使用する属性
    • set="セット名"
    • (ver.2.3.0以降はこちらを推奨) id="セットID"
  • ふきだしセットを使わない場合 or ふきだしセットの内容をさらに上書きする時に使用する属性
    • icon="画像URL"
    • name="アイコン下に表示される名前"
    • col="ふきだしの色"
      • gray / green / blue / red の4種類が使用できます。
    • type="ふきだしの形"
      • gray / green / blue / red の4種類が使用できます。
    • align="left|right"
      • ふきだしを左から表示するか右から表示するか
    • border="on|none"
      • ふきだしに線枠をつけるかどうか
    • icon_shape="circle|square"
      • アイコンの形

属性値をつけた例

例 1

[ふきだし icon="https://swell-theme.com/wp-content/uploads/2019/04/icon_ryo.jpg" name="なまえ" col="green" border="on"]ここにふきだしの内容を記述します[/ふきだし]

なまえ
ここにふきだしの内容を記述します
例 2

[ふきだし col="red" align="right" type="thinking"]ここにふきだしの内容を記述します[/ふきだし]

ここにふきだしの内容を記述します

ただ、これらのようにいちいち細かく属性値を指定するのは面倒ですよね。

そこで、SWELLでは「ふきだしセット」を登録することができるようにしています!

ふきだしセットを追加する

SWELLで使えるふきだしは、色や形、アイコン画像などの設定を1つのセットとして登録できます。

管理メニューの「ふきだし」から、通常の投稿のように自由に追加できます。

ふきだしセット一覧画面

上記の画像のように、登録した「ふきだしセット」は一覧画面でもプレビューでき、呼び出しコードも表示しているのすぐにコピペで使用可能です!

ふきだしセットを呼び出す

[ふきだし set="セット名"] のようにすることで、簡単に登録したふきだしを呼び出すことができます。

例 1

たろう(心の声)」という名前で登録しておいたセットを呼び出してみましょう。

[ふきだし set="たろう(心の声)"]のんびりしたいなぁ[/ふきだし]

たろう
のんびりしたいなぁ
例 2

他の属性値と併用することで、セットの内容を上書きして呼び出すことも可能です

[ふきだし set="たろう(心の声)" col="red" name="たろう(怒り)"]むむむ...っ[/ふきだし]

たろう(怒り)
むむむ…っ

ブロックエディターにふきだし専用ブロックを追加!

ver.1.1.4アップデートにて、ふきだし機能をショートコードなしで利用できるように、専用のブロックを用意しました。

詳しくは以下の記事をご覧ください。

クラシックエディターでの簡単なふきだしセットの呼び出し方

クラシックエディターでは、登録済みのふきだしセットツールバーから簡単に選択できるようになりました。

「特殊パーツ」>「ショートコード」>「ふきだし」の中に登録済みのふきだしセットが一覧で表示されます。

クラシックエディターからのふきだしセットの呼び出し

ふきだし機能の説明は以上となります!

ぜひご活用ください!

記事下のウィジェットエリア

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

よかったらシェアしてね!
目次
閉じる