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

アメブロの吹き出しの使い方と

他の人のランキングの確認の仕方を解説します！

＼あわせて読んでね／

初心者でもできるアメブロで収益化する方法2つ！

アメブロで記事を作成する際

読者の理解度を高め

記事をより魅力的にするために欠かせないのが

「吹き出し」機能です

吹き出し機能を使うことで

読みやすくなり

途中離脱を回避することができます

途中離脱を回避することで

アクセス数やランキングにも

変化が出てくると思われます

＊アメブロは離脱率を計測しているので

＊私はランキング判定に影響しているかもと予想

今回は

アメブロの吹き出し設定方法と

ライバルのランキング確認方法を

スマホとPC版それぞれ解説します。

＼お仕事でもしっかり水分補給／

[Amazon限定ブランド] Restock GREEN DA・KA・RAやさしい麦茶 2L×9本

Amazon（アマゾン）

吹き出し設定

これが吹き出し機能

利用する画像を用意してくださいね

スマホ・アプリ版

記事作成画面を開き、吹き出しを使いたい場所へカーソルを移動します。

【動画作りました】

アメブロの吹き出し作成スマホ版 #shortshttps://ameblo.jp/hana-no-su/entry-12860253550.html

youtube.com

【記事デザイン補足】

これじゃなくて

こっち

これ

【記事デザイン】から【テキスト】を選びます

最近｜写真｜テキスト

タブがあるのでテキストをポチ

吹き出しデザインは4種類
好きなものを選んでください

選ぶと下記のようになるので
画像選択部分をポチッとします

吹き出しに使う画像を選択します

完了！
あとはテキストを入力するだけ！

スマホ版では、吹き出しのデザインはあらかじめ用意されたものから選択するだけです。

【あす楽】【送料無料】サントリー GREEN DA・KA・RA（グリーンダカラ）やさしい麦茶 2000ml 2L×1ケース/6本

楽天市場

PC版

スマホがあるなら吹き出しだけはアプリ利用が断然楽！

私も機能によってはアプリを併用して使っています！

PC版で利用できる吹き出し機能を確認しましょう！

【記事デザイン】から【テキスト】を選びます

カメラアイコンがついた2つのみ

HTMLを利用してカメラ画像部分を変更。

画像サイズとか、訂正する部分が多すぎて面倒くさい。

おすすめはアプリ吹き出し機能のHTMLを利用する方法

＼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"> </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> </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"> </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> </p></div>

HTML表示画面に貼り付ける

テキストを入力

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

テキストを入力

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

私はパソコンで使うためにこの方法を使って

htmlを下書き保存してます