ワードプレスの記事に吹き出しを作る方法

こんにちは

しのさんです(´▽｀*)

 

今回は記事の中に、LINEのような吹き出しを作る方法についてまとめたいと思います。

いろんなブログを読んでて、「吹き出しいいな～」「読みやすいし、かっこいい！！」と、ずっと思ってたんですよね～！

しかし、調べても調べてもよくわからん！！

プログラミングの知識が、ガッツリないと無理なのか…

と、諦めていましたが、なんとかできるようになりました！

私の勉強の記録と、私みたいに「LINE風カッコイイ！」なんて思ってる方のためにシェアさせていただきますね！

 

LINE風吹き出しとはこんな感じ

以前記事に使用したLINE風吹き出しを覚えていらっしゃるでしょうか？

これです！

もー、めっちゃ頑張ったんですよ～！

記事にしてしまえば、簡単に見えますが…

今回は、これの作り方について解説していきます！

 

Speech Bubbleというプラグインをインストールしよう！

 

ワードプレスのプラグインから「Speech Bubble」と入力して検索します

目当てのものが出てきたら、インストールしてください。

「有効化」することを忘れないでくださいね！

 

記事に早速使ってみよう！

いつも通り、投稿→新規追加で新しい記事を出してください。

そして、↓をコピペして貼ってみてくださいね。

 

テキストではなく、ビジュアルでの編集でOKです。

すると、↓のように表示されます。

 

私は、この時点で感動しました。
何回も試行錯誤してたからね！！！！

セリフの変更の仕方

 

セリフは、↑のコードの日本語の部分を変更するだけでできますよ！

 

吹き出しのバリエーションは9種類ある

 

①drop

②std

③fb

④fb-flat

⑤ln

⑥ln-flat

⑦pink

⑧rtail

⑨think

 

ちなみに私は、「fb-flat」がお気に入りです(´▽｀*)

アイコン画像と吹き出しのしっぽの位置

 

アイコン画像や吹き出しのしっぽの位置は「subtype=”　”」の部分で変更できます。

L1が左、R2が右ですね。

ふむふむ、分かり易くて良い。

 

アイコン画像の導入方法

 

これがちょっと、面倒なのですが頑張っていきましょう！

私はエックスサーバーを使っているのでエックスサーバーで説明していきます。

ほかのサーバーも、やり方は変わらないと思います。たぶん

 

１．まず、エックスサーバーにログインして、フロムマネージャーに行きます。

２．自分が画僧を導入したいサイトのファイル名をクリックします。

３．public htmiをクリックします。

４．wp-contentをクリックします。

５．pluginsをクリックします。

６．speech-bubbleをクリックします。

７．imgをクリックします。

８．ファイルのアップロードから画像を入れます。

参照をクリックして、アップロードしたい画像を選んでくださいね！

９．アップロードが完了すると、ファイル名のところにアップした画像のファイル名が表示されます。

 

アイコン画像の反映の仕方

「icon=”1.jpg”」の部分にアップロードしたファイル名を入れます。

「icon=”2.jpg”」にも、別の画像を入れてください。

すると↓のように表示されます！

 

 

ちなみに、アイコンにしたい画像を保存するときは「jpg, png, gif, svg, tif」のどれかの形式で保存してくださいね！

 

ふう～！

今までの記事の中で、一番頑張りましたよ～！

じゃんじゃん、活用してくださいね！