こんにちは、ふさにです。
2019年の一つ目の記事になりますが、新年早々デザインをいじってふきだしを導入できたのでそれについて書きたいと思います。
ついに記事上で好き勝手しゃべれるようになったよ！
ふきだしの導入方法
大枠はコピペで完了！
難しいのかなと思っていたのですが、こちらのページを参考にさせていただいて思ったより簡単に導入できました！記事のタイトル通り、めっちゃ楽！
基本的にはデザインCSSにコードをコピペでできてしまいます。
ふきだしでしゃべらせる画像をはてなフォトライフにアップロードして、その画像のURLを取ってくることができれば、つまずくところはないかなと思いました。
記事内のところどころにふきだしを入れてみると、視覚的にかなり読みやすくなって驚きます！
色をいじってみました
ここまでで完了でももちろん十分なのですが、個人的にはふきだしが白黒ですこしさみしいかなぁと思いました。
そこで、自分のブログテーマに合わせて自力で色を変更してみました！
コード内の「#999」など、シャープ＋英数３ケタが色を表しているんだね〜
この色を表すコードは「カラーコード」といって、英数の組み合わせで様々な色が表現されます。
ふきだし追加のためのコードで使われている色は、コードをよく見てみると以下のとおり。
ふきだしの枠：「#999」
ふきだしの影：「#aaa」
ふきだしの枠内の色：「#fff」
これらのカラーコードを、ブログテーマに合った色のカラーコードを探してきて書き換えました。
色一覧、色とカラーコードの対応は、こちらのページを参照させていただいて確認しました。
さらに「この色いいけどもうちょっと薄いほうがいいな」とか「この色はイメージに近いんだけど微妙に違うんだよな」なんていう色があったときは、こちらのページがとても参考になりました。
ある色のカラーコードを入力すると、関係する色まで表示してくれます。便利〜！
ちなみに私の場合は、ふきだしの枠と枠内の色を以下の色に変更しました。
ふきだしの枠：「#9FC」
ふきだしの枠内の色：「#f5fffa」
カラーコードには３ケタのものと６ケタのものがありますが、６ケタのものでもOKです。
やっぱり#f5fffaは最高だね〜
おわりに
やはりインターネット上の記事は視覚的にメリハリがあったほうが読みやすいですね。
本なんかだと文字ばかりでも問題なく読めるのに不思議。
ふさにはとにかく登場できるだけでうれしいよ
ふきだし、見やすいしなんだか楽しいし良いことばかりなので、まだの方は導入してみてもいいかもしれませんね。
ではまた！
