2016年10月2日17：53に追記：
コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。
2019年12月23日17：20に追記：
デザイン、CSSを微調整しました。
CSSとChrome拡張を使って会話形式の記事を書く
今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。
吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。
「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。
最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。
見た目はこんな感じ↓↓
先生、今日は吹き出しを簡単に実装する方法を紹介します。
運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。
・・・
こういうの結構色んなブログやサイトで使われていますね。
それでは準備していきましょう。
本記事ははてなブックマークの有名ブックマーカー、id:xevra先生の名言とともにお送りいたします。
カスタマイズをする際の注意事項！！
- 必ず、PCとスマホで表示されるか確認して下さい。
- カスタマイズは自己責任で行ってください。何かトラブルが起きても責任は負いかねます。
Google Chromeの拡張機能をインストール
先日、はてなブログの見たままモード編集を補完するGoogle Chromeの拡張を開発しました。
Chrome Add-on for Hatena – Chrome ウェブストア
使い方の説明はこちら。
はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） | SHIROMAG
このChrome拡張は、h2タグでの見出しやテキスト・画像の中央寄せが簡単にできます。しかし、この拡張機能の一番の目玉は、pタグにclassを挿入することができる点です。
今回はこれを使います。Chromeに追加しておいて下さい。
「俺はFirefoxしか使わねえんだよ」「Markdown使ってる」「はてな記法使っている」って人のために拡張機能を使わない方法も念のため書いておきます。
CSSにコードを追加
Chrome拡張機能を使うか使わないかに関わらず、まず準備が必要です。
下記のコードをデザイン→カスタマイズ→デザインCSSにコピペするのですが、コードの一番下にある項目は、ユーザー自身で書き換える必要があります。
一旦メモ帳か何かにコピーして、書き換えてからペーストすると良いでしょう。
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% - 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff;
z-index: 1;
box-sizing: border-box;
}
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 60px;
height: 60px;
top: -6px;
border-radius: 50%;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;
}
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}書き換えるのは一番下の「クラス名」の部分と「画像のURL」の部分です。
「クラス名」には分かりやすく覚えやすい名前を付けて下さい。
クラス名で使用できる文字は、半角の英数字、ハイフン（ – ）、アンダーバー（ _ ）です。アルファベットで始めなければなりません。（数字や記号で始めてはならない）
固有名詞をアルファベットで書くのがおすすめかな。他とかぶらないから。
はてなフォトライフの画像を使う場合は、使いたい画像のページ（↓↓このページ）に行って、「右クリック」→「画像アドレスをコピー」して上記コードの「画像のURL」の部分にペーストして下さい。
【例】
.shiroma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiromatakumi/20160908/20160908183210.png);}
.xevra::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiromatakumi/20160923/20160923232839.png);}一度CSSに追加しておけばあとは簡単。記事で使う方法をこの後紹介していきます。
プロブロガーは穢れ。駆逐してやる。
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}このコードはクラス名が重複しなければ、いくら増やしてもOKです。今後使いそうな人物やキャラをどんどん追加しておきましょう。
はてなフォトライフに画像をアップする方法
新しく画像をアップロードして、画像のURLを取得するところまで説明します。
はてなフォトライフに行き、「アップロード」をクリック
画像を点線の枠の中にドラッグします。
しばらく待つと画像が表示されるので、右クリック→「画像アドレスをコピー」で画像のURLをコピーできます。
スマホでの表示方法
スマホでの使い方が分からないという声があったので、こちらも説明しておきます。
スマホで適用する場合（レスポンシブに設定していない場合）は、デザイン→スマートフォン→ヘッダー→タイトル下にCSSを記述します。<style>この中にCSS</style>で囲ってその間にCSSを記述して下さい。
デザイン→スマートフォン→記事→記事下でも大丈夫です。
<style>
この中にCSS
</style>
レスポンシブにしている場合は、この設定は不要です。
初期設定が完了したら、実際に編集画面で記事を編集していきます。
見たままモードでChrome拡張機能を使ってみよう
上の設定が完了したら、後は簡単です。
まず、吹き出しにしたい文章を選択します。
選択したら、ブラウザの右上にあるChrome拡張のボタンをクリックしてポップアップを出します。
吹き出しを左側（画像が右側）にしたい場合は「l-fuki クラス名」と入力して「Add Class」をクリック（EnterキーでもOK）します。「l-fuki」と「クラス名」の間には半角スペースを空けて下さい。l←これ縦棒じゃなくてエルね。
筋肉こそパワー。筋肉は全てを解決する。
吹き出しを右側（画像が左側）にしたい場合は「r-fuki クラス名」と入力して「Add Class」をクリック（EnterキーでもOK）します。「r-fuki」と「クラス名」の間には半角スペースを空けて下さい。
運動、瞑想、睡眠、野菜350gを徹底する事が全ての基本。
クラス名というのは、CSSで付けた任意のクラス名です。表示する画像と紐づいています。表示したい画像のクラス名を入力して下さい。
見たままモードの編集画面では変化しているように見えませんが、プレビュー画面で見るとちゃんと吹き出しがついて会話形式になっているのが分かります。
最後に少し注意事項があるので必ず読んでください。
Chrome拡張機能を使わない方法
Chrome拡張を使った方が多分楽ですが、HTMLを直接編集してもOKです。pタグにクラスを入れて下さい。「l-fuki」「r-fuki」と「クラス名」の間は半角スペース。
「Markdown」や「はてな記法」でも下のタグを使えばいけるはず（多分）。
<p class="l-fuki クラス名">テキスト</p>
ニート・ホームレス・ブロガーは社会の三大底辺。
<p class="r-fuki クラス名">テキスト</p>
オキシトシン点鼻薬を試してみてはどうか。
使用時の注意点
見たままモードの編集画面上では吹き出しになっているのが確認できません。プレビュー画面で表示を確認しつつ、執筆して下さい。
吹き出しの中で改行する場合、「Enter」キーをクリックして改行しないで下さい。吹き出し内で改行する際は、「Shift」+「Enter」で改行して下さい。
再度言いますが、一度吹き出しにした文章内で「Enter」キーで改行は厳禁なので気をつけて下さい。どんなことになるかは試してみてプレビュー画面をみれば分ります。
全文書いた後の仕上げに使うのがオススメです。
間違えて吹き出しにしてしまった場合、該当する文を選択し拡張のポップアップを出して「書式を初期化」をクリックすると通常の文に戻ります。
この記事書くために少し試しましたが、一度設定してしまえばめっちゃ楽。
余談（技術的なあれこれ）
通常、会話形式のHTMLのp要素とimg要素をdivタグで囲むのが一般的なのですが、頑張ってp要素（+疑似要素）だけで実装してみました。
吹き出しの表現は疑似要素のbeforeとafterを両方使うのですが、画像表示のためにafterを使う必要があったので、beforeだけで吹き出しの三角を表現する必要がありました。
「それは無理や…」と思ったのですが、
四角の２辺に色付けてtransformで45度・135度回転させたら「＜」「＞」←こんな形に見える！
という発見をしました。これは我ながらファインプレーだと思います。
ということでいつものアッピールww
私も会話形式で書きたいという願望はあるのですが、普段あんまり人と会話してない気がする。
他にもこんな記事書いてます。
最近お小遣い増えてきたので、ブログでお小遣い稼ぎする方法を公開。
WEB制作やブログのカスタマイズを学びたい人には、この記事がおすすめ。
HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ
当ブログではたくさんのカスタマイズ記事を書いています。
