【ワードプレスDiver】吹き出し会話を記憶させて一発で表示させる方法

こんにちは!現場作業員しながら月間最高16万PVの、さはら(@sahara_momo)です。

さはら
・Diverの吹き出し会話、もうちょっと簡単にできひんかな?
・毎回名前いれたり、背景色設定するの面倒くさいな。
・一発で挿入できひんかな?

こういった悩みを解決できる記事を書きました。

せっかくワードプレスの有料テーマDiver使ってんねんから、自分が使いやすいようにせな損やで!

こういう小さい動作の短縮の積み重ねが大きな時間を生んでくれるからね。

養育費を払うためには一分一秒でも早く稼げるようになりたいしな。

ちびもも
おぉ✨
そりゃ頼もしいな!

本記事を最後まで読んだら、Diverの吹き出し会話の挿入にストレス感じることなく気持ち良くブログが書けるようになるで!

ポイント!
・今回はワードプレステーマDiverのグーテンベルクでのやり方やけど、クラシックエディタでも基本は同じやし、参考にしてね!
スポンサーリンク

Diverで吹き出し会話を表示させる簡単な流れ

さはら
吹き出し会話を一発で表示させて、時間短縮をめざそうな!
簡単な流れ!
1.AddQuicktagの有効化
2.Diverの投稿画面のブロックに吹き出し会話を表示
3.コードエディタにしてコードをコピー
4.AddQuicktagにペースト
5.Diverの投稿画面に戻りクラシックの段落でAddQuicktagをクリック

簡単に5つのステップで設定を完了することができるで!

Diverの吹き出し会話を表示させる5つのステップ

さはら
簡単な流れで紹介した5つのステップを詳しく紹介していくで!

1.AddQuicktagの有効化

Diverの吹き出し会話を一発で表示させる5つのステップ

ワードプレスに『AddQuicktag』が入ってない人は、このプラグインをインストールして有効化やで!

インストールの仕方
・ワードプレスメニュー > プラグイン > 新規追加
・検索窓に『AddQuicktag』を入力
・『AddQuicktag』のインストールをクリック
・『AddQuicktag』の有効化をクリック

2.Diverの投稿画面のブロックに吹き出し会話を表示させる

Diverの吹き出し会話を一発で表示させる5つのステップ

登録するのに必要な吹き出し会話を表示させるで!

大事なのは後で手直しせんように、使える状態にすることやで!

ポイント!
・アイコン
・吹き出しの向き
・名前
・吹き出しの背景色
・テキストの色

ここまでやっといたら、後から変更することないし楽になるで。

Diverの吹き出し会話を一発で表示させる5つのステップ
ポイント!
・吹き出し部分の『テキスト』は一文字でも入れとかんとヘンになる可能性があるで。

3.コードエディタにしてコードをコピー

Diverの吹き出し会話を一発で表示させる5つのステップ

吹き出し会話を表示させたら、画面右にある『メニュー > コードエディタ』をクリックしてコードを表示させるねん。

コードをコピーする箇所は『セリフ前と後』の2ヵ所あるし気を付けてね。

Diverの吹き出し会話を一発で表示させる5つのステップ
ポイント!
・開始タグ
『 <div class  ~  テスト 』セリフまでを貼り付け。
Diverの吹き出し会話を一発で表示させる5つのステップ
ポイント!
・終了タグ
『 セリフ以下  </span></div></div>   』までを貼り付け。

4.AddQuicktagにペースト

Diverの吹き出し会話を一発で表示させる5つのステップ

吹き出し会話のコードをコピーしたら、ワードプレスメニューの『設定 > AddQuicktag』をクリックやで。

Diverの吹き出し会話を一発で表示させる5つのステップ

『AddQuicktag』の画面が開いたら必要事項を入力するで。

入力ヶ所!
・ボタン名 : 後から分かりやすい名前
・開始タグ : セリフまで
・終了タグ : セリフより後
・チェックリスト : 右端にチェック
・あとは無視でOK!
さはら
リストが増えたら『順番』の所に番号振り分けて整理してね!
ちびもも
全部入力したら最後に『変更と保存』をクリックやで!

5.Diverの投稿画面に戻りクラシックの段落でAddQuicktagをクリック

投稿画面に戻ったら、『クラシック版の段落』を挿入。

チェック!
・『変更を保存』したと思うけど、念のため『更新』してね。
Diverの吹き出し会話を一発で表示させる5つのステップ

クラシック版の段落を挿入したら、『AddQuicktag』をクリック。

さっき名付けた『さはら吹き出し』をクリック。

Diverの吹き出し会話を一発で表示させる5つのステップ

こんな感じで表示されたらOKやで!

同じ要領で他の吹き出しバージョンも作ってな!

【ワードプレスDiver】吹き出し会話を表示させる方法:まとめ

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

今回は【ワードプレスDiver】吹き出し会話を記憶させて一発で表示させる方法!についてご紹介しました。

さはら
名前の入力とか、背景色を毎回設定すんの面倒くさかったし助かるわ!
ちびもも
これでだいぶ時間短縮できるな!
おさらい
・コードをコピーしてAddQuicktagに貼り付ける。
・セリフの前と後で貼る場所が違う。
・セリフに一文字入れとかへんとおかしくなる。

ちっちゃいことやけど、こういうのの積み重ねが後から大きな成果につながるってしんじてるねん。

一秒でも早くブログから収益が上がって、養育費の足しになったらうれしいやん!?

時間短縮でいうと、Diverのレビューの☆印も同じようにワードプレスのプラグイン『AddQuicktag』を使って短縮できる方法もあるよ。

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

Diver

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

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

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

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

Twitterでフォローしよう

おすすめの記事