WordPressにクリック1つで吹き出し会話を最速で表示させる方法。

少し前から会話形式のプラグインをいろんなサイトで見かけてて、ついに追加してみました。

そして吹き出し機能で有名なプラグインのSpeech Bubbleは今回使いません。

なので別なやり方を二通り紹介していこうと思います。

 

①【プラグインとコードを貼り付ける】

・TinyMCE Templatesのプラグイン

・スタイルシートにコピペする

 

②【4536のテーマに変更する】

・今使っているテーマを変更してもいい人

・クリック1つで簡単に、吹き出しが出せる

 

上記の方法で、自分のやりやすい方を選んでみて下さい(・▽・)

詳しい設定方法は、シェフさんの記事を参考に。

MORIAWASE

 

スポンサーリンク

 

1.TinyMCE Templatesをインストール

 

いつものプラグインのインストールです。

一応分かりやすいように、画像も付けておきました。

 

①ダッシュボードにあるプラグインをクリック

②新規追加をクリック

③検索のところに「TinyMCE Templates」を入力する

④インストールをクリックしたら、有効化もクリック

 

TinyMCE Templatesの説明画像

 

これでインストールが完了しました。

次はテンプレートを使って、コードをコピペしていく作業になります。

 

2.テンプレートにコードをコピペする

 

【テンプレート】

①ダッシュボード→テンプレート→新規追加

②投稿の編集ページを開いてテキストをクリック

③吹き出しのタイトル追加や画像を挿入して編集をする

 

テンプレートの登録

 

一通りテンプレートに登録ができたらテンプレートを挿入をクリックします。

実際に吹き出し会話がちゃんと表示されているかをプレビュー画面でチェックをしていきます。

 

3.追加CSSに貼り付ける

 

スポンサーリンク

 

・ダッシュボード→外観→カスタマイズ

・下から2番目にある追加CSSをクリック

・シェフさんのサイトに貼り付けてあるコードを追加する

・公開をクリック

 

追加CSSコピペ1

 

これで吹き出し会話ができるようになりました。

ここまできたら投稿ページから、いつものように記事を書いていくだけ。

 

4.カスタマイズから吹き出しの設定をする

 

【4536だからこその便利性】

  • 初めから吹き出し機能が備わっている
  • ややこしい設定は一切無しだから、初心者でも使える優しいテーマ
  • 画像/背景/テキスト色を指定しておくだけで、記事内に1クリックで表示させられる

 

【吹き出し設定の手順】

・カスタマイズ管理画面から吹き出しをクリック

・テキストや背景色を変える

・アイコン画像を挿入してみる

・名前を入力してみる

・最後に公開をクリック

 

カスタマイズから吹き出し1

 

小さいサイズの画像を60px以内に縮小する場合は、かなりぼやけてしまうので加工ソフトあたりで

シャープをした方が少しはマシになるかも・・・。できれば大きい画像で縮小がオススメです。

 

 

【吹き出しを使ってみる】

吹き出しのアイコン1

 

設定画面から投稿ページに移動したら、実際にアイコン表示で会話をしてみます。

吹き出しアイコンは右上に可愛く表示されてます(・ω・)

吹き出しの種類は、下の4種類です。

 

シロロ

初登場なく、お蔵入りするかと思ったよ(切実に・・)

ネイビー

顔に出てる

シロロ

これから宜しくね♪

ネイビー

宜しく

ビジュアルでの画像表示が指定の丸枠ではなく四角になっていたら、1度プレビューか公開をクリックしてみて下さい。

更新した状態で、画像が指定した丸枠で表示されていれば問題はないと思います(多分)

 

5.まとめ

 

スポンサーリンク

 

当初この記事は、Speech Bubbleのプラグインを紹介する予定でしたが大幅に変更になりました。

【変更した理由】

①wpXのインフォパネルにログインできなかった(再設定が面倒だからw)

②何か不具合が出た場合、自分で対処できるか分からなかったから

 

 

【あとがき的なやつ】

記事内で紹介したやり方を、一通りやってみたけどテキストの表示が横にこない問題

シェフさんに質問してみる

プレビューや記事を公開してみたら、テキストが横に表示されて問題解決

と思ったのも束の間、今度は日本語入力できない問題発生

解決にはなってないけど、テキストをコピペして使うという結論に行き着いた

 

面倒だけど、これでやっていく感じになりました。

もう最終的に吹き出し使えればいいかーって諦めた、激動の4日間でしたw

 

お疲れさまでした(^^)/”