会話形式の吹き出しをCSSとHTMLで作ってみた。

f:id:manmaru441:20180619152150p:image

 

 

はてなブログ会話形式の吹き出しを作るべく、試行錯誤したこの3日間。 

 

やっと吹き出し完成したよ~

ママ、おつかれ。 ママ、すごい。 ママ、最高。

 ↑これら、コピペで作れました。

分りやすかったサイトはこちら↓

www.notitle-weblog.com

www.uenoyou.net

 この上記2つのサイトを参考にさせてもらいました!

 

 

はてなブログで会話形式の吹き出しをつくる方法 

用意するもの
・アイコンにしたい画像またはイラスト

 

① CSSをコピー&ペースト

上記サイトのCSSをコピーします。

次にコピーしたCSSを貼り付けます。貼り付けする場所は、はてなの編集画面の

f:id:manmaru441:20180619083808p:plain

↑ここから


f:id:manmaru441:20180619084147p:plain

↑さらにココ押して、

 

f:id:manmaru441:20180619084204p:plain

 ↑ここー!!

 

f:id:manmaru441:20180619084318p:plain

この赤い枠内にコピーしたCSSをペースト貼り付けてください。

 

② CSSの編集

ペーストしたCSSには編集が必要です。CSSを自分用に置き換えるという作業。

上記のサイトにも記載してある通りになりますが、「クラス名」と「画像URL」を変更するだけ。
CSSで「このクラス名のときはこの画像と吹きだし出してね!」と設定をする。
HTMLで「さっきのクラス名のついた画像と吹き出しを使って、この文字を表示してね」と指示をする感じかな?

説明むじゅかしい 


あ、CSSの編集後は保存を忘れずに。(忘れるとツライ)


f:id:manmaru441:20180619084510p:plain
CSS「この場合はこうします。」
HTML「じゃーそれ使って、ここにこうして!」
ふたりはそんな関係です。

 

③HTMLを使う。

 HTMLは、文字を太くしたり、色を変えたり、下線を引いたりすることが出来る文字の装飾を行うことができます。

CSSを追加したことで装飾方法を増やした感じ。

で、クラス名の入ったHTMLというのが、コレ↓

 

<p class="r-fuki クラス名">言いたいこと</p>

 

このHTMLを、記事作成画面の「HTML編集」から吹き出しを入れたい場所に使うと吹き出しが出るようになります。 

 

f:id:manmaru441:20180619114558p:plain

 

プレビューしてみて、吹き出しなってるか確認してみて吹き出しなっていたら完成です。

 

できた?

ママ、お腹すいたぁ~

も少し待ってて

 

小技

このHTMLをいちいちコピペするのがめんどくさいので、

パソコンに単語登録し、変換して出てくるように設定すると便利です。

f:id:manmaru441:20180619144036p:plain

言語バーの中にあるツール(↑の赤い四角の部分)から単語/用例の登録を押します。
すると、この画面が出てきます。

f:id:manmaru441:20180619144138p:plain

 

読み語旬にそれぞれ入力し登録を。
f:id:manmaru441:20180619144508p:plain

 

これで文字うって変換するだけでHTMLがすぐ出てくるので、楽に吹き出しを作ることができます。

少し設定や入力がめんどくさいですが、CSSとHTMLだけで作ることが出来るので簡単っちゃ簡単です。

 

やってみてね

 

こちらもどうぞ

www.manmaru441.com

 

流行りのpolca(ポルカ)でアイコン描いてもらったよ!

f:id:manmaru441:20180618221620p:image

 

みんなーやっほー!

こらー!まだ寝てろーー!!

も~眠くないよぉ~

 

アイコンつくりました。

 

はじめまして、息子です。
ママがいつもお世話になっています。

もういいから寝ろよ・・・てか、しっかりしてんな・・・

だってママの子だもん

さすが私の息子!!

 

てことで、息子が

僕も喋りたいよぉ

というので、くーちゃむにアイコン描いてもらい、息子もお喋りさせてあげることにしましたーw

 

f:id:manmaru441:20180618175207j:plain

 

 

 アイコンが出来上がるまで

 くーちゃむは最近ババアサロンに入って才能開花させた期待のイラスト屋さん。 

polca.jp

最近ポルカをはじめたくーちゃむ。
イラストがドンピシャ好みだったのでお願いして描いてもらうことにしたのでした。

イラスト発注から完成まではとってもシンプル。

① ポルカにてお支払い(アイコン似顔絵は1000円~応相談)
② ツイッターのDMにて似顔絵にしてほしい画像を送る
③待つ

これだけ!w

途中、進行状況を送ってくれて、確認しながら作業を進めてくれました。

 

f:id:manmaru441:20180618211540p:plain

f:id:manmaru441:20180618211635p:plain

f:id:manmaru441:20180618211655p:plain

 

f:id:manmaru441:20180618211708p:plain

 

と、さらに私のワガママは続き、何度直してもらったことでしょう・・・

ほんとありがてぇ~!

 

で、注文からおよそ3日で完成させてくれました!

おかげでこれからは息子も登場することができます。

 

くーちゃむさん、ママがおせわになりました。
みなさん、これからはぼくもよろしくおねがいします。

 

くーちゃむのツイッターはこちら

twitter.com

 くーちゃむポルカはこちら

polca.jp

興味ある方、まずはツイッターから連絡してみてね~!
アイコン画像1000円~応相談です!

 

こちらもどうぞ

 

www.manmaru441.com

www.manmaru441.com