Logreamo

脱力系フリーターの雑記ブログ

【気になったので調べてみた】吹き出しを作って記事分かりやすくする!

f:id:chika_0831:20170325220550j:plain

どうも、吹き出しの作り方が気になっているchika(@chika0831)です!

 

他の方の記事でちょいちょい見る吹き出し。

 

 

 

アイコンがあって吹き出しあって、Lineとかチャットみたいな感じのやつ。

f:id:chika_0831:20170325200033p:plain

 

「どうやってんだろー。あれできたら記事見やすくなって良いなー。」

って気になってました。笑

 

 

 

というわけで今回は

気になったので調べてみたシリーズ第2弾!吹き出しの作り方を紹介します!

 

目次

 

 

参考記事

今回は参考記事として、こちらの記事を参考にさせていただきました!

georges.hatenablog.jp

 

HTMLとCSSを利用するのですが、知識が皆無でも大丈夫!!

 

上記の記事からCSSとHTMLの部分にコピペして、ちょちょっと編集するだけ!

 

 

デザインCSSにコピペする

まずは上記の記事のリンク先にあるCSSコードをコピーしましょう!

 

コピーできたらはてなブログのメニューから

『デザイン』 →『カスタマイズ』→『デザインcssでコードを貼り付けます。

 

f:id:chika_0831:20170325224640j:plain

 

 

すでにコードが書き込んである場合は、スペースを空けて一番下に貼り付けると見やすいです!

  

HTML編集にコピペする

お次はHTMLです。

上記の記事から『ブログでの使い方』の部分のHTMLコードをコピーしましょう!

 

 

そしたら記事編集画面からHTML編集画面へ。

 

書きたい部分にペースト!

あとは会話内容と画像URLを指定されてる箇所へ書き込むだけ!

 

 

「待てーい!画像のURLてどうすりゃええんや!!」

 

 

って方のために画像URL取得方法も説明します。

超簡単です。

 

ブログに画像アップして画像を右クリック。

画像アドレスをコピーをクリック。↓

f:id:chika_0831:20170325224151p:plain 

 

はい終了。

 

 

 

さて、画像URLもHTMLに貼り付け終われば完成です!!

 

完成!

出来上がりがこちらっ! 

 

 

おぉ!できたね!!!

 

 

うぇーい!ほとんどコピペだからめっちゃ簡単だった!!

 

 

よかったよかった。

 

 

でも見たまま編集の画面だとおかしくなってて、一瞬めちゃくちゃ焦ったんだよね笑

 

 

 そうなんです。

普段見たまま編集の画面で記事書いてるんでコピペし終わって見たら全然できてなくて焦りました。笑

 

こんな感じで↓

f:id:chika_0831:20170325230804p:plain

 

 

なんでこうなっててても、プレビューではちゃんとできているので安心してください。笑

 

 

簡単なんで是非作ってみてはいかがでしょうか。

 

 

以上chikaでしたー!