はてブ2016年10月2日17:53に追記:コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。2019年12月23日17:20に追記:デザイン、CSSを微調整しました。CSSとChrome拡張を使って会話形式の記事を書く今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。最初の設定は少し面倒です。一度設定してしまえば、後はめちゃ楽ちんになると思います。先生、今日は吹き出しを簡単に実装する方法を紹介します。運動と瞑想の習慣がない者の末路はいつも悲惨だ。・・・こういうの結構色んなブログやサイトで使われていますね。それでは準備していきましょう。本記事ははてなブックマークの有名ブックマーカー、id:xevra先生の名言とともにお送りいたします。カスタマイズをする際の注意事項!!必ず、PCとスマホで表示されるか確認して下さい。カスタマイズは自己責任で行ってください。何かトラブルが起きても責任は負いかねます。Chromeの拡張を開発しました。ウェブストア使い方の説明はこちら。SHIROMAGこのChrome拡張は、h2タグでの見出しやテキスト・画像の中央寄せが簡単にできます。この拡張機能の一番の目玉は、pタグにclassを挿入することができる点です。今回はこれを使います。Chromeに追加しておいて下さい。「俺はFirefoxしか使わねえんだよ」「Markdown使ってる」「はてな記法使っている」って人のために拡張機能を使わない方法も念のため書いておきます。CSSにコードを追加Chrome拡張機能を使うか使わないかに関わらず、まず準備が必要です。下記のコードをデザイン→カスタマイズ→デザインCSSにコピペするのですが、コードの一番下にある項目は、ユーザー自身で書き換える必要があります。メモ帳か何かにコピーして、書き換えてからペーストすると良いでしょう。{background-image:url(画像のURL);}書き換えるのは一番下の「クラス名」の部分と「画像のURL」の部分です。「クラス名」には分かりやすく覚えやすい名前を付けて下さい。アルファベットで始めなければなりません。(数字や記号で始めてはならない)固有名詞をアルファベットで書くのがおすすめかな。はてなフォトライフの画像を使う場合は、使いたい画像のページ(↓↓このページ)に行って、「右クリック」→「画像アドレスをコピー」して上記コードの「画像のURL」の部分にペーストして下さい。{background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiromatakumi/20160923/20160923232839.png);}一度CSSに追加しておけばあとは簡単。記事で使う方法をこの後紹介していきます。