【Diverの便利な機能】会話アイコンをもっと簡単に使う方法と設定

私が別のブログで使用してるワードプレス無料テーマでは、CSSで会話機能を実装していますが、Diverならデフォルトで利用することができます。

会話形式にすると、読みやすさ&親しみやすさが沸くのは私だけ…じゃないよね?

Diverの会話機能をやっと設定してみましたー!

キャラクター用のアイコンも登録してバッチリ…といいたいところだけど、いちいち入力補助を開く手間が面倒じゃない?

もっと簡単に会話機能を使えるようにしちゃいましょう!

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、最強タッグか。

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事