SimplicityテンプレートでLINE風の会話表示をする方法!!

会話

やばい!!!いまこのブログで使っているテンプレートのSimplicityですが・・・

注意
いまはハミングバードというテンプレートを使ってます。

なんと簡単にLINE風の会話も作れてしまいます

↓↓↓こんな感じ↓↓↓

line

どうやってLINE風にするの?


Simplicityのワードプレスで会話風LINEバージョンを実装する方法

Simplicity1.3.8からの実装で
その前のバージョンの人はバージョンアップが必要ですが、

上の画像の会話でしたら以下のコードでOKです。

<div class=”line_back”>
<p class=”right_balloon”>これ↑</p>
<p class=”left_balloon”>おー!</p>
<p class=”right_balloon”>しかも編集もただエンターを押しただけなのに</p>
<p class=”right_balloon”>あああ</p>
<p class=”right_balloon”>と次のコメントが書ける!!<br />
※自分のコメントの場合</p>
<p class=”left_balloon”>便利!!</p>
<p class=”left_balloon”>相手のコメントをかきたい場合は?</p>
<p class=”right_balloon”>黙テキストでタグを書くか、<br />
既にコメントの枠があるなら矢印キーで移動すれば大丈夫</p>
<p class=”left_balloon”>これは是非使っていきたいですね!</p>
<div class=”clear_balloon”> </div>
</div> 

↑タグの「<」「>」は全角にしてありますので、コピペで使用される場合は「<」「>」半角にしてお使いください。

すごい便利ですよね。

ちなみにスマホでみるとこんな感じで表示されます。

Screenshot_2015-09-20-17-31-20

そんなにパソコンと変わりません。

 

でも、このままだとSimplicityしか使えないですよね?

疑問

と思いきや、

しっかりと他のテンプレートでも可能なように設定方法を教えてくれていました。

ワードプレスで会話風の文章を書く方法

WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法

↑こちらはCSSをいじるものです。

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

↑Speech Bubbleプラグインを使って吹き出しを表現できます。

これで自分のお気に入りのテンプレートにも適用できますね。

ぜひぜひ色々な表現方法を使って、見に来てくれた人に色々な情報を提供していきましょう!!

会話

よかったらシェアお願いします!

ABOUTこの記事をかいた人

2016年もよろしくお願いします!一段と美味しいものを求めて、いろいろなお店によらせて頂きたいと思います。
たくさん美味しいものを食べるために、体のこともしらないと!!ということで、機能解剖学を勉強しトレーナーへ転身。
『ぐるめのほそ道』をよろしくお願いします。
詳しいプロフィール