DIY BLOG In Nagasaki

女の子でも簡単に出来るDIYを紹介していきます!

ブログで会話形式に表示するためにやったこと

スポンサーリンク

f:id:imuh:20170916115450p:plain

今日はブログで使える吹き出しで会話形式にする方法をまとめてみました!

 

皆さんこんにちは!どうですか?会話形式になっていますよね?

おお!やっと実装してくれたか。アイコンもいい感じだネ。

会話形式にするために

やったことは、

  1. Chromeの拡張
  2. デザインCSSに貼り付ける

この2つです。

いろいろな方のBlogを拝見していると、上記のような会話形式見たことありませんか?
普通にそのまま会話をBlogに書くと、見にくい!「」をいちいち打つのも面倒です。私だけかもしれませんが


そのため先人の力を借りて、ついに私も会話形式デビューしました

www.notitle-weblog.com

シロマ (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)からイラストを描いていただいたため、どうしても会話形式で使ってみたかったのです。

www.diy-mp.com


そしてでででーさんは、私が会話形式にするのを、誰よりも一番に楽しみにしてくれていたのです。

えへへ!会話形式にすることができました!でででーさんの書いてくれたアイコン使わせていただいております。ありがとうございました。

 

Chrome拡張の方法

www.notitle-weblog.com

Chromeの拡張の詳しい説明もこちらで参考にさせていただきました。シロマ (id:shiromatakumi)さんの説明は非常に分かりやすく、1分も経たずに拡張することができました


Chromeを拡張できたら、CSSを張り付け設定完了。記事編集画面で、

f:id:imuh:20170916114407p:plain

 

右上のはてなブログのマークをクリックして、クラス名を入力から「r-fuki クラス名」または「l-fuki クラス名」を入力するだけで会話形式に表示することができます。

 

パソコンのスクリーンショットの方法調べて、古くて中古でボロボロのパソコン(10,000円)でも撮れるか試したのですが、ペイントに上手く張り付けができませんでした。そのためさらに調べまくり、NECはFnとPrt Scrを同時に押すことでスクリーンショットを撮ることができました。そしてペイントに貼り付けて、名前を付けて保存して、Blogで使用できました。

スクショの説明いる?皆知ってるよ、多分。知らないのみっぷうだけネ。

・・・・・・・・・。

 

皆さまもこのように会話形式に表示させて見てください。会話だけでブログが書けるかもしれませんし、おすすめです!

最後までご覧いただき、ありがとうございました。