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

2019 4/25
管理も簡単!SWELLのふきだし機能の使い方
記事上のウィジェットエリア

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 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 : しかくのまま(透過png用)
  • set=”登録済みアイコンセットを呼び出す”

属性値をつけた例

例 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アップデートにて、ふきだし機能をショートコードなしで利用できるように、専用のブロックを用意しました。

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

あわせて読みたい
SWELLのふきだしブロックの使い方
SWELLのふきだしブロックの使い方ver.1.1.4のアップデートに伴い実装された「ふきだしブロック」の使い方をご説明していきます。ふきだしブロックを使うことで、ショートコードを使用せず、実際の表示を...

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

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

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

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

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

ぜひご活用ください!

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

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

目次
目次