WordPressでLineのトークのような表示をする方法

28 12月
LINEで送る
Pocket

WordPressでLine?

 

 

WordPressでLineのようなトークを表示することも可能です。

 

 

LineのUIがこれだけ浸透しているのであれば、取り入れておくのも良いかもしれません。

 

 

設定は意外にも簡単です。

 

 

こんな感じで下記のように表示されます。

 

 

今、なにしてんの?

Lineでトークしてるよ

ワードプレスでもLineみたく?

そうなの、HTMLとCSSの編集でいけるよ

 

 

 

 

 

 

 

 

 

 

 

けっこう使えそうですね。

 

 

参考記事を基に、マルッと該当部分の箇所をコピペしてきました。

 

 

今回はWordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法を参考にさせていただきました。

 

 

Lineのようなトークを入力する方法

 

 

やり方をシンプルにご説明させていただきます。

 

 

編集するのは主に、cssですね。

 

 

以下のコードをstyle.cssに貼付けます。

 

 

 

 

CSSを貼付けたら、後はHTML側でトークを挿入していきます。

 

 

class属性で記述していきます。

 

 

上記のトークの場合はこんな感じになります。

 

 

<p class=”left_balloon”>今、なにしてんの?</p>
<p class=”right_balloon”>Lineでトークしてるよ</p>
<p class=”left_balloon”>ワードプレスでもLineみたく?</p>
<p class=”right_balloon”>そうなの、HTMLとCSSの編集でいけるよ</p>

 

基本的にはこれだけです。

 

 

もし、やってみたい人は参考にしてみてください!!

 

 

以上、WordPressでLineのトークのような表示をする方法でした。

LINEで送る
Pocket

コメントを残す

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