吹き出しがあれば会話形式で話が進むためわかりやすく感じます。
ずらずら―と文字を並べるより会話形式でテンポよく要点だけを進めていけば、読んでいる人も苦じゃなく読めるかなと思います。実際に出だしにはよく使う人がいると思います。
取っ掛かりとしてはおすすめの吹き出しです。
わたしは吹き出しを使おうと思ったときに、プラグインでLIQUID SPEECH BALLOONというものがおすすめだとでてきました。
LIQUID SPEECH BALLOONインストール
これはとても簡単です。
左のダッシュボードの中からプラグインという項目から新規追加で、LIQUID SPEECH BALLOONを検索してください。
こちらをインストールして有効にするだけです。ここらへんはだれでも出来るかと思います。
有効にした後はブロック内にLIQUID SPEECH BALLOONが出てくるかと思います（ない場合は全て表示にしないと出てきていないだけかもしれないです）
よし！できたー！と思って早速使ってみたら・・・
こうなりませんでしたか？！あれ？思ってるのと違う！！余白でかー！あれ！？と思った人わたし以外にもたくさんいると思います。
ここからたくさん調べてこれ！というものにたどり着きました。ぜひぜひ真似してみてください！
LIQUID SPEECH BALLOONのCSS
CSSというものをいじっていきます。
わたしもよくわかっていませんが、テンプレートを少し自分風にアレンジするよというものだと思ってくださればいいかなと思います。（テンプレートが崩れるなどありますので、十分注意してから自己責任でお願いいたします）
ここらは専門的なので、まだまだですが、今回はこのまま貼り付けていただければと思っています。
まずCSSはどこに入れればいいのかというと2か所あります。
- 外観 → テーマエディタ → style.css
- 外観 → カスタマイズ → 追加css
この箇所より入力ください。下記CSSを入力ください。
/* Liquid speech balloonの余白サイズを調整 */
.liquid-speech-balloon-text p{
margin-bottom: inherit;
}
/* Liquid speech balloonの余白サイズを調整 */
/* Liquid speech balloonのアイコンサイズを調整 */
.liquid-speech-balloon-avatar{
width: 84px;
height: 84px;
}
/* Liquid speech balloonのアイコンサイズを調整 */これでどうでしょうか！？
わたしは余白サイズの調整だけしていますが、アイコンが小さいなと感じるときもあるので、様子を見て大きさを変えていこうかなと思っています。
ねこくんの文字がその場合被ってしまうので、文字を消して少し大きくしようかなとも思っております。
LIQUID SPEECH BALLOONのブロックについて
LIQUID SPEECH BALLOONは見たままの感覚でいけるかなとは思いますが、ブロックについて説明しておきます。
LIQUID SPEECH BALLOONを選ぶと画面右にブロックがでてきると思います。下の画像がブロックです。
AVATAR→プラグインから登録したアバターを選ぶことができます
DIRECTION→吹き出しを右、左と選べます
DESIGN→吹き出しの種類を選ぶことができます
SIZE→文字サイズを選べます（アバターも小さくなったり大きくなったりします）
OPTIONS→吹き出しの長さを変更したり、吹き出しを上下にしたりできます
Color Settings
Background Color→吹き出しの中の枠色、中の色を変えます
Text Color→吹き出しの文字の色を変えます
※Color Settingsの横の3つの点をクリックするとリセットできるので気にせず試してみてください
文字ばかりのページから少し華やかになる吹き出しをぜひ活用してみてください！
コメント