
私が別のブログで使用してるワードプレス無料テーマでは、CSSで会話機能を実装していますが、Diverならデフォルトで利用することができます。
会話形式にすると、読みやすさ&親しみやすさが沸くのは私だけ…じゃないよね?
Diverの会話機能をやっと設定してみましたー!
キャラクター用のアイコンも登録してバッチリ…といいたいところだけど、いちいち入力補助を開く手間が面倒じゃない?
もっと簡単に会話機能を使えるようにしちゃいましょう!
Contents
Diverの入力補助機能で会話が使える!
会話機能はDiver入力補助から使用しますが、その前に会話用のアイコンを設定しておきます。
Diverオプションで会話用アイコンを設定しておく
ダッシュボードの「Diverオプション」を使うことによって、会話するキャラクターのアイコンを事前に設定しておくことができます。
「Diverオプション」⇒「入力補助設定」へ。
「画像を選択」よりアイコンに使用したい画像をアップロード。
アイコンの種類を増やしたい時は、「画像を追加」。
(猫だらけ。こんなにいらないよ。)
アップロードが終わったら、「変更を保存」(←意外と忘れがちで二度手間あるある)
投稿画面に戻って、入力補助からアイコン、名前、吹き出しの位置やタイプ、セリフ、吹き出しの色を入力。
…色々パターンが選べる分、やることが多くなっちゃうのが難点。
入力補助の会話をいちいち使うの、面倒じゃない?
いやだって、会話を使おうとするたびに、入力補助を開いて→アイコン選んで→名前入力して(しなくてもいいけど)→タイプ選んで→セリフ入力して→色選んで→挿入ボタンをクリック…ってもうこの手順長すぎる!
記事スピードが落ちる!でも便利だから使いたい!
AddQuicktagがあるじゃないか。
そうだ!その手がある!
WordPressプラグインのおすすめ記事を書いた時にはまだ使っていなかったAddQuicktagを使う機会がいよいよやって参りました。
早速会話バルーンを登録しちゃおう!
AddQuicktagに会話用タグを登録する
AddQuicktagは、予め登録しておいたショートコードやタグ、文章を簡単に記事内に挿入することができるプラグイン。
WordPress利用者なら誰しも使ってるプラグインではないでしょーか。
まずは、会話を使った記事投稿画面のテキストエディタを見て、会話機能のタグをコピペしていきます。
いやいや、いいように使われてるだけだって…
私、最近はビジュアルエディタを使う事が多いんですが、上の会話部分をテキストエディタで見てみるとこのようになっています。
これをメモ帳などにコピペしておきます。
例として、会話に使われているコードを一つ抜き出してみました↓
<div class="voice clearfix left n_bottom"><div class="icon"><img src="https://blogup168.com/wp-content/uploads/2019/09/blue.png"><div class="name">ブルー</div></div><div class="text sc_balloon left custom" style="background:#f9ffff;color:#555555;"><span class="custom_voice left normal" style="border-color: transparent #f9ffff transparent transparent;"></span>こりゃ、テストってやつだな</div></div>
右にスクロールしていくと、長いコードのあとにセリフがでてきて、その後短いコードが続いています。
このセリフの前後のコードを、AddQuicktagに登録していくだけです。
ダッシュボードの「設定」⇒「AddQuicktag」へ。
ラベル名(エディタに表示される)を入力して、開始タグ(セリフの前)、終了タグ(セリフの後)を先ほどのメモ帳から必要な分だけコピペ。
右側のチェックをいれて、保存。
AddQuicktagは1件ずつしか登録できないので、1個の会話タグ→登録→次の会話タグ→登録を繰り返します。(あまり沢山登録すると、後々大変かも)
登録後はエディタにこのように表示されます。
テキストエディタ↓
あとは投稿画面でセリフを入力、範囲指定してクイックタグボタンをクリックするだけ!
え…ハチさん、都合よすぎ

自由すぎても、管理が大変かも。笑
ビジュアルエディタで会話実装する際の注意点
最近はもっぱら、投稿時のイメージがしやすいからビジュアルエディタを使ってますが、テキストエディタと違って、どこにタグがあるのかわかりづらい。
なのでセリフ入力の際は、セリフだけではなく、その前後の文章まで入力してから実装するようにしています。(書ききってからタグを挿入する)
そうすると便利、便利!
サクサク記事が書けると楽しくなりますね。
Diver+AddQuicktag、最強タッグか。