オリジナルブロック

「吹き出し」の作り方

wp-jintest

作り方:/吹き出し と入力

JIN:Rでは、事前に登録しておいたキャラクターを一瞬で呼び出すことができます!

一応、デフォルトで6キャラが登録されていますが、そのままでは使いにくいはず。オリジナルキャラを登録して使ってもらえると良いでしょう。

キャラクターを登録しておこう

吹き出しブロックを執筆画面で使う前に、「カスタマイズ」>「吹き出し」に進んで、キャラクターを登録しておきましょう。

キャラクター設定

ひとまず、キャラクターの設定(画像・キャラ名)だけ終わらせておけばOKです↓

吹き出しタイプ

吹き出しタイプは「ノーマル」「こころの声」「インタビュー」の3タイプから選べます。

吹き出し色

吹き出しの色もプレビューを見ながら変更可能です。

こういった部分を作り込んで、オリジナルの吹き出しに仕上げてもらえるといいでしょう。

吹き出しが10個では足りない場合

「サイトで使うキャラクターが多すぎて10個じゃ全然足りないよ😭」という場合、ショートコードを使って吹き出しを作ることができます。

[jinr_fukidashi1 image="画像URL" name="ここにキャラ名"]<p>吹き出し内容</p>[/jinr_fukidashi1]

このショートコードの場合、「吹き出し登録1」のデザイン(枠色・キャラ配置)を引き継ぎながら「キャラクター画像」と「キャラクター名」を変更しています。

ベースの形を選ぶ

このショートコードの場合、「吹き出し登録1」のデザインが、そのまま反映されます。

[jinr_fukidashi1]<p>吹き出し内容</p>[/jinr_fukidashi1]

吹き出し1の形・色・キャラ配置を使いたい場合はこれをベースにして、カスタマイズを始めていきます。


↓ このように数字を変えると、「吹き出し登録2」のデザインが、そのまま反映されます。

[jinr_fukidashi2]<p>吹き出し内容</p>[/jinr_fukidashi2]

吹き出し2の形・色・キャラ配置を使いたい場合はこれをベースにして、カスタマイズを始めていきます。

キャラクター名 / 画像を追加する

キャラクター名と画像の設定欄を追加したショートコードです↓

[jinr_fukidashi1 name="名前" image="画像パス"]<p>吹き出し内容</p>[/jinr_fukidashi1]

name=”名前” のところに、キャラクター名を記載します。
image=”画像パス”のところには、画像のURLを記載します。

画像URLは「メディア」>「ライブラリ」に進んで、設定したい画像をクリック。そうすると画像URLが載っているので、これをコピーしましょう。それを吹き出しのimageの部分に貼り付けでください。

必要に応じてデザイン調整を

あとはお好みでデザイン調整を進めて使ってください。

デザイン変更
吹き出しデザインを変える場合、以下のパラメータをショートコード内に追記してください。パラメータを入れる箇所はどこに入れてもOKです。

//会話形式
type="d--fukidashi-chat"

//心の声形式
type="d--fukidashi-innervoice"

//インタビュー形式
type="d--fukidashi-interview"
1//ショートコード作成例//
2[jinr_fukidashi1 name="名前" image="画像パス" type="d--fukidashi-chat"]<p>吹き出し内容</p>[/jinr_fukidashi1]

キャラクター配置変更
吹き出しの配置を変える場合は、以下のパラメータを挿入してください。パラメータを入れる箇所はどこに入れてもOKです。

//左
layout="d--fukidashi-left"

//右
layout="d--fukidashi-right"

他の記事も読んでみましょう

ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
記事URLをコピーしました