ホームロースタリー - home roastery -

炊飯器があれば米が炊けるように、焙煎機があればコーヒーが焼ける。

おラオス!

はてなブログの吹き出しの画像をちょうどいいサイズに調整する方法

f:id:iietzsche:20170615205713j:plain

 

 

どもっす!いーちぇです。

 

長らく思ってたことなんですが、一人でブログを書いていると寂しい、、、最近学校にも行かず、家にいることが多くなったので、話し相手といえば母。

 

おかん「おはよう」

いーちぇ「おはよ」

 

おかん「今日は?」

いーちぇ「家ー」

 

おかん「なら出かけてくるね」

いーちぇ「はーい」

 

もはや会話ではない、、、

 

 

せめて、ブログの中でくらい、誰かと話をしたいのです。

やはりそうなると、吹き出しですよね!あわよくば漫才みたいなこともしてみたい!

 

ということで、調べて見たところ意外と簡単に導入することができました。しかし、細かいところでトラブルが、、、試行錯誤してようやく解決できたので、その方法をお伝えできればと思います!

 

 

 

 導入してみたが、、、?

 

吹き出しを導入するにあたって、参考にさせていただいたのはこちら! ↓

georges.hatenablog.jp

 

このブクマの数だけ、 孤独から救われた人がいるということでしょうか。

じょーじさん、ありがとうございますT_T

 

 ということで、早速ぼく(いーちぇ)と彼女を召喚してみよう!

おれのターン!ドロー!

 

 

どもっす!ブラックヘアーズブラックフェイスです。

 

 

、、、彼女です。

 

 

 あれ、君たち顔でかくない?

 

 

カメラさん!もっと引いて!

 

 

アンパンマンみたくなってるな。

 

 

 

どうやら、用意した画像が枠いっぱいすぎたらしいですね。

けど、画像を作り直すのは面倒だなあ…

 

 ということで、「HTML編集」から修正しちゃいましょう!

 

 

 

吹き出しの画像サイズの調整方法

 

じょーじさんの記事の通りにしていれば、「HTML編集」に下のようにコピペしたはずです。

f:id:iietzsche:20170615151812p:plain

 

 

それでは、画像のサイズを変更するコードを書き加えましょう。

background-size: 〇〇%;

と下の画像の位置に加えることで画像のサイズを変更できます。

じょーじさんのコードでは180%に設定されているので、例えば90%などと書くと半分くらいの大きさになります。この形式で書く場合、縦横比は変更されません。

f:id:iietzsche:20170615152726p:plain

 

90%に変えるとこんな感じ↓ 

 

おお!

 

 

 

縦横比も変更したい場合

 

background-size: 〇〇px ⬜︎⬜︎px;

と加えることで、縦と横のサイズを別々に設定できます。pxというのはピクセルの数ですね。 〇〇が横のピクセル数、⬜︎⬜︎が縦のピクセル数です。

f:id:iietzsche:20170615151818p:plain

 

なので、40px 120px にするとこんな感じ ↓

 

やめて。

 

 
 

cssで一気に変更する場合

 

記事を書くたびに、いちいち画像の大きさを指定するのが面倒!という方もいらっしゃると思います。そういう方は、cssで一気に変更しちゃいましょう。

 

じょーじさんの記事では、「デザイン」→「カスタムcss」にcssのコードを貼り付けていましたよね。そのコードで画像サイズが180%に指定されています。

 

f:id:iietzsche:20170615160040p:plain

ここを90%とかに変えてまえば、いちいち「HTML編集」で変更する手間が省けますよ。

 

 

 

おまけ:セリフの人物の名前を表示したい場合

 

セリフの主の名前を表示したかったので、いろいろと試してみたのですが、画像の下とかに綺麗に表示することができませんでした。プログラミング力不足、、、!

 

ただ、「HTML編集」の以下のところに名前を書くことで、画像の左上に名前を表示できることが判明しました。

f:id:iietzsche:20170615161545p:plain

 

すると、こんな感じに! ↓

 

いーちぇ

え、、、「ぴやこ」って言うんだ、、、

 

ぴやこ

そうだけど?

 

顔と名前が被ってる!(笑)
画像と名前が被らなければ、使えるテクニックですね。気にならない方はどうぞ!
 
 
 

まとめ

 
これでようやく、吹き出しを導入することができました。
これからは夫婦漫才ができそうですね。と言うか、もう突っ込まれてますが(笑) 今後、臨場感ある記事がかければと思います! 
 
ぜひ、これからの方もチャレンジしてみてください!
それでは、また!