はてなブログに吹き出し会話機能を実装してみました
以前@rsyaotoさんのブログを拝見して見つけた吹き出しでの会話機能。
実際にやり取りするイメージが付きやすくこれは良いなと思いまして、虎視眈々と導入の機会を狙っていたのであります。実際に見てもらった方がイメージ付きやすいと思うのでこちらをどうぞ。
俺はアンドロメダの帝王だ
上記供述が伝聞証拠に当たる場合であっても...いやそんな典型論点の話がしたいのではない。
とっても便利な機能ですし、調べて機能導入したところ１時間もかかりませんでした。CSSのコードが書けなくてもコピペで完結しちゃうという発見がありましたので自分用の記録を兼ねて共有している次第です。あ、はてなブログ限定の話なんでそれ以外はググってください笑
１．レシピ（用意するもの）
こちらのサイト内の「CSSにコードを追加」部分に記載してあるコードをコピーするだけです。まあ便利。Chrome拡張機能がうんたらかんたら～みたいな話も書いてありますが、マストではないので飛ばしましょう。こういうのはまず終わらせるのが大事。
２．設定手順
①トップページ右上の自分のアカウント名をクリック
②表示された一覧の中にある「デザイン」をクリック
③スパナマーク（カスタマイズ）をクリック
⑤デザインCSSの欄にコピーしたコードをペースト
⑥コード最終２行をちょっとだけ編集します。この部分。
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
ⅰ クラス名のところを好きな英文字数字で定義してください
※「.」を消さないように注意。タイポで入っているのではない。
※最初の１文字目は英字で。数字記号使えません
ⅱ 画像のURL部分に使いたい画像のURLをペーストしてください
画像のURLは画像を右クリック→画像アドレスをコピー、で取得可能です
完成系だとこんな感じになります。私ははてなフォトライフに一度画像を収納してURL持ってきています。サンプルコード代わりにどうぞ。
.jobseeker::after{background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/pnt_law22/20180816/20180816102420.jpg);}
.interviewer::after{background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/p/pnt_law22/20180816/20180816102417.jpg);}
３．実際に会話させてみよう
さあ、これで設定完了です。あっという間だったでしょ？
ではさっそくいらすとやのお二人に面接形式で会話してもらいましょう。HTML編集のタブを開いて以下のコードを入力します。
・左にアイコン、右に吹き出しを置きたい場合
<p class="r-fuki クラス名">会話内容</p>
・右にアイコン、左に吹き出しを置きたい場合
<p class="l-fuki クラス名">会話内容</p>
クラス名は③ⅰで定義したものをそのまま写してください。会話内容はお好きにどうぞ。私は面接官と求職者で会話させたいので"r-fuki interviewer"と"l-fuki jobseeker"で設定してます。
今日は暑い中面接に来ていただきありがとうございます。ここまでは何で来られたのですか？
自宅から御社までの所要時間は通常48分です。まず自宅から最寄りの●駅まで徒歩8分、●駅から▲駅までJR東海道線で17分。▲駅から■駅まで都営浅草線で5分。3番出口から出て徒歩10分で御社に参りました。地下鉄の車内では御社の広告を
もう結構です。それは素晴らしいですね。本日の面接は以上ですので結果は追ってご連絡します。
と、こんな感じになりました。なんだかすごくそれっぽい感じにできて嬉しい...!
余談ですが、話題になっている面接の受け答え本の内容について。業界次第でウケる内容・スベる内容が変わるとはいえ、アイスブレイク用のいわゆるジャブみたいな質問に対してベラベラ演説するのは避けるべきですよね。面接官としてはジャブにはジャブで返してほしいわけで、相手の予測を悪い意味で裏切るトークは確実に悪印象です。
上記ほど露骨に祈られはしませんが、スタートから悪印象で始まると相当キツいですよ。人の印象は最初の30秒くらいで決まっちゃうって言いますからね～
面接では「何をしゃべるか」より「何をしゃべらないか」が圧倒的に大事です。ジョブズも言ってるじゃないですか
ー何をしてきたかと同じくらい、何をしてこなかったかを誇りたい と
（自説の後に偉人の名言をつけると説得力が増すテクニック）
さて閑話休題。
ざっとググったところ、はてなブログ以外でも設定しようと思えばできるようです。解説記事もチラホラありましたし。夏休みの課題にトライしてみてはいかがでしょう？
