【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示!クラシックエディターとグーテンベルク両方対応

こんにちは!月間最高16万PVの、さはら(@sahara_momo)です。

吹き出し会話をブログに入れるには、ワードプレステーマDIVERの入力補助で簡単に設置することができるねん!

さはら
Diverさん、だてに有料テーマじゃありませんな(笑)

この記事ではワードプレステーマDIVERの吹き出し会話の設置方法とその注意点を画像を使って分かりやすくご紹介していきます。

本記事があなたのブログ生活のお役に立てたら幸いやで。

 アフィリエイター収益最大化!最新SEO対策済み!wordpressテーマ「Diver」

スポンサーリンク

吹き出し会話アイコンをDiverオプションから登録する(クラッシク・ブロック共通)

毎回入力補助からアイコンを選択してたら面倒くさいし、時間の無駄!!

事前にDiverオプションから会話に使うアイコンを設定しとくとめっちゃラクやで!

Diverオプションの入力補助設定から会話アイコンを設定する

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

アイコンを登録するには、

  1. 『Diverオプション』を選択
  2. 『入力補助設定』を選択
  3. 『画像を追加』する
  4. 好きな画像を選ぶ
  5. 『変更を保存』する

ほな早速、画像をつかって詳しく解説していくで!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

まずはワードプレスメニューの『 Diverオプション → 入力補助設定 』をクリック。

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

『画像を追加』をクリックしたら下の画面になるし、『 画像を選択 』をクリックするで。

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

画像のアップロードには2種類あるねん。

以前にアップロードしてる画像やったら『メディアライブラリ』の中から選んでや!

PCの中の画像を使うんやったら、『 ファイルをアップロード 』から画像を選択やで。

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

『ファイルをアップロード』をクリックしたら、続けて『 ファイルを選択 』をクリック!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

次にアイコンに使いたいファイルを選択して『 開く 』をクリック!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

アップロードした画像にチェックが入っているのを確認したら、『 Choose image 』をクリック!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

アップロードが完了したら空欄のところにアイコン画像が表示されるねん。

さらにアイコンを増やしたいときは『 画像を追加 』をクリックすると、となりに空欄の登録ヵ所が出てくるし、先ほどと同じ要領で追加していくねんで!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

まとめて追加したいときは『 ctrl+クリック 』で連続して選択できるし楽ちんやで!

選択がすんだら『 開く 』をクリック!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

まとめてアップロードはできるねんけど登録は一つずつやし、コツコツやってな。

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

吹き出し会話アイコンが全部登録できたら、最後に『 変更を保存 』をクリックして完了やで!

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

さはら
アイコンの登録には上限がないし、いろんなバージョンを登録してや!

ちびもも
自分でアイコン書けたらいいけど、無理やったら『ココナラ』で依頼するのがおすすめでちゅ!新規会員登録で『割引クーポン』もらえるよ!

会話アイコンの登録の確認と表示方法(クラッシクエディターVer.)

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

会話のアイコンがちゃんと登録されてるか確認するには、『 入力補助 → 会話 』をクリック。

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示

さはら
この画面にアイコンが表示されたら、登録できてるで!
上の画像のように、先ほどアップロードしたアイコンが登録されてたらOKやで!

会話アイコンの登録の確認と表示方法(ブロックエディターVer.)

会話アイコンの登録の確認と表示方法(ブロックエディターVer.)

ブロック表示にある左の『 プラスボタン → 会話 』をクリックするねん。

会話アイコンの登録の確認と表示方法(ブロックエディターVer.)

クリックしたら、先ほどのブロックの場所に『 空欄の吹き出し会話 』が表示されるねん。

会話アイコンの登録の確認と表示方法(ブロックエディターVer.)

アイコンの部分には先ほど登録したものが、画面右のメニューにあるし、使いたいアイコンをクリックしたら自動で挿入されるで!

名前とセリフに関しては、直接入力してOKやし簡単やね!

入力が終わったら『 エンターキー 』もしくは『 プラスボタン 』を押すと次に進むで。

ブロックエディター(グーテンベルク)にだけある機能

会話アイコンの登録の確認と表示方法(ブロックエディターVer.)

ブロックエディター(グーテンベルク)には『 アイコンを反転 』っていう機能があるねん!

これは斜め向いてるアイコンを使ってる人には、めっちゃありがたい機能やね!

Diver吹き出し会話の表示例(クラシック・ブロック共通)

さはら
名前の位置はアイコン下とセリフ上で選べるねん!

ちびもも
いい感じ~~
色もかえれるんやねぇ~

ちびもも、めっちゃ普通にしゃべるやん。。。

ちびもも
聞こえてへんと思てんのやろか?

こんな感じで吹き出しの色も自由に変えれるし、読者さんの注目を集めたい時に使うのが効果的やね。

Diver吹き出し会話の注意点

適当に吹き出しアイコンを設置したら、読者さんにとってストレスになってしまうねん。

そうならへんためにも、注意点をいくつかあげとくで!

吹き出し会話アイコンの向きに気を付ける

実はアイコンの向きはめっちゃ大事やねん!

さはら
と言いますと?

こんな風に『セリフ』の反対を向いてしゃべってたらどう?

ちびもも
どっち向いてしゃべってんねん!!!ってなるわw

こんな感じで『吹き出しアイコン』の向きが違うだけで、ちょっと気持ち悪くなるねん。

そやしアイコンは画面中央を見るように設置しましょう!

吹き出し会話アイコンの並びすぎに気を付ける

吹き出しの会話は文章にメリハリがつくメリットがあるんです!

さはら
なるほどやね!

だけど使い方次第で良くも悪くもなるんです!

さはら
逆効果になるんやったら、やったらアカンなぁ。。

例えば、こんな感じで会話のラリーが続いたら?

ちびもも
ちょっと読むんつかれるかも。。。。

さはら
なるほどやね、目線も左右に振られるし読むの疲れるわな。
こりゃ勉強になったで!
てな感じで、会話のラリーが続いたら内容があんまり入ってこんよね。
会話形式は文章にメリハリをつけたり、ワンポイントで読者さんの注目を引くのに使うのが効果的やで!

会話の長さに気を付ける

ちびもも
んな細かいこと言うたって、気にせん人は気にせんのとちゃうか??
って思うかもしれんけど、少しの違和感が積み重なって、そのサイト全体のイメージが悪くなったり、信憑性が落ちたりしてしまうことがあるねん。
そやし、些細なことやけど、気を付けた方がいいねんで!
会話の一文がこんな感じで長いと

さはら
それもう本文で良くね?
ってなるねん。

細かいことやけど、読者さんにかかるストレスを減らすのも、ワシらの務めやで。

Diver吹き出し会話のメリット・デメリット

吹き出し会話も使い方によったら、読者さんに不快感を与えてしまうし注意していこな!

Diver吹き出し会話のデメリット
    • 無料素材だと差別化ができない
    • 会話が続くと内容がウソ臭くなる
    • ヘンな使い方はストレスになる
    • 会話の一文が長いと読まれない
    • 数種類のアイコンが必要

デメリット的にはこんな感じ。

サイトのイメージ低下や離脱の原因になるし、使い方には気をつけようね。

Diver吹き出し会話のメリット
    • 会話式で読みやすい
    • 親しみやすさが沸く
    • 記事の中にメリハリがつく
    • 余計なプラグインを入れずにすむ
    • ストーリー性が出て腑に落ちやすい

メリット的にはこんな感じ。

読者さんを記事により引き込んでくれる強い味方となってくれるね。

【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示:まとめ

最後まで読んでいただいてありがとさんやで!

今回は【ワードプレステーマDIVER】吹き出し会話は入力補助でサクッと表示させる方法についてご紹介しました。

おさらい
    • Diverオプション → 入力補助
    • 画像を追加 → 画像を選択
    • 好きな画像をアップロード
    • 最後に『 変更を保存 』

アイコンの登録とかちょこちょこ面倒くさいこともあるけど、それを上回るメリットが吹き出し会話にはあるねん!

ブログで読者さんの離脱を防ぐには必須の項目やで!

これだけのことがプラグイン無しで簡単にできるところが、さすが『 Diver 』やね!

目次をまだ入れてないんやったら、【ワードプレス】目次の入れ方と表示されない時の対処法をご紹介します!の記事で詳しく解説してるし参考にしてね。

記事のクオリティーが上がってきたら、広告を貼って収益化したいよね。

ワシが愛用してるASP2社を紹介しとくし、無料で登録して一緒に頑張ろな!!

業界初!全てのアフィリエイト会員さんが対象!!
通常報酬にプラス12%上乗せでお金がもらえる!!
※一部対象外アリ
Amazonアソシエイトに落ちたあなたも『もしもアフィリエイト』からならもしかして・・
Amazon審査落ちた人はもしもで再挑戦やで!
もちろんワシも、もしもから合格したで🤤
アフィリエイト満足度9年連続 No.1 のASP!!
広告の種類も一番多いし、アフィリエイトするなら絶対登録しとかなアカンASPやで!
てか、アフィリエターさんで A8.net 登録してへん人おらんやろ!
知らんけど(笑)
スポンサーリンク
初心者アフィリエイターにこそ使ってほしい。それがDiver。

Diver

htlmやCSSなどのプログラミングを全く知らなくても綺麗なサイト仕上げることが可能!

アップデートにより常に最新のSEO対策の恩恵が受けられる!

クリックだけで吹き出しやランキングを作成可能な手軽さ!

初心者でもベテランアフィリエイターのようなサイトが簡単に作れてしまうのがDiver。

Twitterでフォローしよう

おすすめの記事