6/21 プロフィール更新しました

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

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

びわ

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

 

会話形式にするために

 

やったことは、

  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で使用できました。

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

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

23 Comments

imuh

堺の雪待ニンニクさん
そんなことないです!リンクしたサイトさまのおかげでございます♥︎それを参考にして、少しだけいじっただけのことなので、大してすごくはないですが、多少すごいかもしれません!えへへ(えっ勘違い)
堺の雪待ニンニクさんの自転車への知識のほうがスゴイですよ♥︎

返信する
imuh

昭和原人さん
もー進化を見届けてくれて私嬉しいです♥︎
はてなブログはproなんですが、私自身はproではないですー( ; ; )どうにかブログカスタマイズのproの方々のように見やすいブログに進化していきます!頑張るぞ!おー!
昭和原人さんもデザインCSSの所に色々貼り付けたら、何でもカスタマイズ出来ますよ♥︎あっでもサブブログとかで試しにやってからメインブログに貼り付けしないと、元に戻せないので大変です( ; ; )

返信する
imuh

OWET45さん
面白くなってきてますか!?めっちゃ嬉しいです( ; ; )♥︎これからもどんどん見やすく面白く楽しく頑張っていきます!OWET45さんのブログがすさまじく見やすいですし、エアブラシアートが凄すぎますし、いつも感心しております♥︎

返信する
kihaseason2015

会話形式はお見事でした。
欲を言えばみっぷうさんのアイコンはカラーにしてください。
希望としては
「髪は金髪、ほほはほんのりピンク色に、洋服もピンク」です。

返信する
imuh

softwindさん
ありがとうございます!
ちょっと手描きでアイコン作成してきますね笑♥︎
金髪で頬と洋服がピンクですね!softwindさんの好みが大変分かりました笑^^♥︎

返信する
natsunatsuw

すごい!
読みやすいし、マネしたい…
まだ、ブログ初心者すぎるから、
もう少ししたら、読み返してマネさせていただきます
(≧∇≦)b

返信する
imuh

秋ちゃんさん
その時は是非リンクしたシロナさんのサイトに詳しく書いてくれているので参考にさせてもらってください^ ^♥︎CSSをコピーしてデザインCSSに貼り付ければすぐに使えますよ♥︎私もまだブログ始めて1ヶ月も経ってないのですが、先人の教えのおかげでこのようにカスタマイズ出来ております♥︎

返信する
ayano585817

すごいすごい!!
どんどん成長してる~!!
みっぷうさん、頑張ってますね~❤

返信する
imuh

ayaさん
え、嬉しいです♥︎ayaさあぁあん\(^-^)/♥︎
寝不足気味で台風が接近しているので、今日はゆっくりしようと思います♥︎

返信する
deechiyan

みっぷうさん、こんにちは。
プロ級のテクニック恐れ入りました。
残念ながらご老体の私には無理な
芸当なのでシンプルを
貫きますよ~(о´∀`о)

返信する
imuh

ライダーマンさん
プロ級なのはシロナさんです笑♥︎でも私もCSSのお勉強したいので本を購入しようかと思っております^ ^♥︎
シンプルイズベストですよね♥︎

返信する
tabitoshashin

初めまして~^^
会話を会話形式で表示させようと思ってやってみようと思わせてもらえました☆ そうなると画像をどうしようか悩みどころです。。。
これからも記事を楽しみにしています~

返信する
imuh

tabitoshashinさん
tabitoshashinさんのブログ何度も遊びに行っていました♥︎読書登録しましたのでこれからよろしくお願いします^ ^
私は画像はこちらのイラスト屋さんから使わせてもらいました!http://www.irasutoya.com/?m=1
あと私の画像はでででーさんから描いてもらったものです!イラスト屋さんの画像は可愛いのでオススメです♥︎
コメント嬉しいです!ありがとうございます♥︎

返信する
tabitoshashin

イラスト屋さんのことを教えてい頂きましてありがとうございます~^^早速見に行けばたくさんのイラストがあって凄いですね。
こちらこそご返信嬉しいです~☆ 実は僕もこそっと遊びに行っていましたしお互いブログ楽しみましょうね~♪

返信する
imuh

tabitoshashinさん
沢山あって迷いますが、人物のイラストから顔のアイコンの所から選びました!とても可愛いですよね。このいらすとやさんの画像使わせていただいてるブログも多いですし、人気ですよね♥︎
え!本当ですか?(*⁰▿⁰*)♥︎遊びに来てくれていたなんて、嬉しい!改めてこれからよろしくお願いします!仲良くしてくださいね♥︎

返信する
tabitoshashin

ほんとたくさんあって迷いますね☆
ふふふ♪こちらこそブログでもフォローさせて頂いたツイッターでもよろしくお願いします♪

返信する
imuh

tabitoshashinさん
twitterフォローめっちゃめちゃ嬉しいです!twitter初心者なのでもしかするとtabitoshashinさんに色々聞いてしまうかもしれません笑 よろしくお願いします♥︎

返信する
waisaikyo

とても見やすいです。
DIYのブログも、自分は出来なそうですが、モノが出来上がっていく工程を見ること自体楽しいです。どんどん手作りのモノ作ってください。

返信する
imuh

どくとるマンボウさん
わーっありがとうございます!最近はカスタマイズとかの話ばかりなので、DIYも頑張っていきたいです。
どくとるマンボウさんの楽しいお話が大好きです♥︎生駒ちゃん先生めっちゃ可愛いです^ ^♥︎これからよろしくお願いします!どくとるマンボウさんのブログ楽しみにしています!

返信する
uchu5213

┌(┌ ・ω・)┐到着!
なるほど・・みっぷぅさんの会話形式は、
ここから生まれたのか!
スクショ・・・スクリーンショット・・・
。゚(PД`q。)゚。あぁ~ん!俺はバカか?
今度教えて貰おう・・・そもそもパソコンを、
これだけ使っててまだ押したコトないボタンが・・・
15個くらいあるー!子どもか俺は!
この、cssってのが曲者だよなぁ。
クローム拡張・・・。666・・・999・・・
 ( 、・ω・)、みっぷぅさんすごいなぁ。
あんなことやこんなコト。スイスイやってのける・・
俺?頑張れば俺だってこのくらい・・・
明日・・・もう1回読もう。
まずはクローム拡張にトライしよう!
でもグーグルアドセンスも放置してるし・・・
ლ(´∀`ლ)色々知りました!ありがとうございました★

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です