アメブロで吹き出しを設定＆ランキングを確認する方法【スマホ＆PC版徹底解説】

＼HTMLがわかる方のみ／

画像を貼ってから

画像のURLをHTML表示で調べる

下記はアプリの吹き出し機能のタグ

下記の黄色い部分が画像URL

<div class="parts004_block" data-entrydesign-count-input="part" data-entrydesign-part="parts004_block" data-entrydesign-tag="div" data-entrydesign-type="block" data-entrydesign-ver="1.54.1" style="display:table;table-layout:fixed;width:100%;margin:0 auto 12px;box-sizing:border-box">
<div contenteditable="false" style="display:table-cell;vertical-align:top;padding:0 8px 0 0;width:60px">
<div style="background-color:#F1F2F3;padding:2px;border-radius:50%;box-sizing:border-box;height:60px"><span contenteditable="false" data-entrydesign-frame="thumbnail" style="border-radius:50%;position:relative;display:inline-block;height:0;font-size:0;padding-bottom:100%;max-width:100%;width:56px"><img alt="サムネイル" contenteditable="false" data-amb-layout="intrinsic" data-entrydesign-frame-img="thumbnail" height="56" src="https://stat100.ameba.jp/ameblo/entry_designs/v1/sources/assets/img_noimage.jpg" style="border-radius:50%;position:absolute;top:0;left:0;height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover" width="56"></span></div></div><span class="amp-nodisplay" contenteditable="false" role="presentation" style="display:table-cell;width:15px"><span style="border-right:8px solid transparent;border-bottom:15px solid #F1F2F3;border-left:8px solid transparent;transform:rotate(-90deg);margin:22px -1px 0 0;display:block;width:0;height:0">&nbsp;</span></span>
<div style="display:table-cell;width:100%;vertical-align:top;padding-top:4px;min-width:0">
<div style="background-color:#F1F2F3;padding:16px">
<div data-entrydesign-content="" style="background-color:transparent;font-size:14px;line-height:1.6;min-height:22px;overflow-wrap:break-word">
<p>テキストを入力</p></div></div></div></div>
<p>&nbsp;</p></div>

画像URL部分を変更したい画像URLに変更する

<div class="parts004_block" data-entrydesign-count-input="part" data-entrydesign-part="parts004_block" data-entrydesign-tag="div" data-entrydesign-type="block" data-entrydesign-ver="1.54.1" style="display:table;table-layout:fixed;width:100%;margin:0 auto 12px;box-sizing:border-box">
<div contenteditable="false" style="display:table-cell;vertical-align:top;padding:0 8px 0 0;width:60px">
<div style="background-color:#F1F2F3;padding:2px;border-radius:50%;box-sizing:border-box;height:60px"><span contenteditable="false" data-entrydesign-frame="thumbnail" style="border-radius:50%;position:relative;display:inline-block;height:0;font-size:0;padding-bottom:100%;max-width:100%;width:56px"><img alt="サムネイル" contenteditable="false" data-amb-layout="intrinsic" data-entrydesign-frame-img="thumbnail" height="56" src="https://stat.ameba.jp/user_images/20240716/19/hana-no-su/fb/b6/p/o0480048015463892570.png" style="border-radius:50%;position:absolute;top:0;left:0;height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover" width="56"></span></div></div><span class="amp-nodisplay" contenteditable="false" role="presentation" style="display:table-cell;width:15px"><span style="border-right:8px solid transparent;border-bottom:15px solid #F1F2F3;border-left:8px solid transparent;transform:rotate(-90deg);margin:22px -1px 0 0;display:block;width:0;height:0">&nbsp;</span></span>
<div style="display:table-cell;width:100%;vertical-align:top;padding-top:4px;min-width:0">
<div style="background-color:#F1F2F3;padding:16px">
<div data-entrydesign-content="" style="background-color:transparent;font-size:14px;line-height:1.6;min-height:22px;overflow-wrap:break-word">
<p>テキストを入力</p></div></div></div></div>
<p>&nbsp;</p></div>

HTML表示画面に貼り付ける

 

テキストを入力

画像によっては画像サイズを変更する必要もあります

 

テキストを入力

HTMLタグを読めば色の変更もできます！