吹き出しを作ってみた!はてなブログ無料版でカスタマイズ:3

f:id:totochn:20200605111454j:plain
toto

こんにちは!totoです。

憧れのふきだし💭をやっと作ることができました。

何が一番難しかったか⁇

それは自作のアイコンです!

では、順に!

自作のアイコンを作る。

自分で作ったアイコンを使いたかったけど、

人の顔ってホント難しい!

私には才能はない!とつくづく実感しました。

でも頑張った!

ピンタレスト

ピンタレストというアプリがあります。

Pinterest - ピンタレスト

これはレシピやインテリア、ファッションコーデなど試したくなるアイデアを発見しましょう。 という、アイデアがびっしり詰まったアプリです。

その中で、人の顔の表現の仕方など参考にしました。

顔を描きたいけど、イメージが湧かない・・・

そんな時に参考になります。

顔だけでなく色んなアイデアがあるので見てるだけで楽しいですよ?

アイビスペイント

ピンタレストのアイデアを参考にして、アイビスペイントでイラストを描きました。

apps.apple.com

  1. まずは下描き f:id:totochn:20200605122740j:plain

  2. スマホで撮影

  3. アイビスペイントアプリで写真を取り込んで、仕上げます

f:id:totochn:20200605105625p:plain

初心者ですので、細かいところはお許しを!

f:id:totochn:20200605111454j:plain
toto

がんばったんだよ!すごく・・・
下手くそ言うな💦

注意点

ふきだしに使う場合は、正方形のサイズに調整してからブログに取り込むと画像が崩れなくて済みます。

では、

アイコンが用意できたので早速ふきだしを。

もちろんコピペです!

吹き出しのつくり方

Kome(@chankomeppy)さんのCSSとHTMLをコピペさせていただきました。

【はてなブログ】WordPressみたいな会話形式の吹き出しを使おう💓(コピペOK / 初心者向け) - 【ちゃんこめBlog】インド在住者ブログ。インド旅行・観光・生活情報をお届け!

KomeさんのCSSには、ややこしい書き換えなんかがないのですごくやりやすかったです。

おまけに考えてる風のモクモクのふきだしも作れます。

Komeさんの説明はすごく分かり易かったので、私が戸惑った所だけを少し。

f:id:totochn:20200605132058p:plain

私はマークダウン記法を使いました。

空欄に写真を貼り付けます

名前を表示したい場合はここに

ここにテキストも空欄に

ちゃんと入れやすいように空欄が設けられいます。 そのまま入れればいいんですね?

f:id:totochn:20200605111454j:plain
toto

私はわざわざ[ふきだし内テキスト]の部分を消してそこに文字を入れてしまったよ・・・

これでふきだしの準備は完了!

さて、どうかな?

問題発生!

ふきだしが表示されない!

汗・汗・汗・・・

なんで???

解決方法

デザインCSSには優先順位があるようです。

上に行くほど順位が上がるので、上手くいかないときは上部に貼りなおすだけで表示されるようになりました。

デザインCSSにコピペしたCSSを一番上に貼り直してみた。

解決!

よかった・・・

おわりに

アイコンさえ用意すれば、ふきだしはコピペで簡単にできます。 私は自分のオリジナルイラストをどうしても作りたかったのですごく時間がかかってしまいましたが。。。

無料のイラストでかわいいものもたくさんあります。

でも、自分でオリジナルのアイコンを作るのはすごく楽しかったです。 挫折しそうになった時もありますが・・・

よかったら挑戦してみてくださいね?

では!

PVアクセスランキング にほんブログ村