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

この記事は約12分で読めます。

WordPressカスタマイズ

解答者の写真

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

(本記事は「Simplicityで画像つきの「LINE風会話入力」をやってみる」を改題したものです

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

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

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

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

質問者の写真

画像がないじゃん!

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

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

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

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

つまり……

解答者の写真

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

設置~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; } /*吹き出しの外枠(その2)*/
.arrow_question:before { border-right-color: rgba(240,120,255,1); border-right-width: 20px; } /*吹き出しの外枠(その3)*/
.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: #9400d3;">
<div class="question_Box">
<div class="question_image">
<p><img src="http://画像フォルダへのパス/画像ファイル名" alt="質問者の写真" /></p>
</div>
<div class="arrow_question">
<p>質問はここへ</p>
</div>
</div>
</div>
<div style="clear: both;"></div>

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

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

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

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

 

 続いて、右のキャラ(answer)

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

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

実用的な使い方(初心者以外)

質問者の写真

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

当然ですね。
参考記事ではfunction.phpに記述する方法を用いてました。
ここでfunction.phpって言葉がわかる方は参考記事 にお進み下さい。

実用的な使い方(初心者)

以下は私みたいにphp関数もわからないし、中身触るのも怖い方向けです。

解答者の写真

AddQuicktagを使うといいよ

 

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

方法説明

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

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

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

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

下の欄に

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

を貼り付けます。

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

例えばこんな風に

ドラッグ画面

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

addquicktag2

 

4 会話が表示されます。

解答者の写真
例えばこんな風に

 

補足

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;
}

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

結論

背景色入れないと、こんな感じです。

 

質問者の写真

これすごく便利だね。うん、使える

 

解答者の写真

でしょう。cssとプラグインに入力するまでは大変だけど、その後は楽に打てる……って? じゃあ、どうしてそんな顔してるの?

 

 

質問者の写真

だって、あたしの表情、二つしかないんだもん!

 

 

解答者の写真

あらあら……じゃあ別の機会に、表情増やす説明もするわね