今日はブログで使える吹き出しで会話形式にする方法をまとめてみました！
皆さんこんにちは！どうですか？会話形式になっていますよね？
おお！やっと実装してくれたか。アイコンもいい感じだネ。
会話形式にするために
やったことは、
- Chromeの拡張
- デザインＣＳＳに貼り付ける
この2つです。
いろいろな方のBlogを拝見していると、上記のような会話形式見たことありませんか？
普通にそのまま会話をBlogに書くと、見にくい！「」をいちいち打つのも面倒です。私だけかもしれませんが
そのため先人の力を借りて、ついに私も会話形式デビューしました。
シロマ (id:shiromatakumi)さんのサイトを参考にしました。大変助かりました！本当にありがとうございます。
CSSとChromeの拡張を行うと、簡単に設定することができました。自分なりに線の太さや、影を無くしてみたり、シンプルに表示されるように頑張りました。
Chromeの拡張を行うと、会話形式を表示するHTMLを、簡単に記事編集画面に一瞬でピュッ！と入力してくれます。一度拡張して、デザインCSSに張り付ければ、後はもういつでも簡単に使うことができるので、是非試してみてください。
①borderのところの2pxを1pxにして線の太さを細くする
②box-shadow: 1px 1px 5px #aaa;の部分を消すと影が消える
③border-right: 2px solid #999;とborder-bottom: 2px solid #999;の2pxを1pxに変更し、上記の全ての#999を#666に変更する
④デザインCSSに張り付ける
#999から#666に若干グレーを濃く表示させたつもりが、黒になっていませんか？それは何故なのか。細くて黒に見えているが、実は濃いグレーなのか。それとも、黒になってしまっているのか。黒が良かったので結果オーライなのですが、何故黒くなってしまったのかは全然分かりませーん！ 調べ続けてみます。
会話形式にしたかった理由
なぜ会話形式したかったのかというと、先日でででーさん(id:d3dayo)からイラストを描いていただいたため、どうしても会話形式で使ってみたかったのです。
そしてでででーさんは、私が会話形式にするのを、誰よりも一番に楽しみにしてくれていたのです。
まず最初に…実物には全く似てないのでご安心ください！そして、超持ち上げすぎってくらいに持ち上げて頂きありがとうございます！会話形式もすごく楽しみにしております<(｀･ω･´) / “でででーさんからイラストを描いてもらいました！…” https://t.co/HFCNc6eyt9
— でででーさん (@d3_dayo) 2017年9月14日
えへへ！会話形式にすることができました！でででーさんの書いてくれたアイコン使わせていただいております。ありがとうございました。
Chrome拡張の方法
Chromeの拡張の詳しい説明もこちらで参考にさせていただきました。シロマ (id:shiromatakumi)さんの説明は非常に分かりやすく、1分も経たずに拡張することができました。
Chromeを拡張できたら、CSSを張り付け設定完了。記事編集画面で、
右上のはてなブログのマークをクリックして、クラス名を入力から「r-fuki クラス名」または「l-fuki クラス名」を入力するだけで会話形式に表示することができます。
パソコンのスクリーンショットの方法調べて、古くて中古でボロボロのパソコン（10,000円）でも撮れるか試したのですが、ペイントに上手く張り付けができませんでした。そのためさらに調べまくり、ＮＥＣはFnとPrt Scrを同時に押すことでスクリーンショットを撮ることができました。そしてペイントに貼り付けて、名前を付けて保存して、Ｂｌｏｇで使用できました。
スクショの説明いる？皆知ってるよ、多分。知らないのみっぷうだけネ。
・・・・・・・・・。
皆さまもこのように会話形式に表示させて見てください。会話だけでブログが書けるかもしれませんし、おすすめです！
最後までご覧いただき、ありがとうございました。