吹き出しの画像サイズ・なまえ位置の改行がおかしい時の直し方【はてなブログカスタマイズ】
ブログで会話風の吹き出しを作りたい!
LINEメッセージやチャットのようにしたい!
カスタマイズしてみたけど、うまく行かない・・・。
という人向けの記事です。
CSS・HTMLはコピペするだけ。
初心者の私が試行錯誤して辿り着いた方法を、画像でカンタンに説明します
はてなブログでのカスタマイズですが、知識としてはWordPressブログにも使える方法です。
吹き出しの画像サイズ・なまえ位置の改行がおかしい時の直し方
空白も顔画像の大きさもおかしいわ・・・
「コピペでカンタン!」という記事を見ながら吹き出しを作ってみたのですが、
全然カンタンじゃなーい!<
と怒り出したくなった初心者の私です。
- 吹き出しと顔画像の間の余白
- 顔画像と名前の間の余白
- 顔画像のサイズが小さい
という問題を、試行錯誤の上で解決しました。
スポンサーリンク
CSS/HTMLを参考にした記事
吹き出しCSS/HTMLはコピペするだけ
こちらの記事からコピペで使わせてもらってます。
吹き出しの背景色・枠線の変更
背景色・枠線の変更はこちらの記事が詳しかったです。
空白・顔画像サイズの不具合が解決した方法
上記の記事で吹き出しを作ったら、最後の調整を行います。
まずは、参照したHTMLがこちら。
(HTMLコードを文字で記載したかったのですが、技術がないため画像化しました。)
- 「ここに画像」
- 「ここに名前」
の2箇所を変えるだけのはずが、どうしても上手く行きません。
吹き出しカスタムが上手く行かない原因は、画像URLの貼り方でした。
ただのURLではなく、埋め込み用のHTMLを記入するとできました。
成功した画像埋め込み方法
- 「HTML編集」で吹き出しを作る
- 「編集見たままモード」吹き出しじゃないところ(本文)でアイコン画像を貼る
- 「HTML編集」でアイコン画像のHTML<img>タグを取得
- 吹き出しのHTMLに<img>タグを埋め込む
「ここに画像」のところに画像URLをそのまま書いてしまうと、うまくいきません。
<img>タグ内で個人で変えるのは、
- https~
- f:~:plain
の2箇所です。
実際に私が作ったHTMLがこちら。
完成したHTMLに余計なタグがないか、見比べてください。
- <br></br>
- <p></p>
が余計に入ってると、改行(空白)の原因になります。
手間が多いのねぇ
「プレビュー」で表示するとちゃんと吹き出しになっています。
とにかくこれで完成だ!!
LINEだと自分の顔が右側にあるので
右:自分
左:対話相手
にしようと思います。
私が作ったの吹き出しは6パターン!
いつもの顔!
疑問や質問
困ったとき
ラブ!嬉しい!楽しい!
燃えてるぜぇぇ
ガックリ。。。
イラストはココナラで依頼しました。
6種の顔差分を「見積り依頼」で注文し、セット価格6000円でした。
スキルを売り買いするサービス「ココナラ」
招待コード「CQW87V」で300ポイントゲット!
いつでも吹き出しを呼び出せる方法(定型文の作成)
吹き出しを作ったら、いつでも使えるように「定型文」にしてしまいましょう。
定型文を作るツールは、PC右側のツールバーにあります。
定型文を呼び出す時は、「HTML編集モード」にして貼り付けます。
これでいつでも使えるね!
お疲れさまでした。
▼ブログ記事の添削が得意です。よろしければ見ていってください。
読者登録ありがとうございます。励みになります。
>>はてなブログで読者になる
>>ブログマップで読者になる
>>Twitter「みお」ブロガー向け情報発信
みおママ☀記事添削する人 (@mioblog20200925) | Twitter
スポンサーリンク