どうも、趣味はHTMLコーディング！ アカネです(・ω・)ノ

ブログとかでよく、アイコン＋吹き出しを表示してるとこがありますよね？
あれをHiÐΞでやってみようと試してたら、できちゃいました！

ラッシーくん

イエーーイ！！

アカネ

右にも出せますよ〜

表示するにはけっこう長い呪文が必要なんですが、コピペで使えるコードを置いておきますので皆さんも遊んでみてくださいね😀

吹き出し表示サンプル

ラッシーくん

左の吹き出しッス
改行する時はタグ（<br/>）を使ってくださいッス

ラッシーくん

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

ラッシーくん

右の吹き出しッス
改行すると
こんなかんじッス

ラッシーくん

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

ラッシーくん

長い英文っぽいの入れるとバグるッス
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ヤベェー🤣
あ、左でやっても同じッス

アカネ

画像などを入れ替えていろんなパターンを作ってね！

コピペして使えるコード

記事内のどっかに置いておく呪文

下のコードを、記事のどこかに1回だけ書いてください。
どっか間違えると記事全体が大惨事になったりするので、CSSが苦手な方はそっとしておきましょう。
カスタマイズしようと思わなければ書き換える必要はないです。

アカネ

改造したくなったら気軽に相談してください ^_−☆

<style>
.h-parent{width: 100%; min-height: 100px; margin: 30px 0;}
.h-parent:after{clear:both;}
.h-parent .h-left{float: left; margin-right: -90px;}
.h-parent .h-right{float: right; margin-left: -90px;}
.h-parent img{border-radius:40px; width: 80px; height:80px; object-fit:cover;}
.body-left, .body-right{display: inline-block; position: relative; padding: 17px 13px; border-radius: 12px; text-align:left;}
.bparent-left{text-align:left;}
.bparent-right{text-align:right;}
.body-left{margin: 10px 0 0 105px;}
.body-right{margin: 10px 105px 0 0;}
.tri-left, .tri-right{display: inline-block; position: absolute; top: 18px; border: 12px solid transparent;}
.tri-left{left: -24px;}
.tri-right{right: -24px;}
.iconname{width:80px; font-size:60%; text-align:center; margin-top:-6px;}
</style>

吹き出しを表示する呪文

左側の吹き出しのコードはこちら↓

<div class="h-parent"><div class="h-left">
<img src="★アイコンのURL★">
<div class="iconname">★キャラ名★</div></div><div class="bparent-left">
<div class="body-left" style="background: ★吹き出しの色★; color: ★文字の色★;">★吹き出しに入れる文字★
<div class="tri-left" style="border-right: 12px solid ★吹き出しの色★;"></div>
</div></div></div>

右側の吹き出しのコードはこちら↓

<div class="h-parent"><div class="h-right">
<img src="★アイコンのURL★">
<div class="iconname">★キャラ名★</div></div><div class="bparent-right">
<div class="body-right" style="background: ★吹き出しの色★; color: ★文字の色★;">★吹き出しに入れる文字★
<div class="tri-right" style="border-left: 12px solid ★吹き出しの色★;"></div>
</div></div></div>

書き換える箇所について

• アイコンのURL
  HiÐΞに普通に画像を表示する時、「画像」でアップロードしてURLをコピーしますよね。あのURLをそのまま放り込めばOKです。
• キャラ名
  アイコンの下にキャラ名を表示できます。
  出したくない時は空欄でOKです。
• 吹き出しの色
  「#」で始まるカラーコード(※)を指定します。2箇所あるので同じコードを入れてください。
• 文字の色
  吹き出し内に表示される文字の色を「#」で始まるカラーコード(※)で指定します。
• 吹き出しに入れる文字
  吹き出しに内に入れたい文字を自由に書いてください。
  改行コードの「<br/>」を使って改行できます。

マークダウンエディタ、リッチテキストエディタ、どちらもプレビューで動作確認済みです👍
なんか変なところあったらコメントで教えてくださいな！！

吹き出しの他にもHiÐΞで表示してみたいもののリクエスト受け付けます。
コメントくださいな(・ω・)ノ

アカネのいろいろ

• 小説・童話作品（アルファポリス）
• イラスト作品（pixiv）
• オリジナルグッズ（SUZURI）
• NFT販売中！（OpenSea）
• Twitter
• クリエイター向け情報ブログ『ツクシイ』
• その他詳しいことはこちら！（Pontのリンク集）

イラストのリクエストについて

しばらくお休みします！
skebなどの受付は開きっぱなしですのでよろしかったらリンク集からどうぞ！
JPYCや仮想通貨払いで何か依頼されたい方もしいらっしゃいましたらTwitterのDMでご連絡ください(・ω・)ノ