LINEみたいな吹き出しを作る方法【プラグインなし!】

愛猫:しま
しま

ニャーーーー。見てみて、これ

 


あび

ニャンだよー?どうしたの?

こんな感じの↑吹き出し。
よく見かけますよね。

人気スマホアプリ・LINEに似ているので
人目をひきやすく読みやすくなるので、大人気ですね^^

でも、今までは設定が難しいので

 


でも、やり方がわからない…!

とお困りの声も多くいただいてました。

そんなあなたに吉報です♪

もっと簡単な方法をみつけましたよ!

すぐやってみたい方は
説明は飛ばしてやり方へどうぞ。

 

Speech Bubble スピーチバブルの問題点

吹き出しと言えば
「Speech Bubble スピーチバブル」
というプラグインが有名です。

使っている方も多いと思います。


プラグイン:Speech Bubble スピーチバブル

 

でも、これ、実はちょっと
オススメしづらいプラグインでした。

理由は以下の通りです。

 

・設定が難しい

まずは1番が、
設定と使い方が難しいことです。

吹き出しに使う画像は「FTP」という機能を使って、
あらかじめ準備しておく必要があります。

普通にブログに画像を貼るのとは
ちょっと違うんです。

操作が特別複雑なわけではないんですが、

はじめてFTPを使う方は、
FTP用のソフトをインストールして
知らないソフトを使うところから始まるため、
かなりハードルは高かったです。

(さらに、FTPソフトは
万が一操作を間違えると
サイトを壊す可能性があるので
ビギナーさんにはオススメしていません)

 

・使いにくい

さらに、何とか設定できても
とても使いにくいのです。

設定が終わったら、あとは
実際にブログを書いて
吹き出しを入れたいところに、
コードを書くのですが、

吹き出しをたくさん使うと
投稿画面がこんなふうに
コードだらけに
なってしまいます。

とってもみづらくて
編集もやりにくく、しょっちゅう間違えてしまいます。

 

しかし、まだこれだけなら、
なんとか使えるのですが

一番の問題は…

 

これです。

 ↓ ↓ ↓

・全然更新されていない

プラグインの画面をみてみると・・・

右下に最終更新日が書いてあります。

 

3年前・・・・

あまり古いプラグインは危険な可能性があります。
詳しくはこちらの記事もご覧ください。

backend designer 古いプラグインはお勧めできない理由
https://wp-firststep.com/backend-designer/

backend designer 古いプラグインはお勧めできない理由

 

今はいいかもしれませんが、
このままプラグインが更新されないと、
そのうち使えなくなってしまうかもしれません。

そうしたら、このプラグインで書いていたページ
全部直さないといけないんです。

それは大変。

 

そこで…!

 

プラグインなしで吹き出しを使う方法

そこで、プラグインなしで、
吹き出しデザインを使う方法を見つけました!

 

作ってくださったのは…
サイトMORIAWASEの管理者「シェフ」さん

この記事に詳しく解説されています。

WordPressで会話風の画像とテキストをコピペで簡単表示!
https://moriawase.net/kaiwa-text-template

さらに、やり方を教えてくれるだけではなく、
この吹き出し機能を搭載した
テーマも無料
で配布されています。

神か…


ありがたい…(泣)

自分のテーマに入れる時も、
コピペするだけでOK!
だし

吹き出しを入力する画面も、
めっちゃくちゃわかりやすいのです!

 

では、早速やり方を見ていきましょう。

 

プログラムをコピペするだけでOK!

シェフさんのブログ記事

WordPressで会話風の画像とテキストをコピペで簡単表示!
https://moriawase.net/kaiwa-text-template

この記事下の方にある
「スタイルシートにコードをコピペする」というところから
ながーい「CSS」というプログラムを
コピーしてきてください。

 

コピーできたら、
あなたのブログに張り付けましょう。

 

プログラムの貼り付け方

あなたのブログを表示させたら、
画面の上にある
カスタマイズをクリックして

ライトニングカスタマイズメニュー

 

 

追加CSSをひらきます。

 

ここにぺたっと張り付けるだけ♪

 

これだけでもう、
吹き出しが使えるようになるんです♪

簡単!


あび

わーい

吹き出しの使い方

では設定後の、
実際の使い方をご説明しますね。

投稿画面の、「テキスト」
吹き出し用コードををコピペします。

 

そしてビジュアルに戻ると…

こんな吹き出しができています!!!

 

dummyと書かれた場所が画像です。
セリフうあ名前それぞれクリックして
書き換えるだけです!

なんて簡単なんでしょう…

 

うまく表示されない方は(上級者向け)

 

※中には、吹き出しが表示されず
以下のように項目だけが並ぶ方もいます。

(お使いのテーマによって異なります)

うまく表示されない方は、
先ほどのCSSを、違うところにも貼り付けましょう。

外観の「テーマの編集」に入ります。

 

すると、なんだかわけのわからない画面が出ます。

この右のあたりをよくみていただくと
いろんなファイル名が並んでいます。

その中から
「ビジュアルエディターのスタイルシート」
というのを探して、クリックしてください。

すると編集できるようになりますので、
ここにも貼り付けたCSSをコピーしてみてください。

もし、この時画面が真っ白ではなく
何か書いてあったら、それは消さないように
一番下に貼り付けてください。

ファイルを更新、を押していただくと・・

 


あび

どや


吹き出しがちゃんと表示されるはずです。

画像選びの注意事項

選択する画像は「正方形」のものを選んでくださいね。

でないと、無理やり正方形に潰されて
ぶさいくになってしまいます(笑)

 


ありゃ

毎回正方形の画像を用意するのも手間なので
私は適当な画像を入れて、
後から正方形にカットしています。

カットの仕方はこちらの記事で
ご説明してます。

WordPressでの画像の切り取り方

ボタンにしてしまえば、もっと楽!

でもこの、コードを張り付けるのが
ちょっとややこしいですよね。

なので、このコードを
ボタンに登録してしまえば、
ワンクリックで吹き出しが呼び出せます♪

 

ボタンに登録するには、
AddQuicktagアドクイックタグ
というプラグインを使います。

 

プラグインを有効にすると、設定の中に
アドクイックタグのメニューが増えるので
そちらを開いてください。

開くとたくさんのメニューがあり、びっくりしますが
使うところは3つだけです。

 

1)ボタンの名前をつける

何でもよいですがわかりやすいように
「ボタン名」に【吹き出し(左)】 などと、入力します。

    ↓ ↓ ↓

 

 

2)タグをはりつける

開始タグというところへ、吹き出しコードを貼り付けます

    ↓ ↓ ↓

 

開始タグのところに、
吹き出しのコードを全部貼り付けます。

 

 

3)チェックをつける

いちばん右端のチェックボックスをクリックすると、
全部にチェックが入りますよ。

 

お疲れ様でした♪

 

 

これさえ作っておけば、吹き出しが簡単に
使えるようになりますよ^^

こんな便利な機能を作って、
コピーOKですよ!と公開してくださる
シェフさんには本当に感謝ですね。

 

お疲れ様でした♪

また、
やり方がわからない方は
カスタマイズも承りますので、お問い合わせくださいませ^^

お問い合わせはこちらからどうぞ♪

以上、便利な吹き出し機能のご紹介でした!

Follow me!

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。