理系頭巾の知見

なんちゃって理系の頭巾が知ったことや考えたことをまとめているブログです。

理系頭巾の知見

無印良品 リュック
Bluetooth ヘッドホン COWIN E7
フケ 対策 フケミン 皮膚科
ブログ カスタマイズ 吹き出し 会話
google chrome 軽く

【ブログカスタマイズ】吹き出しで会話形式にするヤツ試したら楽しくてワロタwwwww

はじめに

f:id:gqp:20180107120737p:plain

Yeah!どーも、頭巾@rikei_zukin)でっす!!

色んな人のブログ見てると結構多用されてるカスタマイズってありますよね。

例えばこれ。↓

これはシロマさんという方が紹介している『おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ』です。重要なテキストをオシャレに強調できて、とっても使い勝手がいいですよね!

また、同じくシロマさんが紹介しているこんなカスタマイズを見かけたことのある方も多いと思います。↓

あばばばばばばばばばばばばばば

これ、初めて見た時から

「自分のブログにも実装してみた〜〜〜〜〜〜い!!!」

って思ってたんですよ!

そしてついに!!つい昨日ようやく実装することができました!!!

ってことで今回の記事では『吹き出しで会話形式にするヤツ』を試してみた過程をご紹介しま〜〜〜す!!

『吹き出しで会話形式にするヤツ』実装方法

www.notitle-weblog.com

このカスタマイズってとっても簡単で、シロマさんの↑のページにあるCSSをコピペするだけなんですよ。

時間がかかるのはどっちかっていうと、「素材」を用意すること。

そう、会話形式にしたくても喋らせたいキャラクターがいなければ話になりません(ちょっと上手い?)。

ってことで......

絵を描く⋯⋯!!がしかし!!

自分のブログの記事で会話をさせるんだからキャラクターは当然「頭巾」に決定です。

f:id:gqp:20180107104921j:plain

でもこのアイコン、実は自分で描いたものじゃないんですよね。

フリーアイコンです。

icooon-mono.com

そう⋯⋯。僕が『吹き出しで会話形式にする』カスタマイズを実装させたくても出来ずにいた理由は、

「このフリーアイコンみたいに上手に絵が描けねぇええ!!!!」

ってこと⋯⋯。

f:id:gqp:20180107104921j:plain

単純そうなアイコンですけど難しいっすよこれは⋯⋯。

顔の輪郭とか丸そうで全然丸じゃないし⋯⋯楕円でもないし⋯⋯頭の形も絶妙というか⋯⋯。

しかし幸いなことに、僕は何事にも中途半端に手を出して途中で止める意志薄弱ボーイ。

実はペンタブレットを購入済み。過去にはそのための台を作ったこともありました。

lf2.hatenablog.com
(クソ記事)

やろうと思えばできる⋯⋯!しかし院試や何やらでもう軽く一年くらいペンタブに触っていない⋯⋯!

でもやりたい⋯⋯!自分のブログの記事で頭巾達に会話をさせてあげたい⋯⋯!

なら描くしかねぇだろッ⋯⋯!!

いざ、お絵描き!!

f:id:gqp:20180107110438p:plain

インストールだけして結局あまり触っていなかった「FireAlpaca」を起動!

用意するべきアイコンの種類は「喜怒哀楽」の4種類!

画像のサイズは500×500[px]で作成しました。

そして出来上がる!なんとも微妙なイラストが!!オラァッ!!

f:id:gqp:20180107111052p:plain

喜!!

f:id:gqp:20180107111117p:plain

怒!!

f:id:gqp:20180107111135p:plain

哀!!

f:id:gqp:20180107111157p:plain

楽っ!!!

⋯⋯⋯⋯⋯⋯。

⋯⋯⋯⋯び⋯⋯

微妙〜〜〜〜〜〜!!!

「ま、まぁええやろ⋯⋯」って感じで画像を出力。

すると500×500[px]で設定したつもりが1000×1000[px]で出力されてビビりました。

いざ、設定!!

もちろん画像を作っただけでは会話形式にできません。

ネットのどこかしらにアップロードして、CSS内にそのURLを記述してやる必要があります。

しかしそれも簡単。

はてなフォトライフにアップロードして「画像アドレスをコピー」すればオッケー。

f:id:gqp:20180107112214p:plain

そして、「デザインCSS」にコピペしたCSSのクラス名を変更して画像URLを入れれば完成!

f:id:gqp:20180107112754p:plain

早速記事内で使ってみよう!!

『吹き出しで会話形式にするヤツ』、実装!!

ついに全ての準備が整いました!あとは記事内で使用するだけ!!

このカスタマイズはMarkdownだとHTMLで

<p class="l-fuki クラス名">テキスト</p>

と入力するだけで使えます。簡単!!

ブログで新しいデザインを試す時ってすごい楽しくないですか?大体分かっていても「どんな風になるんだろ?」ってドキドキします。

いざっ⋯⋯!!!

<p class="l-fuki zukin_ki">やったー!!!</p>

⋯⋯⋯⋯。

⋯⋯⋯⋯⋯⋯。

⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯!!!




やったー!!!

や⋯⋯

やったー!!!

喋った!喋ったぞぉおおおおおお!!!

やったー!!!

やったー!!!

やったー!!!

やったァァァーーー!!!

嬉しい⋯⋯嬉しいぞ!!

描いた時は「なんやこれ⋯⋯」って感じの絵だったけど、吹き出し付きで喋ると⋯⋯まるで生きてるようじゃないか!!

中でも「」が気に入った!!一番汎用性高そう!!!

そう?

そう!!!

こりゃあ色んなキャラを用意すれば台詞で何でも遊べるぞ!!

地の文に書く文とは全く違う面白さがある!!

あわわわわわわわわ⋯⋯!!

これ⋯⋯記事がめっちゃ賑やかになる最高のカスタマイズじゃん!!

おわりに

いや〜、先人の知恵を参考に今まで色んなブログカスタマイズをしてきたけど、この『吹き出しで会話形式にするヤツ』は一番面白いかも。

自分で画像を用意すれば会話のバリエーションがどんどん増えていくのも面白ポイント。

ブログに実装するのはとっても簡単なので、まだ試していない人は是非やってみてくださいね!

それでは今回はこのへんで!チャオ〜!!