ブログ記事を最後まで読んでもらうには、ユーザーにストレスを感じさせない工夫が大切です。
しかし通常のテキストコンテンツではどうしても単調になりやすく、読者の途中離脱の可能性を上げてしまいます。
そこで当サービスでは、読者の視線を適切に誘導して単調さを軽減させられるよう、吹き出しパーツをご用意しております。
この記事では、吹き出しパーツのデザインと、利用方法についてまとめました。
吹き出しのデザイン
実際の利用例は、以下の通りです。
WEB DESIGN 84
テキストが入ります！テキストが入ります！
猫さん
テキストが入ります！テキストが入ります！
猫さん
テキストが入ります！テキストが入ります！
WEB DESIGN 84
テキストが入ります！テキストが入ります！
画像や名前、背景色は、吹き出しごとに変更可能です。
挿入方法
吹き出しはショートコードを利用することで、簡単に表示できます。
具体的な手順は、下記の通りです。
① 管理画面 ＞ 投稿ページ ＞ 関連記事を追加したい記事をクリック
② ブロックの追加 ＞ ショートコード ＞ をクリック
③ ショートコードを入力する
ショートコード
ショートコードブロック
[speech id="画像ID" name="アイコン名" icon="アイコンの位置" color="吹き出しの色"]テキスト[/speech]③ 保存or公開を押して設定完了
画像ID確認方法は下記を参考にして下さい。
デフォルト値
ショートコードにはデフォルト値が設定されているため、いくつかのオプションは省略可能です。
| id | 表示する画像ID（必須） |
| name | 表示するアイコン名（必須） |
| icon | 表示するアイコンの位置を指定 （rigth,left）（省略可|デフォルト：left） |
| color | 表示する吹き出しの色を指定 (main,gray) ※mainはメインカラー（省略可|デフォルト：main） |
デフォルト値を用い最低限のオプションで設定した場合、下記のようになります。
ショートコード
ショートコードブロック
[speech id="884" name="WEB DESIGN 84"]ここに内容を入力[/speech]
WEB DESIGN 84
ここに内容を入力