チャット風の会話形式コンテンツをプラグインなしで実装する方法
LINE、Facebookメッセンジャーにおけるやりとりのように、ブログの記事内でチャット風会話形式コンテンツを表示させるのって、やりとりがわかりやすいし、コンテンツを装飾するという意味でもイイですよね。
ただ、わざわざそのためにプラグインをインストールするのもアレなので、サクッとプラグインを使わずに実装するコードを書いてみました。
会話形式のコンテンツを利用するブログが増えたのは、やっぱりプラグインの影響でしょうね。WordPressプラグイン「Speech Bubble」をインストールすれば、簡単に吹き出し会話を見せることができるということで、いろいろなブログで採用・紹介されています。
このプラグインを紹介するどこかの記事を見て、「ああ、こうやって見せられるとわかりやすいしいいなぁ」と思ったんですが、よくよく考えてみると、うちのブログってそういう記事あんまり書かないし、使い道なさげだったので見送っていたんですよね。
で、今頃になって沸々と実装欲が湧いてきまして、使い道はほとんどないのにコードを書いちゃった次第。
短いコードなのに、少しいじればアバター画像もさくさく登録できるし、ショートコードで書けばいいというお手軽さです。
名無しさん
そんなコード使わなくても、プラグインでいいじゃん。
ホシナカズキ
ですよねー。
別に公開する必要ないですよねー。
みたいな感じでチャット風に会話を展開することができます。
普通、テキストで会話文を書くときって、「」(鉤括弧)で括って表しますが、その代わりにこうして吹き出しで表示させるというのは、なんともネット的。
二者あるいは複数の会話以外にも使ってみたりするといいかも。
コードの実装と使い方
先ほど書いたように、プラグイン使えばいいだけなので、わざわざ実装方法を紹介せずともいいのではないかという気もするのですが、どこかに需要があるかもしれないので、一応公開しておきます。
実装コード
| <?php | |
| function balloon_shortcode($atts, $content = null) { | |
| extract(shortcode_atts(array( | |
| 'face' => '1', | |
| 'name' => '自分の名前', | |
| 'align' => 'right' | |
| ),$atts)); | |
| switch ($face) { | |
| case 1: | |
| $imageUrl = get_stylesheet_directory_uri().'/テーマフォルダ内の画像までのパス'; | |
| break; | |
| case 2: | |
| $imageUrl = get_avatar_url(get_avatar($comment, 90)); //コメント用アバターを表示 | |
| break; | |
| default: | |
| $imageUrl = $face; //任意のアバター画像を挿入する | |
| break; | |
| } | |
| return '<div class="balloon-box balloon-'.$align.' clrfix"> | |
| <div class="balloon-icon"><img src="'.$imageUrl.'" width="90" height="90" alt="'.$name.'"><br><span>'.$name.'</span></div> | |
| <div class="balloon-serif"><div class="balloon-content">'.$content.'</div></div> | |
| </div>'; | |
| } | |
| add_shortcode('chat','balloon_shortcode'); |
基本的にはたったこれだけ。結構短いでしょ?
実装する場合、これをfunctions.phpにコピペしてください。
3行目から7行目はショートコードを書いた際にデフォで入る属性になります。8行目以降のswitch文はアバター画像を登録しておく部分。caseに任意の値を入れて$imageUrlに画像URLを指定すればOK。
よく使うアバター画像を予め登録しておいて、ショートコードにface属性で設定した値を指定するという使い方ができます。
caseで設定する値は数字だけじゃなく英字文字列でも問題ないので、アバター画像に指定する人の名前を入れるとわかりやすいですね。
吹き出しにするためには別途CSSも必要です。それが以下。
| .balloon-box { | |
| overflow: hidden; | |
| margin: 0 0 0.8rem; | |
| } | |
| .balloon-box:last-of-type { | |
| margin: 0 0 1.7rem; | |
| } | |
| .balloon-icon { | |
| width: 90px; | |
| text-align: center; | |
| line-height: 1rem; | |
| } | |
| .balloon-icon img { | |
| width: 90px; | |
| height: auto; | |
| } | |
| .balloon-icon span { | |
| position: absolute; | |
| top: 0; | |
| font-size: 11px; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| .balloon-left .balloon-icon { | |
| position: relative; | |
| float: left; | |
| margin:0 -90px 0 0; | |
| } | |
| .balloon-left .balloon-serif { | |
| position: relative; | |
| float: left; | |
| margin: 0 90px 0 110px; | |
| padding: 10px 0 0; | |
| } | |
| .balloon-left .balloon-serif:before, .balloon-left .balloon-serif::before { | |
| position: absolute; | |
| content: ""; | |
| top: 20px; left: -10px; | |
| width: 0; height: 0; | |
| border-style: solid; | |
| border-width: 10px 10px 0 0; | |
| border-color: transparent #eeeeee transparent transparent; | |
| z-index: 1; | |
| } | |
| .balloon-left .balloon-serif .balloon-content { | |
| position: relative; | |
| padding: 0.5rem 1rem; | |
| line-height: 1.5rem; | |
| background: #eeeeee; | |
| border-radius: 6px; | |
| z-index: 2; | |
| } | |
| .balloon-right .balloon-icon { | |
| position: relative; | |
| float: right; | |
| margin: 0 0 0 -90px; | |
| } | |
| .balloon-right .balloon-serif { | |
| position: relative; | |
| float: right; | |
| margin: 0 110px 0 90px; | |
| padding: 10px 0 0; | |
| } | |
| .balloon-right .balloon-serif:before, .balloon-right .balloon-serif::before { | |
| position: absolute; | |
| content: ""; | |
| top: 20px; right: -10px; | |
| width: 0; height: 0; | |
| border-style: solid; | |
| border-width: 10px 0 0 10px; | |
| border-color: transparent transparent transparent #eeeeee; | |
| z-index: 1; | |
| } | |
| .balloon-right .balloon-serif .balloon-content { | |
| position: relative; | |
| padding: 0.5rem 1rem; | |
| line-height: 1.5rem; | |
| background: #eeeeee; | |
| border-radius:6px; | |
| z-index:2; | |
| } |
あくまでも吹き出し形式にするための基本スタイルです。吹き出しの色や画像のサイズなどは任意で好きな形に設定してください。
モバイルは考慮してないので、レスポンシブにしたい場合は自力でどうぞ。
使い方
使い方はプラグイン「Speech Bubbles」とあんまり変わらないと思います。基本的にはショートコード[chat]で、テキストを括るだけです。
[chat]テキスト[/chat]特に属性付与しない場合、PHPで設定したデフォルトのものが出力されます。
属性は3種類。アバター画像を指定するface、話者の名前を指定するname、吹き出しの向きを指定するalignを付与することができます。
[chat
face="caseの値/画像URL"
name="名前"
align="left"]テキスト[/chat]公開したはいいものの、なんだかんだでfuncitons.phpをいじらなきゃいけなかったりするので、初心者向けとは言いにくいシロモノかも･･･。
ある程度、functions.phpを自分でいじってる人向けですね。
コグレさん
やるやん!
欲しいwww
というお言葉をいただきましたが、ネタフルはMTなので実装できません。
いや、やろうと思えばできないことはないんですけどねぇ。