小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

カスタマイズ&プラグイン
この記事は約12分で読めます。
解答者の写真
今回は、私達がどうやって喋っているかを説明するわね
スポンサーリンク
この記事を読む方へのオススメ

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

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

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

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

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

質問者の写真

画像がないじゃん!

やっぱ、この手の機能使うなら画像も入れたいですよね。
「いらないよ」って方は、ここでブラバして構いません。
私は絶対に画像が欲しいので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; } /*吹き出しの外枠(その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: #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>

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

・一行目の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>

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

スポンサーリンク

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

質問者の写真

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

当然ですね。
参考記事ではfunctions.phpに記述する方法を用いてましたが、ここでは簡単な方法を紹介します。

スポンサーリンク

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

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

解答者の写真
AddQuicktagを使うといいわ

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

方法説明

1 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>

を貼り付けます。

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

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

スポンサーリンク

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

質問者の写真

最近は会話機能をテーマ標準で備えてたりするよね
解答者の写真
もちろん最初からそうしたテーマを選ぶ方が早いわ
でも表情のバリエーション増やしたかったりフキダシ変えたい場合などは、やっぱりカスタマイズが必要になるけどね

質問者の写真

めんどくさい……
ブログやサイトを始めたい・引っ越したい方へ

レンタルサーバーWING。
KUSANAGI&WEXALが使えるVPS。
どちらでも高速でコスパに優れたConoHaで始めるのがおすすめです。
もっと知りたい方はボタンをクリックしてください。
(ボタン経由で入会した場合、1000円分のクーポンがもらえます)

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク

コメント

タイトルとURLをコピーしました