Mission140

ー低身長ママの3人育児&ブログ添削ー

吹き出しの画像サイズ・なまえ位置の改行がおかしい時の直し方【はてなブログカスタマイズ】

ブログで会話風の吹き出しを作りたい!
LINEメッセージやチャットのようにしたい!

カスタマイズしてみたけど、うまく行かない・・・。

という人向けの記事です。

CSS・HTMLはコピペするだけ。

f:id:mio-mama-140:20220220231312j:plain
みお

初心者の私が試行錯誤して辿り着いた方法を、画像でカンタンに説明します

はてなブログでのカスタマイズですが、知識としてはWordPressブログにも使える方法です。

吹き出しの画像サイズ・なまえ位置の改行がおかしい時の直し方

ブログカスタマイズCSS・HTML 吹き出しの位置・空白・サイズがおかしい時の直し方

吹き出しパーツの配置がおかしい

f:id:mio-mama-140:20220220232622j:plain
困った女性

空白も顔画像の大きさもおかしいわ・・・

 

「コピペでカンタン!」という記事を見ながら吹き出しを作ってみたのですが、

f:id:mio-mama-140:20220220231319j:plain
みお

全然カンタンじゃなーい!<

と怒り出したくなった初心者の私です。

  • 吹き出しと顔画像の間の余白
  • 顔画像と名前の間の余白
  • 顔画像のサイズが小さい

という問題を、試行錯誤の上で解決しました。

スポンサーリンク

 

CSS/HTMLを参考にした記事

吹き出しCSS/HTMLはコピペするだけ

こちらの記事からコピペで使わせてもらってます。

www.chankome.com

吹き出しの背景色・枠線の変更

背景色・枠線の変更はこちらの記事が詳しかったです。

www.yolocobi.jp

空白・顔画像サイズの不具合が解決した方法

上記の記事で吹き出しを作ったら、最後の調整を行います。

まずは、参照したHTMLがこちら。

f:id:mio-mama-140:20220221115230p:plain

(HTMLコードを文字で記載したかったのですが、技術がないため画像化しました。)

  • 「ここに画像」
  • 「ここに名前」

の2箇所を変えるだけのはずが、どうしても上手く行きません。

吹き出しカスタムが上手く行かない原因は、画像URLの貼り方でした。
ただのURLではなく、埋め込み用のHTMLを記入するとできました。

成功した画像埋め込み方法

  1. 「HTML編集」で吹き出しを作る
  2. 「編集見たままモード」吹き出しじゃないところ(本文)でアイコン画像を貼る
  3. 「HTML編集」でアイコン画像のHTML<img>タグを取得
  4. 吹き出しのHTMLに<img>タグを埋め込む

「ここに画像」のところに画像URLをそのまま書いてしまうと、うまくいきません。

f:id:mio-mama-140:20220221120625p:plain

f:id:mio-mama-140:20220221121216p:plain

<img>タグ内で個人で変えるのは、

  1. https
  2. f:~:plain

の2箇所です。

実際に私が作ったHTMLがこちら。

f:id:mio-mama-140:20220221122721p:plain

完成したHTMLに余計なタグがないか、見比べてください。

  • <br></br>
  • <p></p>

が余計に入ってると、改行(空白)の原因になります。

f:id:mio-mama-140:20220220232622j:plain
困った女性

手間が多いのねぇ

f:id:mio-mama-140:20220221150738p:plain

「見たまま編集」での見え方

「プレビュー」で表示するとちゃんと吹き出しになっています。

 

f:id:mio-mama-140:20220220231241j:plain
みお

とにかくこれで完成だ!!

LINEだと自分の顔が右側にあるので

右:自分
左:対話相手

にしようと思います。

 

私が作ったの吹き出しは6パターン!

f:id:mio-mama-140:20220220231241j:plain
みお

いつもの顔!

f:id:mio-mama-140:20220220231300j:plain
みお

疑問や質問

f:id:mio-mama-140:20220220231307j:plain
みお

困ったとき

f:id:mio-mama-140:20220220231312j:plain
みお

ラブ!嬉しい!楽しい!

f:id:mio-mama-140:20220220231319j:plain
みお

燃えてるぜぇぇ

f:id:mio-mama-140:20220220231331j:plain
みお

ガックリ。。。

 

イラストはココナラで依頼しました。

6種の顔差分を「見積り依頼」で注文し、セット価格6000円でした。

スキルを売り買いするサービス「ココナラ」

招待コード「CQW87V」で300ポイントゲット!

いつでも吹き出しを呼び出せる方法(定型文の作成)

吹き出しを作ったら、いつでも使えるように「定型文」にしてしまいましょう。

定型文を作るツールは、PC右側のツールバーにあります。

はてなブログで定型文(編集見たまま画面からいつでも使えるテンプレート)を作成する方法

追加>定型文貼り付け

定型文作成>保存

定型文を呼び出す時は、「HTML編集モード」にして貼り付けます。

f:id:mio-mama-140:20220220231241j:plain
なまえ

これでいつでも使えるね!

お疲れさまでした。

▼ブログ記事の添削が得意です。よろしければ見ていってください。

 

mio-mama-140.hatenablog.com

 

mio-mama-140.hatenablog.com

読者登録ありがとうございます。励みになります。

>>はてなブログで読者になる

ぽちっと押してね

>>ブログマップで読者になる

blogmap.jp

>>Twitter「みお」ブロガー向け情報発信

みおママ☀記事添削する人 (@mioblog20200925) | Twitter

スポンサーリンク