会話形式(吹き出し)の画像を枠内にきれいに表示する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
前回の記事で初めて会話形式(吹き出し)にチャレンジしました!
はてなブログで運用されている方がよく使っているコレ、いつかやりたいと思っていたんですよね。

今まで、ブログ上にある会話形式のものは「はてなブログ」か「WordPress」しかできないと思っていました。しかし、これはブログサービス独自の機能ではないので、どのブログサービスでも使えるんです。

こちらの記事がとても参考になりました。
誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS – 急がば 急いでまわれ!
説明がとても分かりやすく、コードをコピペするだけで簡単に設定できます。

が、1点だけ「アレ?」と思うことが。
それは・・・画像が枠内に収まっていないんです。

そこで今回は、会話形式(吹き出し)の画像を枠内にきれいに表示する方法についてお話します。

スポンサーリンク

変更前:会話している人の画像

参考にさせていただいた記事内のコードをコピペすると、こんな感じに表示されたんです。

会話している人の顔、デカイ!完全に見切れてますから~!

これがBloggerの仕様によるものなのか、他のブログサービスではきれいに表示されるのかは分かりません(汗)

アップロードする画像サイズを小さくしたり、顔の部分だけをトリミングしたり。
あっという間に30分、1時間と過ぎていきました。試行錯誤している時の時間が進む速さは異常ですね(笑)
ようやくCSSをいじればイイってことに気付きました(えっ!? 遅いって??(汗))

スポンサーリンク

画像を枠内に収める方法

やり方はとても簡単!
会話している左と右の人の画像サイズを変えるだけ(左画像・右画像の2箇所)。

1. Blogger管理画面「テーマ」 → 「HTMLの編集」を選択

2.「.left-icon{」で検索 → 「background-size: 180%;」を「background-size: 100%;」に変更

3.「.right-icon{」で検索 → 「background-size: 180%;」を「background-size: 100%;」に変更

4.「テーマを保存」をクリック

おしまい!お疲れさまでした。

スポンサーリンク

変更後:会話している人の画像

変更前と比べるとその違いは一目瞭然!この通り、丸い枠内に画像をきれいに収めることができました。

 

スポンサーリンク

さいごに

他ブログのコードを使わせていただいても思い通りにいかないことってありませんか?
今回の件で、多少なりともCSSとHTMLの知識は必要だなと痛感しました。勉強せねば!
少しでもお役に立てましたら嬉しいです。

最後まで読んでいただき、ありがとうございましたm(_ _)m

それではまた~!

コメント