ふさにのふさ日記

ふさにが好き勝手に記事を書くブログです。

はてなブログでふきだしを導入!ふきだしの色をカスタマイズしてみた

f:id:fusani:20190102101117j:image

こんにちは、ふさにです。

2019年の一つ目の記事になりますが、新年早々デザインをいじってふきだしを導入できたのでそれについて書きたいと思います。 

ついに記事上で好き勝手しゃべれるようになったよ!

ふきだしの導入方法

大枠はコピペで完了!

難しいのかなと思っていたのですが、こちらのページを参考にさせていただいて思ったより簡単に導入できました!記事のタイトル通り、めっちゃ楽!

www.notitle-weblog.com

基本的にはデザインCSSにコードをコピペでできてしまいます。

ふきだしでしゃべらせる画像をはてなフォトライフにアップロードして、その画像のURLを取ってくることができれば、つまずくところはないかなと思いました。

 

記事内のところどころにふきだしを入れてみると、視覚的にかなり読みやすくなって驚きます! 

色をいじってみました

ここまでで完了でももちろん十分なのですが、個人的にはふきだしが白黒ですこしさみしいかなぁと思いました。

そこで、自分のブログテーマに合わせて自力で色を変更してみました!

コード内の「#999」など、シャープ+英数3ケタが色を表しているんだね〜

この色を表すコードは「カラーコード」といって、英数の組み合わせで様々な色が表現されます。

ふきだし追加のためのコードで使われている色は、コードをよく見てみると以下のとおり。

ふきだしの枠:「#999

ふきだしの影:「#aaa

ふきだしの枠内の色:「#fff

これらのカラーコードを、ブログテーマに合った色のカラーコードを探してきて書き換えました。

色一覧、色とカラーコードの対応は、こちらのページを参照させていただいて確認しました。

sakichin.com

 

さらに「この色いいけどもうちょっと薄いほうがいいな」とか「この色はイメージに近いんだけど微妙に違うんだよな」なんていう色があったときは、こちらのページがとても参考になりました。

encycolorpedia.jp

ある色のカラーコードを入力すると、関係する色まで表示してくれます。便利〜!

 

ちなみに私の場合は、ふきだしの枠と枠内の色を以下の色に変更しました。

ふきだしの枠:「#9FC

ふきだしの枠内の色:「#f5fffa

カラーコードには3ケタのものと6ケタのものがありますが、6ケタのものでもOKです。

やっぱり#f5fffaは最高だね〜

 

おわりに

やはりインターネット上の記事は視覚的にメリハリがあったほうが読みやすいですね。

本なんかだと文字ばかりでも問題なく読めるのに不思議。

ふさにはとにかく登場できるだけでうれしいよ

 

ふきだし、見やすいしなんだか楽しいし良いことばかりなので、まだの方は導入してみてもいいかもしれませんね。

それでは。