吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】のアイキャッチ画像

2016年10月2日17:53に追記:
コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。

CSSとChrome拡張を使って会話形式の記事を書く

今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。

吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。

「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。

最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。

見た目はこんな感じ↓↓

先生、今日は吹き出しを簡単に実装する方法を紹介します。

運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。

・・・

こういうの結構色んなブログやサイトで使われていますね。

それでは準備していきましょう。

本記事ははてなブックマークの有名ブックマーカー、id:xevra先生の名言とともにお送りいたします。

参考記事。こちらをベースに作りました。

フキダシで会話形式のブログが書ける簡単CSS – 急がば 急いでまわれ!

カスタマイズをする際の注意事項!!

  • 必ず、PCとスマホで表示されるか確認して下さい。
  • カスタマイズは自己責任で行ってください。何かトラブルが起きても責任は負いかねます。

Google Chromeの拡張機能をインストール

先日、はてなブログの見たままモード編集を補完するGoogle Chromeの拡張を開発しました。

Chrome Add-on for Hatena – Chrome ウェブストア

使い方の説明はこちら。

はてなブログ編集用のChrome拡張機能を作りました(使い方の説明) | NO TITLE

このChrome拡張は、h2タグでの見出しやテキスト・画像の中央寄せが簡単にできます。しかし、この拡張機能の一番の目玉は、pタグにclassを挿入することができる点です。

今回はこれを使います。Chromeに追加しておいて下さい。

「俺はFirefoxしか使わねえんだよ」「Markdown使ってる」「はてな記法使っている」って人のために拡張機能を使わない方法も念のため書いておきます。

CSSにコードを追加

Chrome拡張機能を使うか使わないかに関わらず、まず準備が必要です。

下記のコードをデザイン→カスタマイズ→デザインCSSにコピペするのですが、コードの一番下にある項目は、ユーザー自身で書き換える必要があります。

一旦メモ帳か何かにコピーして、書き換えてからペーストすると良いでしょう。

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
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: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

書き換えるのは一番下の「クラス名」の部分と「画像のURL」の部分です。

「クラス名」には分かりやすく覚えやすい名前を付けて下さい。

クラス名で使用できる文字は、半角の英数字、ハイフン( – )、アンダーバー( _ )です。アルファベットで始めなければなりません。(数字や記号で始めてはならない)

固有名詞をアルファベットで書くのがおすすめかな。他とかぶらないから。

はてなフォトライフの画像を使う場合は、使いたい画像のページ(↓↓このページ)に行って、「右クリック」→「画像アドレスをコピー」して上記コードの「画像のURL」の部分にペーストして下さい。

f:id:shiromatakumi:20160930132455p:plain

【例】

.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です。今後使いそうな人物やキャラをどんどん追加しておきましょう。

スマホでの表示方法

スマホでの使い方が分からないという声があったので、こちらも説明しておきます。

スマホで適用する場合(レスポンシブに設定していない場合)は、デザイン→スマートフォン→ヘッダー→タイトル下のHTMLにCSSを記述します。<style>この中にCSS</style>で囲ってその間にCSSを記述して下さい。

<style>
この中にCSS
</style>

レスポンシブにしている場合は、この設定は不要です。

初期設定が完了したら、実際に編集画面で記事を編集していきます。

見たままモードでChrome拡張機能を使ってみよう

上の設定が完了したら、後は簡単です。

まず、吹き出しにしたい文章を選択します。

f:id:shiromatakumi:20160929231342p:plain

選択したら、ブラウザの右上にあるChrome拡張のボタンをクリックしてポップアップを出します。

f:id:shiromatakumi:20160929231054p:plain

吹き出しを左側(画像が右側)にしたい場合は「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だけで吹き出しの三角を表現する必要がありました。

「それは無理や…」と思ったのですが、

四角の2辺に色付けてtransformで45度・135度回転させたら「<」「>」←こんな形に見える!

という発見をしました。これは我ながらファインプレーだと思います。

ということでいつものアッピールww

欲しいものリスト

私も会話形式で書きたいという願望はあるのですが、普段あんまり人と会話してない気がする。

他にもこんな記事書いてます。

最近お小遣い増えてきたので、ブログでお小遣い稼ぎする方法を公開。

 

WEB制作やブログのカスタマイズを学びたい人には、この記事がおすすめ。

超初心者のためのHTML・CSS入門講座

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

当ブログではたくさんのカスタマイズ記事を書いています。

ブログ運営-カスタマイズ カテゴリーの記事一覧

コメント

  1. intertechtokyo より:

    ご教授ありがとうございました。
    早速、試してみました。

  2. masa_mn より:

    ありがとうございます!嬉しい!

  3. topbm7nono より:

    こちらの記事を参考に実装してみました。
    説明も解りやすく、特に迷うこともなく無事実装できました。感謝します。
    1つ質問なのですが、この吹き出しを本文内でなく、ヘッダタイトル下に表示させる場合、CSSのタイトル下部分の記述に追記が必要かと思いますが、具体的にどのような追記が必要でしょうか?
    よろしかったらご教授下さい。

  4. shiromatakumi より:

    卯月廿六 (id:topbm7nono)さん
    上記CSSを以下のように書き換えて追加して下さい。そうすればヘッダー下にも利用できます。
    .entry-content → #top-editarea

  5. topbm7nono より:

    シロマティさん
    早速のご回答に感謝です。
    未だに、クラス名とかで迷うことが多くて参考にしてるはてなブログのカスタマイズ本を読んでいても、こういった躓きをたまにしちゃうんですよね^^;
    早速、試してみますね。
    ありがとうございます。

  6. shiromatakumi より:

    卯月廿六 (id:topbm7nono)さん
    横幅が広くなる場合、
    width: 80%;
    の下に
    max-width: 600px;
    など最大の横幅を指定しておくと良いかもしれません。

  7. topbm7nono より:

    シロマティ (id:shiromatakumi)さん
    先日はありがとうございました。
    当方のブログは、諸事情でライブドアブログに移転して続けていますが、せっかく参考にして実現した会話形式記事で当初苦戦しましたが、この度、無事実装に漕ぎ着けました。
    実現にあたり、この記事で紹介されているCSSをベースにさせて頂きました。
    詳細は、下記の記事に書いてありますので一応、ご確認下さい。
    (特に問題はないと思いますが…)
    http://www.allaa.jp/entry/20170319-blog_To_customize
    改めて、ご教授頂き感謝致します。
    ありがとうございました。

  8. Mackenzie_xoxo より:

    こんにちは。
    いつもブログ閲覧させていただいています。
    吹き出しにする方法、簡単で感謝しています!
    ありがとうございます:)

  9. taitai39 より:

    はじめまして!
    今回吹き出し作成方法を参考にさせていただきました。ありがとうございます♪

  10. coromochi より:

    吹き出し作成記事、大変参考になりました!ありがとうございます!

  11. nonetanoblog より:

    今日この記事の通り試しました。吹き出しは出るのですが画像がURLを記事通りにしたのですが何度やっても反映されませんでした。
    どうすれば反映されるのでしょうか?
    アドバイスの方よろしくお願いします。

  12. shiromatakumi より:

    id:nonetanoblog さん
    CSSの、
    .クラス名::JUN
    これを
    .JUN::after
    に直して下さい。

  13. nonetanoblog より:

    え~もう返事くれたんですね!ほんと丁寧な回答ありがとうございます!
    家に帰ってからまたやってみます(^.^)

  14. nonetanoblog より:

    ありがとうございます!できるようになりました!

  15. sg178 より:

    こんにちわ
    一通り試してみたのですが、吹き出しも、画像も表示されません…
    選択したテキストをプレビューしてみても
    全く何も変わらず、テキストが少し真ん中に寄っているだけになってしまうのですが、解決策をお教えいただけたら幸いです

  16. bigtree1000 より:

    こんにちは。
    いつもカスタマイズ記事参考にさせていただいています!
    自分はレスポンシブ設定を使用しているのですが、スマホだと吹き出しが表示されません。シロマさんのスマホ用の設定をする/しない関わらず表示されないので、もともとのテーマのレスポンシブ用CSSに問題があるのでしょうか?いろいろ試しましたが分からなかったので助けていただけると嬉しいです!

  17. livesimply_taco より:

    実装しました。ありがとうございました!

  18. johnjohnfffff より:

    めちゃくちゃ参考にさせていただきます!
    とてもわかりやすいです。
    ありがとうございます!

  19. pencilpencil より:

    すばらしい記事です
    ブログの使い方の幅が広がるなぁ

  20. utadahikari より:

    CSSに明るくない私でもすごくわかりやすく、簡単に扱えました!
    ありがとうございます。

  21. aikimama より:

    初めまして。
    この記事のおかげて、吹き出しでの会話が楽に行えています!
    ずっと、気になっていることがあるのですが
    イメージの下に名前を追加することはできるのでしょうか?
    ワードプレスのかたをみると、名前を記入している方が多いので、シロマ様が紹介してくれた方法でも、できるのかな?と思いまして。
    よろしくお願いします。

  22. ysy1983 より:

    はじめまして。ysyと申します。
    突然、申し訳ありません。
    このページにある方法を使って、噴出しを表示しようと思ったのですが、何度やっても、アイコンが左に行き過ぎまして、うまく表示されません。
    https://ysy91878124.hatenablog.com/entry/other1
    もし何か良い方法などご教示頂ければ大変幸いです…。

コメントする

お気軽にコメントしてください!!

名前・メールの入力は任意です。