toggle
2018-08-28

WordPressで会話形式の吹き出しを簡単に表示する方法

 

どうも!そのべっきーです

ついに僕もブログで会話できるようになりました‼︎

 

え、どういうことかって??

 

 

そのべっきー

こういうこと!!!

 

ほかのブロガーさんのブログで会話形式の吹き出しが使われてるのを見て、じぶんも使ってみたいな〜と思ってました

 

ブログにリズムが生まれて見やすくなりますし、カギカッコを使うよりも会話らしさが出ていいですよね

 

 

ワードプレスでこういう会話形式の吹き出しを表示するには

  1. プラグインを使って挿入する(Speech Bubble)
  2. テンプレートを作って挿入する

の2通りの方法が主にあります

 

僕はテンプレートを使って挿入する方法を選びました

 

 

非リア

2人は会話してるんかな〜

ええな〜

 

 

プラグインを使って吹き出しを表示する

プラグインを使って吹き出しを作りたい方は、Speech Bubbleというプラグインがよく使われているみたいです

 

 

こちらのページが一番わかりやすいかなと思ったので、プラグインを使って吹き出しを表示したい方は参考にしてみてください

 

Speech Bubbleを使うと、9種類の吹き出しが使えるので、いろんな種類の吹き出しを使いたい方にはプラグインを使うことをオススメします

 

ただ、画像をサーバーのフォルダにアップロードしなくてはいけなかったり、吹き出しを表示する度にコードを入力しなくてはいけないのが難点かなと感じました

 

ぼくはそれが面倒くさそうに感じてしまったのでテンプレートを使って吹き出しを表示することにしました

効率重視マン

手間がかかるのはちょっと…

 

テンプレートを使って表示する

正確には、テンプレートを使う際もテンプレートを作るためのプラグインをインストールして表示することになります

 

Speech Bubbleと違っていいなと思った点は、最初にテンプレートを作ってCSSを追加してしまえば吹き出しを表示したいときにいちいちコードを入力する必要がなく、画像もワードプレスのメディアファイルから引っ張ってこれるので、シンプルでわかりやすいということです

 

テンプレートを作るのも、CSSを追加するのもコピペだけで済んでしまったのでとても簡単でした

 

参考にさせていただいたサイトはこちらです

 

とてもわかりやすく、憧れの吹き出しを表示するまであっという間でした

 

なお、ぼくが使っているワードプレスのテーマではビジュアルエディタで吹き出しが表示されなかったのですが、テーマが対応していなくてビジュアルエディタで吹き出しがどんなふうになるか表示されないという方は下記のページを参考にしてみてください

 

WPど素人

わかんなくてもググればなんとかなった

 

 

まとめ

ブログにリズムを出したり、カギカッコを使うよりイメージしやすい会話を展開したりするのには吹き出しが必須ですよね

 

ぜひ吹き出しを使って快適なブログライフを送りましょう

 

最後に、参考にさせていただいたシェフさんありがとうございます

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Photos