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

愛猫:しま
しま

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

 


あび

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

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

LINEみたいで、目をひきやすく
読みやすくなるので、大人気ですね^^

やってみたいけどわからない…!

という方はいらっしゃいませんか?

今まではちょっと設定が難しかったのですが、

吉報です!

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

 

 

今までの吹き出しの作り方の問題点

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

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


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

 

でも、これ、実はちょっと

難しいプラグインでした…(;^_^A

 

・設定が難しい

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

吹き出しに使う画像は「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をひらきます。

 

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

 

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

簡単!

 

吹き出しの使い方

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

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

 

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

もう吹き出しができています!!!

 

画像、セリフ、名前それぞれクリックして
書き換えるだけです!

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

 

 

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


これは、お使いのテーマによって異なります。
(吹き出しになっていない方も、
カスタマイズして直すことができますよ!〉


あとはそれぞれ画像・文字を書き換えてあげれば…

 


あび

どや


吹き出しの出来上がり✨

 

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

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

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

登録には、もうひと手間ありますが、
本当にお手軽になるので
ぜひ挑戦してみてください!

 

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

 

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

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

 

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

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

    ↓ ↓ ↓

 

 

2)タグをはりつける

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

    ↓ ↓ ↓

 

3)チェックをつける

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

    ↓ ↓ ↓

 

これで保存すれば設定OKです。

ね、かんたんですよね。

投稿画面に戻ると、メニューにボタンが増えています。

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

 

お疲れ様でした♪

 

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

 

この設定が、難しくてできない…という方は…

シェフさんのサイトにあるテーマなら、
この機能がはじめから入っているそうですよ!

シェフさんのテーマ 4536
https://4536.jp/

 

また、
今のテーマは変えずに、この機能を追加したい
という場合は、

カスタマイズも承りますので、お問い合わせくださいませ^^

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

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

村重 敦子

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

Follow me!