スポンサーリンク
WordPressで吹き出しを使い会話風なブログを作るやり方【カスタマイズ方法も公開】
目次
そろそろ吹き出しデビューすっか！
さんせー
でもどうやってやるの？
カエルのくせに喋るな！
この厳しいカエル社会を生き残らなければ...！
スポンサーリンク
「 LIQUID SPEECH BALLOON」
こんにちは加藤さんだよ。
今回は、冒頭のような吹き出しを使って、
「ブログのPV数を増やしたい！」
と考えている、安直な発想の方向けの記事です。
Wordpressでは、「 LIQUID SPEECH BALLOON」 というプラグインを使い簡単に実装できます。
他のはてなブログとかのツールでは知りません。
それでは実際の使い方を見ていきましょう。
スポンサーリンク
実際に使ってみた
では、実際の使い方を見ていくよ
カエルでもわかりやすいと感じました！
1．インストール
- ダッシュボードの 「プラグイン」の新規追加から、
「 LIQUID SPEECH BALLOON 」で検索
⇒インストール、有効化
これでダッシュボードの「設定」に、「 LIQUID SPEECH BALLOON 」の項目が追加されます。
2．アバター設定
- ダッシュボードの「設定」から、「LIQUID SPEECH BALLOON 」に移動
⇒アバター追加画面が表示される - アバター追加画面から、名前（登録する画像名）と、
画像URLを追加する
※画像URLは、ダッシュボードの「メディア」の画像を選択し、確認してコピペ。使用したい画像が無ければアップロード(新規追加)
これで吹き出しを使う準備が完了しました。
3．投稿時の設定
- 投稿画面(記事作成画面)の「ブロックの追加」を押すと、
「フキダシ」という項目が追加される
⇒クリックして追加すると、右側に設定項目が表示
吹き出しの背景色や、文字サイズ、吹き出しの向き、登録したアバターの選択などができます。
が、アバターを丸くしたり、アバター名の大きさなどを変えるには、CSSをいじる必要があるので、次の項目で解説します。
4．カスタマイズ
おそらく多くの方が望むであろうカスタマイズのCSSコードです。
今回は特別にコピペしてもいいですよ。
数字はお好みで変えてくださいな。
ちなみにWordpressにログインしていれば、サイトを表示すると「カスタマイズ」の項目があると思うので、そこから行います。
「追加CSS」ってところに以下のコードをコピペで完了します。
知ってるよね？
アバターの大きさ調整と、丸くする
.liquid-speech-balloon-avatar {
width: 75px;
height: 75px;
border-radius: 50%;
}
スマホ用
@media only screen and (max-width: 960px){
.liquid-speech-balloon-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
}アバター名の大きさ調整
.liquid-speech-balloon-avatar::after {
font-size: 15px;
font-weight:bold;
}
スマホ用
@media only screen and (max-width: 960px){
.liquid-speech-balloon-avatar::after {
font-size:12px;
font-weight:bold;
}
}テキストを太くし、文字サイズ調整
.liquid-speech-balloon-text p{
font-size:1.5rem;
font-weight:bold;
}
スマホ用
@media only screen and (max-width: 960px){
.liquid-speech-balloon-text p{
font-size:15px;
font-weight:bold;
}
}スポンサーリンク
フリー素材を使うのもあり
「アバターに載せる写真や画像が無いよー！」という、
どうしようもない方はフリー素材を使っても良いでしょう。
私は実写ですね。
- かわいいフリー素材集 いらすとや：https://www.irasutoya.com/
- 無料の写真素材はフリー素材のぱくたそ：https://www.pakutaso.com/
- いらすとあ | いろんな無料イラスト素材いっぱいのサイトです。：https://illlllustore.com/
スポンサーリンク
まとめ
こちらの解説記事もおすすめです
- 吹き出しで会話ができる WordPressプラグイン | LIQUID PRESS ： https://lqd.jp/wp/plugin/speech-balloon.html
- 【ブログカスタマイズ】吹き出しで会話形式にするヤツ試したら楽しくてワロタ ... ：https://www.rikei-zukin.com/entry/2018/01/07/160000
特に2番目が面白くておすすめ
これでPV数爆上がり間違いなし！
甘えるな！このアマガエルめ！
確かに、吹き出しは手段でしかないよね
結局、内容ってことです
では。