WordPressの記事で使える『吹き出し会話』の簡単なコードを作ってみたよ

スポンサードリンク

WordPressの記事で使える吹き出し会話の簡単なコードを作ってみたよ

WordPressの記事中で「吹き出し会話」を使えると、アクセントを出せたり伝えたいことを強調して伝えたりなどといった使い方ができます。

先日、便利そうなプラグインを紹介されている記事を拝見させて頂いたのですが、「もしかしたら使えないかも?」との事だったので、簡単なものですが自作したので紹介です。

また、プラグインにはせずにショートコードで使う仕様にしてあり、設定から実際に使うまでコピペ2回で出来ますのでご自由にお使い下さい。

※なるべく多くの方が使えるように書いてるつもりですが、使用しているテーマや環境によっては正常に機能しない場合がありますのであらかじめご了承ください。
※不具合などあれば、当ページ下部よりコメント頂けたら比較的簡単な内容であれば出来るだけ対応致します。
※個人作成の非常に簡単なものなので、クオリティや細部にこだわる方はご利用をお控え下さいm(_ _)m

Tipsアイコン[注意事項]

「function.php」は1文字でも記述をミスるとサイトが真っ白になって管理画面にもアクセス出来なくなる可能性がありますので、ご利用は自己責任でお願いします。
また、「functions.php」などを編集する際は、FTPソフトを使い、必ず事前にバックアップを取るようにしてください。

Tipsアイコン[パターン2を追記]


吹き出しの「ぽわぽわパターン」を追記致しました。
これに伴いそれぞれの項目を追記・編集致しましたのでご確認・更新をお願い致します。

どんな感じになるか

今回作ったものを使うと、以下のような吹き出し会話を使うことができます。

RA
吹き出し会話だよ~♪
こんな感じだよ~♪
RA

Tipsアイコン[パターン2追記]


吹き出しのパターンに「ぽわぽわパターン」もあった方が良いとお声を頂いたので追記致しました。ありがとうございますm(_ _)m♪

「ぽわぽわパターン」はこんな感じ☆

RA
ポワポワパターンだよ~♪
こんな感じだよ~♪
RA

このように、非常にシンプルで簡単なものですが左右のパターンがあります。

まずはショートコードの設定(コピペ)

今回の吹き出し会話は、ショートコードを使うと今後使う時にも非常に便利なので、ここで紹介するコードを「functions.php」にコピペします。

それでは早速やってみましょう。

以下のコードを「functions.php」の一番下そのままにコピペします

Tipsアイコン[パターン2追記]


吹き出しの「ぽわぽわパターン」追記に伴い、下記のコードも追記してあります。
ぽわぽわパターンもお使いになられる方はお手数ですが下記コードに更新してください。

//bal_L1
function sc_bal_L1(){
	return "<div class='bal-l'><div class='avaBox'><img src='";
}
add_shortcode('bal_L1','sc_bal_l1');

//bal_L2
function sc_bal_L2(){
	return "' width='60' height='60' alt='RA'sプロフ画像'></div><div class='txtBox'>";
}
add_shortcode('bal_L2','sc_bal_l2');

//bal_L3
function sc_bal_L3(){
	return "</div></div>";
}
add_shortcode('bal_L3','sc_bal_l3');

//bal_R1
function sc_bal_R1(){
	return "<div class='bal-r'><div class='txtBox'>";
}
add_shortcode('bal_R1','sc_bal_r1');

//bal_R2
function sc_bal_R2(){
	return "</div><div class='avaBox'><img src='";
}
add_shortcode('bal_R2','sc_bal_r2');

//bal_R3
function sc_bal_R3(){
	return "' width='60' height='60' alt='RA'sプロフ画像'></div></div>";
}
add_shortcode('bal_R3','sc_bal_r3');

// パターン2追記
//bal2_L1
function sc_bal2_L1(){
	return "<div class='bal-l2'><div class='avaBox'><img src='";
}
add_shortcode('bal2_L1','sc_bal2_l1');

//bal2_R1
function sc_bal2_R1(){
	return "<div class='bal-r2'><div class='txtBox'>";
}
add_shortcode('bal2_R1','sc_bal2_r1');

//sc_p_fix
function sc_p_fix($content) {
	$array = array (
		'<p>[' => '[',
		']</p>' => ']',
		']<br />' => ']'
	);

	$content = strtr($content, $array);
	return $content;
}
add_filter('the_content', 'sc_p_fix');

これでショートコードの設定は完了です☆

次にCSSの設定(コピペ)

ショートコードの設定が完了したら、次はCSSのコピペです。

以下のコードをお使いのCSSファイル(大抵はstyle.css)の一番下にコピペします。
※子テーマをお使いの方は「子テーマのstyle.css」です。

Tipsアイコン[パターン2追記]


吹き出しの「ぽわぽわパターン」追記に伴い、下記のコードも追記・編集してあります。
ぽわぽわパターンもお使いになられる方はお手数ですが下記コードに更新してください。

/* ◆ baloon ◇ */
.bal-l, .bal-r,
.bal-l2, .bal-r2 {
	padding: 0.5em 1em;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.bal-l, .bal-l2 {justify-content: flex-start;}
.bal-r, .bal-r2 {justify-content: flex-end;}
.bal-l p,.bal-r p,
.bal-l2 p, .bal-r2 p {margin: 0;}

/* avatorBox */
.bal-l .avaBox,.bal-r .avaBox,
.bal-l2 .avaBox,.bal-r2 .avaBox {
	width: 60px;
	min-width: 60px;
	height: 60px;
	max-height: 60px;
}
.bal-l .avaBox {margin-right: 1em;}
.bal-r .avaBox {margin-left: 1em;}
.bal-l2 .avaBox {margin-right: 30px;}
.bal-r2 .avaBox {margin-left: 30px;}

/* textBox */
.bal-l .txtBox,.bal-r .txtBox,
.bal-l2 .txtBox,.bal-r2 .txtBox {
	max-width: 70%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
	position: relative;
	padding: 0.5em;
	border-radius: 7px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
	z-index: 2;
}
.bal-l .txtBox, .bal-l2 .txtBox {
	border: 2px solid lightblue;
    background: linear-gradient(white,#e2f1f6);
}
.bal-r .txtBox, .bal-r2 .txtBox {
	border: 2px solid lightpink;
	background: linear-gradient(white, #fff0f2);
}

/* パターン1_common */
.bal-l .txtBox:before,.bal-l .txtBox:after,
.bal-r .txtBox:before,.bal-r .txtBox:after {
	width: 0;
	height: 0;
	content: "";
	position: absolute;
	top: 13px;
	border-width: 7px;
}
.bal-l .txtBox:before,
.bal-l .txtBox:after {
	border-style: solid solid solid none;
}
.bal-r .txtBox:before,
.bal-r .txtBox:after {
	border-style: solid none solid solid;
}
.bal-l .txtBox:before {
	left: -9px;
	border-color: transparent lightblue;
	z-index: 1;
}
.bal-r .txtBox:before {
	right: -9px;
	border-color: transparent lightpink;
	z-index: 1;
}
.bal-l .txtBox:after {
	border-color: transparent #f3f9fb;
	z-index: 3;
}
.bal-r .txtBox:after {
	border-color: transparent #fffafa;
	z-index: 3;
}
.bal-l .txtBox:after {left: -7px;}
.bal-r .txtBox:after {right: -7px;}

/* パターン2_common */
.bal-l2 .txtBox:before,.bal-l2 .txtBox:after,
.bal-r2 .txtBox:before,.bal-r2 .txtBox:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
/* before */
.bal-l2 .txtBox:before,
.bal-r2 .txtBox:before {
    width: 12px;
    height: 12px;
    top: 12px;
}
.bal-l2 .txtBox:before {left: -20px;}
.bal-r2 .txtBox:before {right: -20px;}
/* after */
.bal-l2 .txtBox:after,
.bal-r2 .txtBox:after {
    width: 6px;
    height: 6px;
    top: 25px;
}
.bal-l2 .txtBox:after {left: -29px;}
.bal-r2 .txtBox:after {right: -29px;}
/* border,bg */
.bal-l2 .txtBox:before,.bal-l2 .txtBox:after {
    border: 2px solid lightblue;
    background: linear-gradient(white, #e5f2f7);
}
.bal-r2 .txtBox:before,.bal-r2 .txtBox:after {
    border: 2px solid lightpink;
    background: linear-gradient(white, #fff0f2);
}

これでCSSの準備も終了です☆

吹き出し会話の使い方

functions.php」と「CSS」をコピペしたら残る下準備は吹き出し会話に使う画像の用意です。

以下のような吹き出し会話に使う「正方形の画像」をアップロードしておいてください。
※すでにアバター画像など、吹き出し会話に使いたい画像がある場合はこの作業は不要です。 ※実際に表示されるのは最大で「60px*60px」にCSSで調整してあります。画像サイズを変更されたい場合は先程のCSSを編集していただいてOKです。

RA'sプロフィール画像


今回使うショートコードは、

【左パターン】
[bal_L1][bal_L2][bal_L3]

【右パターン】
[bal_R1][bal_R2][bal_R3]

になるので、使い方は以下になります。

【左パターン】
[bal_L1]画像URL[bal_L2]テキスト[bal_L3]

【右パターン】
[bal_R1]テキスト[bal_R2]画像URL[bal_R3]


Tipsアイコン[パターン2追記]


吹き出しの「ぽわぽわパターン」を追記致しましたので、お使いになる方は下記をご覧ください。

※ポワポワパターンは左右共に最初の[bal_L1]と[bal_R1]を変更するだけで使えます。

【左パターン】
[bal2_L1]画像URL[bal_L2]テキスト[bal_L3]

【右パターン】
[bal2_R1]テキスト[bal_R2]画像URL[bal_R3]

では、実際に上記のショートコードを使って吹き出し会話を表示した例を見てみましょう。


例:1【左パターン】

RA
吹き出し会話だよ~♪
[bal_L1]https://tips4life.me/wp-content/themes/simplicity2-child/images/profImg.jpg[bal_L2]吹き出し会話だよ~♪[bal_L3]

例:2【右パターン】

こんな感じだよ~♪
RA
[bal_R1]こんな感じだよ~♪[bal_R2]https://tips4life.me/wp-content/themes/simplicity2-child/images/profImg.jpg[bal_R3]

例:3【左パターン(ぽわぽわ)

RA
ポワポワパターンだよ~♪
[bal2_L1]https://tips4life.me/wp-content/themes/simplicity2-child/images/profImg.jpg[bal_L2]ポワポワパターンだよ~♪[bal_L3]

例:4【右パターン(ぽわぽわ)

ポワポワパターンだよ~♪
RA
[bal2_R1]ポワポワパターンだよ~♪[bal_R2]https://tips4life.me/wp-content/themes/simplicity2-child/images/profImg.jpg[bal_R3]

こんな感じで使うので、

[bal_L1][bal_L2][bal_L3]

[bal_R1][bal_R2][bal_R3]

を、ユーザー辞書などに登録しておくと便利ですね☆

具体的には、

[bal_L1][bal_L2][bal_L3]を「ばるl」、

[bal_R1][bal_R2][bal_R3]を「ばるr

のようにユーザー辞書に登録して、例えば「ばるl」を変換してまずショートコードを一発で全部記述→その後に画像のURLとテキストをそれぞれ入力すると便利かと思います。
※ぽわぽわパターンの時は上記からそれぞれ最初のショートコードの部分に2を追記すれば効率良いと思います。


また、前回「【プラグイン無し】コピペ一発!WordPressショートコードの便利な使い方!」で紹介したように、テーマの画像フォルダまでのディレクトリをショートコードで登録してあるとさらに簡単ですね☆
※管理画面のメディアからアップロードして使っている場合は別です。

ショートコードの使い方については以下の記事をご覧ください。

【プラグイン無し】コピペ一発!Wordpressショートコードの便利な使い方!
Wordpressでショートコードを使う方法はいくつかありますが、皆さんプラグインを使われる事が多いようです。 今...

やり方は人それぞれなので、ご自分にあったやり方で試してみてください☆

「functions.php」を触りたくない方は

ここまで利便性を考えて「functions.php」にコードを記述してショートコードで運用する方法で説明してきましたが、やはり「functions.php」をいじるのはちょっとコワイという方もいらっしゃると思います。

そこで、以下に「functions.php」にコピペはせずに、素のhtmlで使えるようにコードを記載しておきます。
※「CSSの設定(コピペ)」で説明した「CSSコードのコピペ」は必要です。

吹き出し会話のhtmlコード一覧

【左パターン】
<div class="bal-l">
	<div class="avaBox"><img src="画像URL" width="60" height="60" alt="アバター画像"></div>
	<div class="txtBox">吹き出しのテキスト</div>
</div>

【右パターン】
<div class="bal-r">
	<div class="txtBox">こんな感じだよ~♪</div>
	<div class="avaBox"><img src="画像URL" width="60" height="60" alt="アバター画像"></div>
</div>

【左パターン(ぽわぽわ)】
<div class="bal-l2">
	<div class="avaBox"><img src="画像URL" width="60" height="60" alt="アバター画像"></div>
	<div class="txtBox">ポワポワパターンだよ~♪</div>
</div>

【右パターン(ぽわぽわ)】
<div class="bal-r2">
	<div class="txtBox">ポワポワパターンだよ~♪</div>
	<div class="avaBox"><img src="画像URL" width="60" height="60" alt="アバター画像"></div>
</div>

上記コードをお使いのPCのメモ帳などにコピペして保存しておくと便利です。

また、勘違いされないように念のため書いておきますが、上記コード内の「alt=”アバター画像”」の「alt」というのは画像の代替テキストという意味なので、「アバター画像」という文字はご自分の好きな文字(画像の簡単な説明など)に変えて頂いて大丈夫です。

この「アバター画像」の文字の部分を画像URLなどにしないようにm(_ _)m

まとめ

今回はWordpressの記事内で、ショートコードを使って「吹き出し会話」を使う簡単なコードを作ってみたので紹介しました。

一応ショートコードを使わない方法も紹介しましたが、汎用性を考えると個人的にはショートコードを使うほうが便利だと思います。

すべて「ほぼコピペ」で使えるようになるので、是非試してみて下さい☆

この記事が気に入ったら
いいね ! しよう

スポンサードリンク


シェアして頂けると喜びます☆

『WordPressの記事で使える『吹き出し会話』の簡単なコードを作ってみたよ』へのコメント

  1. 名前:かま 投稿日:2017/09/16(土) 15:22:47 ID:4d97762a6 返信

    はじめまして(*^^*)
    書かれている吹き出しコードを使わせて頂いてるんですが、
    functions.php用コードの
    function sc_p_fix($content)
    から
    add_filter(‘the_content’, ‘sc_p_fix’);
    に書いてある内容は、どういう意味なんでしょうか?
    この部分だけ、記載してもしなくても何も変化が無いので質問させていただきました。
    すみません、調べたんですがphpに疎くて「改行について何かしている」くらいしか分からなくて…
    ※吹き出しは普通に使えています!

    • 名前:RA's(らす)@Tips4Life 投稿日:2017/09/18(月) 17:13:24 ID:0b31929fc 返信

      かま 様

      「sc_p_fix」に付いて、結論から言うと
      「ショートコードを使った際に自動挿入されるpタグやbrタグを排除する」
      というfixコードになります。

      WordPressはデフォルトだと文章や画像などに対して
      自動的にpタグが挿入されるようになっています。

      これはWordPressの管理画面でブログの文章をそのまま書いても
      自動的にPタグで囲ってくれるWordPressの便利な機能です。

      しかし、CSSなどでデザインを装飾する人からすると逆に邪魔な機能
      となる場合が多く、そういう方はpタグの自動挿入自体を機能させない
      ようするなどの対応をします。

      ただ、やはり大半の方はデフォルトのままWordPressを使われているので、
      汎用性を考えてWordPressのpタグ自動挿入機能を排除するのではなく、
      ショートコードを使った際に自動挿入されるpタグとbrタグを排除するように
      該当コードを記述してました。

      記事にその旨記載しておけば良かったですね(^_^;)

      実際に行われている処理は上記なのでブラウザ上で見た際にあまり変化が
      無いように見えますが、ソース上ではpタグやbrタグが消えているかと思います。

      見た目的にはあまり変化はありませんので、気にならない場合は削除して頂いて問題ありません。

      また、
      [(半角)

      ](半角)
      をショートコード以外(例えば文字を囲うなど)で使う際にも同処理がされるので
      その時は[(全角)などを使うようにして頂くと良いと思います☆

Top