プログラミング学習記録 学生生活

【簡単】WordPressで吹き出しを使い会話風なブログを作るやり方【カスタマイズ方法も公開】

更新日:

スポンサーリンク

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;
}
}

スポンサーリンク

フリー素材を使うのもあり

 「アバターに載せる写真や画像が無いよー!」という、

 どうしようもない方はフリー素材を使っても良いでしょう。

 私は実写ですね。

スポンサーリンク

まとめ

 こちらの解説記事もおすすめです

これでPV数爆上がり間違いなし!

甘えるな!このアマガエルめ!

確かに、吹き出しは手段でしかないよね

結局、内容ってことです

では。

-プログラミング学習記録, 学生生活

Copyright© katoooblog , 2019 All Rights Reserved Powered by STINGER.