STILEで吹き出しを使う方法(ブロックエディター&ビジュアルエディター)

2,184views

STILEで吹き出しを使う方法(ブロックエディター&ビジュアルエディター)のアイキャッチ画像

今回は、WordPressテーマSTILEで吹き出しを使う方法を紹介します。

吹き出しの作成はブロックエディターとビジュアルエディターの両方に対応しており、どちらでも簡単に作成できます。

あらかじめ吹き出しの人物(キャラクター)を登録しておくと楽

STILEには「吹き出し管理」という機能があり、ここで吹き出しに使用する人物やキャラクターを登録しておくと便利です。

管理画面の左サイドバーにある、「吹き出し管理」で「新規作成」をクリック

新規追加すると以下のような画面になります。

これで「タイトル」「名前」「吹き出しのアイコンを設定してください。

ここからは設定した吹き出しを使う方法を、ブロックエディターとビジュアルエディターに分けて説明します。

ブロックエディターで吹き出しを使う

以下の手順で吹き出しを作成できます。

「【stile】カスタムブロック」の中にある、「吹き出し」を選択します。

吹き出しのブロックを選択した状態でサイドバーにある「設定済み吹き出しを呼び出す」から作成した吹き出しの設定を呼び出します。

そうするとアイコンと名前が自動で挿入されます。

管理人管理人

ここに吹き出しの中身を入力

あとは、吹き出しの中にセリフを入力して、カラーや向きを設定してください。

ビジュアルエディターで吹き出しを使う

ビジュアルエディターで吹き出しを使うときは、ショートコードを利用してください。

先ほど設定した「吹き出し管理」のページに、ショートコードがあるのでコピーしてください。

[talk set="管理人" pos="left" color="gray"]

ここに吹き出しのセリフを書いていく。

[/talk]

pos="left"の部分はpos="right"に書き換えると吹き出しの向きが逆になります。

color="gray"の部分で色を設定できます。

管理人管理人

ここに吹き出しのセリフを書いていく。

[talk set="管理人" pos="left" color="pink"]

ここに吹き出しのセリフを書いていく。

[/talk]
管理人管理人

ここに吹き出しのセリフを書いていく。

[talk set="管理人" pos="left" color="blue"]

ここに吹き出しのセリフを書いていく。

[/talk]
管理人管理人

ここに吹き出しのセリフを書いていく。

[talk set="管理人" pos="left" color="skin-color"]

ここに吹き出しのセリフを書いていく。

[/talk]

自由に色を選べるという点では、ブロックエディターの方が便利です。

おすすめWordPressテーマ

No.1
STILE

バナー

デザイン設定が豊富なWordPressテーマ。
プラグインでブロックエディターにも対応。
アドセンスの表示が楽に行えます。

No.2
STILE

バナー

高速化機能でページの読み込みを高速化。
カラー設定が豊富で好みのスタイルにできます。
便利なショートコードも多数搭載しています。

No.3
STILE

バナー

WordPressテーマ「STILE」なら、カテゴリー周りのカスタマイズも可能。
カテゴリー一覧に好きなテキストを表示させたり、カテゴリーカラーを設定して、記事のカテゴリーによって色を変えることも可能です。

この記事を書いた人

WP Avenue開発者

WP Avenue開発者

WordPressテーマ「STILE」の開発者。
Web制作歴、ブログ歴は5年以上。

WordPressテーマ「STILE(スティーレ)」14,300円(税込)

CTA画像

デザイン設定が豊富なWordPressテーマ。
記事執筆が効率化できる便利な機能を多数搭載。
ブロックエディター用プラグインも配布しています。

コメント(3件)

  • うみ より:

    いつもお世話になっております。
    簡単かつ美しいSTILE大変気に入っています。

    ところで、吹き出しはいくつも登録できるようですが、エディターで実際に呼び出しができるのは、4つが限界なんでしょうか?

    頻繁に使うので、追加で登録していったら、以前のものが呼び出せなくなり、残念です。

    • WP Avenue開発者 より:

      お世話になっております。
      テーマのご利用ありがとうございます。

      吹き出しブロックですが、登録した吹き出しが全て表示されない不具合でございました。
      こちら修正後、明日(3/9)中にアップデートを反映いたします。
      ご迷惑をおかけし大変申し訳ございませんでした。

      何卒宜しくお願い致します。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

3 × 1 =