会話形式のブログ記事を半自動でつくるテンプレートを作った

はぁ・・・会話風ブログは好評だけど書くのは大変だなぁ

書いてはコピペし、書いてはコピペし、書いてはコピペし。。。もういやだ！！

もっとババーっと楽に書けないかなぁ。。。

ふふふ。お疲れのようだね

あ！あなたは！！
業務改善をやりすぎて同僚2名がリストラ対象になってしまった経験を持つ業務改善の鬼！
ぼっちさんではないですか！？

うん。嫌なことを思い出させてくれるね

こんにちは。
効率の悪い仕事はワークシェアリングの側面を持つと身を持って知ったぼっちさんです。

はい。というわけで本日は半自動シリーズ第3弾
会話形式の吹き出しを簡単に書けるテンプレートを作ってみたのでご紹介。

自分で作っといてなんだけどなにげに便利なんじゃない！？コレ

なおCSSとか触るのでPC環境必須！
なので出先の方は是非ブックマークを！

基本アイデア
CSSの設定
吹き出しテンプレートの使い方
はてなブログ画像URL取得用ブックマークレット
吹き出しテンプレートはコチラ
作ってみた感想

基本アイデア

基本的には先人たちのテクニックを~~丸パクリ~~参考にさせていただいております。
CSS等はほぼクリアメモリさんの記事そのままです。
まぁ先日この記事を読んで「もっと簡単にできたらなぁ」って思ったのが作ったきっかけ。

ぜひコチラにも訪問していただき詳細を確認してくださいね。
www.clrmemory.com

ぼっちさんはコレを簡単に記述出来るように改善にしただけです。
技術の加工貿易ｗ

CSSの設定

背景画像が固定じゃないのでクリアメモリさんのCSSから抜いています。
下記をはてなブログのデザインCSSに追加して下さい。

/*会話吹き出し*/
.entry-content .person-right,
.entry-content .person-left{
padding-top: 15px;
padding-bottom: 15px;
min-height: 100px;
}
.entry-content .person-right img,
.entry-content .person-left img{
border: 1px solid #555;
border-radius: 2.5em;
width: 75px;
height: 75px;
margin-top: 2px;
background-size: cover;
}
.entry-content .person-right img{
float: right;
}
.entry-content .person-left img{
float: left;
}
.entry-content .person-right p,
.entry-content .person-left p{
padding: 10px;
position: relative;
border: 1px solid #555;
border-radius: 10px;
box-sizing: border-box;
width: calc(100% – 100px);
margin-top: 16px;
}
.entry-content .person-left p{
float: right;
}
.person-right p:before,
.person-right p:after,
.person-left p:before,
.person-left p:after{
top: 13px;
}
.person-right p:before {
content: ”;
border: 10px solid transparent;
border-left: 15px solid black;
position: absolute;
left: 100%;
}
.person-right p:after {
content: ”;
border: 10px solid transparent;
border-left: 15px solid white;
position: absolute;
left: calc(100% – 1px);
}
.person-left p:before {
content: ”;
border: 10px solid transparent;
border-right: 15px solid black;
position: absolute;
right: 100%;
}
.person-left p:after {
content: ”;
border: 10px solid transparent;
border-right: 15px solid white;
position: absolute;
right: calc(100% – 1px);
}