KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました！　クリックで公式サイトが開きます。

プラグイン無しで画像つきの「LINE風会話入力」を設置してみる【WordPress】

2015.04.11
この記事は約12分で読めます。
記事内に広告が含まれています。

今回は、私達がどうやって喋っているかを説明するわね

スポンサーリンク

Simplicity公式における会話表現の方法

Simplicityの公式ページでは、記事上で会話を表現する方法が記されています。

SimplicityでLINE風の会話文を表示する方法
Simplicityの拡張クラスを使って、本文記事にLINEぽい会話文を表示する方法を紹介します。尚、この機能はSimplicity1.3.8からの実装ですので...
wp-simplicity.com
WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法
LINEのインターフェースは、会話がとても分りやすいです。 シンプルでありながら、どちらが発言しているかすぐに…
nelog.jp

タグを入れれば入力できる。実に楽で便利な機能です。

しかし、何か物足りない。

画像がないじゃん！

やっぱ、この手の機能使うなら画像も入れたいですよね。
「いらないよ」って方は、ここでブラバして構いません。
私は絶対に画像が欲しいのでcssをいじるもうまくいかない。
しかし、最終的にやりたいこと自体はできました！

スポンサーリンク

画像を入れた会話表現の方法

参考にしたのは↓の記事です。

http://11neko.com/?p=1639　リンク切れ

まさにやりたいことがそのまま書かれていました。
そして書いてある通りにやってみたらできました。
「猫は気まぐれ」様には大感謝です。

つまり……

この方法なら、どのテーマでも画像付で会話ができることになるわね

スポンサーリンク

設置～cssにコピペ

まず、使える様に以下をstyle.cssに貼ります。
これは元の記事の記述を自分用に調整したもの。
カスタマイズしやすい様に、横へ説明をつけました。

/*******************************
* 会話
********************************/

.arrow_answer,
.arrow_question {
    position: relative;
    background: #FFF; /*吹き出しの色*/
    border: 3px solid rgba(240,120,255,1); /*吹き出しの外枠,太さはpxの数字,色はカッコ内の4つの数字をいじる*/
    padding: 2% 2%;
    border-radius: 10px; /*吹き出しを丸めたいならここ*/
    width: 62%; /*吹き出しの幅*/
}
.arrow_question {
    float: right;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: rgba(240,120,255,1);border-left-width: 20px; } /*吹き出しの外枠（その２）*/
.arrow_question:before { border-right-color: rgba(240,120,255,1); border-right-width: 20px; } /*吹き出しの外枠（その３）*/
.question_image {
    float: left;
    width:30%; /*左側のキャラの画像の大きさ*/
}
.answer_image {
    float: right;
    width:30%; /*右側のキャラの画像の大きさ*/
}
.answer_image img,.question_image img {
    width: 100%;
}
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}
.question_Box p{ line-height: 1.5;}

お好みに合わせて調整してください。

 

続いて「使い方」を説明するわね

 

スポンサーリンク

方法そのものの説明

記事中に次のソースを打ち込めば会話文が表示されます。
左のキャラ（question）

<div style="background-color: #00000000;">
<div class="question_Box">
<div class="question_image">
<p><img src="http://画像フォルダへのパス/画像ファイル名" alt="質問者の写真" width="150" height="150" /></p>
</div>
<div class="arrow_question">
<p>質問はここへ</p>
</div>
</div>
</div>
<div style="clear: both;"></div>

ほとんど参考記事のままですが、２行加えています。

・一行目のbackgroundは背景色指定。要らなければ削って下さい。

・最後の一行がないと、後に続く記事が延々と会話内に含まれてしまいます。（回り込みの解除です）

画像URLについては、使いたい画像のURLを入力します。
メディアライブラリにアップした画像を使う場合は、以下の画像を参考に。
赤字で示した欄にURLが記されています。

 

続いて、右のキャラ（answer）

<div style="background-color: #00000000;">
<div class="question_Box">
<div class="answer_image"><img src="http://画像フォルダへのパス/画像ファイル名" alt="解答者の写真" width="150" height="150" /></div>
<div class="arrow_answer">
<p>今回は、会話の使い方を説明するわね</p>
</div>
</div>
</div>
<p>
<div style="clear:both;"></div>

一番上のキャラのセリフは、こんな感じで入力しています。
この二つのコードを利用して会話文を作ることになります。

スポンサーリンク

実用的な使い方

こんな長いの毎回打てないよ……

AddQuicktagを使うといいわ

AddQuicktagは定型文を入力するためのブラグイン。
入れると記事作成が実に捗ります。
使い途はいっぱいあるプラグインですので、入れて損はありません。

方法説明

１　AddQuicktagの設定画面を開いて入力

名前は好きに入れて構いません。
自分のわかりやすい名前で。

二番目の項目は、例えば一番上のソースだと、
上の欄に

<div style="background-color: #00000000;">
<div class="question_Box">
<div class="question_image">
<p><img src="http://画像フォルダへのパス/画像ファイル名" alt="質問者の写真" width="150" height="150" /></p>
</div>
<div class="arrow_question">

下の欄に

</div>
</div>
</div>
<div style="clear: both;"></div>

を貼り付けます。

２　エディタでセリフを打ち込み、ドラッグする

例えばこんな風に

ドラッグ画面

３　エディタのメニューから、さっき入力した効果を選ぶ

addquicktag2

 

補足

simoplicityの場合、本サイトの方法で会話システムを設置する際は、cssフォルダにあるextension.cssから以下の記述を削って下さい。

/*******************************
* 左からの吹き出し
********************************/
.left_balloon,
.left-balloon {
    position: relative;
    background: #fff;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-right: 20%;
    clear: both;
    max-width: 500px;
    float: left;
}
.left_balloon:after,
.left_balloon:before,
.left-balloon:after,
.left-balloon:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.left_balloon:after,
.left-balloon:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.left_balloon:before,
.left-balloon:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 8px;
    margin-top: -8px;
}

/*******************************
* 右からの吹き出し
********************************/
.right_balloon,
.right-balloon {
    position: relative;
    background: #85e249;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-left: 20%;
    clear: both;
    max-width: 500px;
    float: right;
}
.right_balloon:after,
.right_balloon:before,
.right-balloon:after,
.right-balloon:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.right_balloon:after,
.right-balloon:after {
    border-color: rgba(133, 226, 73, 0);
    border-left-color: #85e249;
    border-width: 7px;
    margin-top: -7px;
}
.right_balloon:before,
.right-balloon:before {
    border-color: rgba(119, 119, 119, 0);
    border-left-color: #777;
    border-width: 8px;
    margin-top: -8px;
}

/*******************************
* 割り込みを解除
********************************/
.clear_balloon,
.clear-balloon{
  clear: both;
  margin: 20px;
}

/*******************************
* LINEの背景っぽいもの
********************************/
.line_back,
.line-back{
  background-color: #7897C5;
  padding: 10px;
  padding-bottom: 20px;
}

削らなくても動作に支障はありませんが、ムダとなりますので。

スポンサーリンク

まとめ【2021年3月2日改稿】

最近は会話機能をテーマ標準で備えてたりするよね

 

もちろん最初からそうしたテーマを選ぶ方が早いわ
でも表情のバリエーション増やしたかったりフキダシ変えたい場合などは、やっぱりカスタマイズが必要になるけどね

 

めんどくさい……

 

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速！
サイト管理・カスタマイズのタイパも抜群！
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群！
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

Go To ConoHa公式サイト
この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
８年来のKUSANAGI推し。

元公安調査庁職員、発達障害（ADHD）

天満川 鈴をフォローする
カスタマイズ＆プラグイン
天満川 鈴
スポンサーリンク
タイトルとURLをコピーしました