WordPressで会話風の画像とテキストをコピペで簡単表示!

意外と簡単に表示できた会話風のテキスト。たまに表示するならいいんですが、多用するとなると少し面倒です。

そこで、どうすれば誰でも簡単に使えるのか考えてみたところ、良さそうな方法があったので、その方法をご紹介します。

CAUTION

WordPress限定です!

TinyMCE Templatesをインストールする

当初僕が考えていた方法は3パターン。

  1. クイックタグを使ってボタン一発で会話風のテキストを呼び出す
  2. ショートコードを登録して呼び出す
  3. 会話風のテキスト(コード)をテンプレートとして登録して、任意の場所で呼び出す

この中で誰でも簡単に使えるのが「テンプレートに登録する」3つ目の案です。「TinyMCE Templates」というプラグインを使えば、それが可能になります。

みなさんが使っているであろう、あの有名なプラグイン「TinyMCE Advanced」との関係性はよくわかりませんが、「TinyMCE Advanced」がなくても使えます。

プラグイン嫌いの僕がこのプラグインをおすすめする理由は下記の5点。

  1. ショートコードを覚える必要がない
  2. 知識がなくても、いくつも吹き出しパターンを作ることができる
  3. 実際の表示を確認しながら、記事が書ける
  4. 後でこのプラグインを消しても、問題ない(ただテンプレートを呼び出すだけのプラグインだから)
  5. プラグインの影響でサイトが重くならない(管理画面だけに読み込まれるから)

デメリットがありませんよね。これをインストールします。

tiny-template

会話風のテキストをテンプレートに登録する

プラグインをインストールすると、このように「テンプレート」という項目が追加されるので、これをクリックします。

tiny-template-2

 

テキストモードにして、会話風のテキストにできるコードを追加します。タイトルも忘れずにつけてくださいね。

text-kaiwa-template-1

コードはこちら。左からの吹き出しです。

<div class="kaiwa">
  <figure class="kaiwa-img-left">
    <img src="dummy.jpg" alt="dummy">
    <figcaption class="kaiwa-img-description">画像下テキスト</figcaption>
  </figure>
  <div class="kaiwa-text-right">
    <p class="kaiwa-text">吹き出しテキスト</p>
  </div>
</div>

 

同じように右からの吹き出しも登録します。コードはこちら。

<div class="kaiwa">
  <figure class="kaiwa-img-right">
    <img src="dummy.jpg" alt="dummy">
    <figcaption class="kaiwa-img-description">画像下テキスト</figcaption>
  </figure>
  <div class="kaiwa-text-left">
    <p class="kaiwa-text">吹き出しテキスト</p>
  </div>
</div>

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

前回ご紹介したコードとまったく同じですが、こちらのコードをスタイルシートにコピペします。

/*--------------------
 吹き出しを作る
--------------------*/
/* 全体のスタイル */
.kaiwa {
  margin-bottom: 40px;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 60px;
  height: 60px;
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 60px;
  height: 60px;
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 80px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 80px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
p.kaiwa-text {
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #aaa;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #aaa;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}

空白の削除

画像の下に空白ができることがあるので、それを自動で削除するため、下記のコードをbodyタグ内にコピペします。</body>の直前が良いかもしれません。

<script>
$(function() {
 $('.kaiwa-img-left').find('p,br').remove();
 $('.kaiwa-img-right').find('p,br').remove();
});
</script>

 

もしくは、上の<script>と下の</script>を外して、お使いのテーマのJSファイル(.jsで終わるファイル)にコピペしてもOKです。下記がそのコードです。

$(function() {
    $('.kaiwa-img-left').find('p,br').remove();
    $('.kaiwa-img-right').find('p,br').remove();
});

 

ちなみに、これがなくてもテキストを会話風にすることはできるので、よくわからなければスルーしちゃってもOKです。

会話風のテキストを本文に挿入する

さて、これで準備はOKです。実際に使ってみましょう。「メディアを追加する」の横に新たに「テンプレートを挿入」が追加されているので、これをクリックします。

text-kaiwa-template-2

 

右下の「テンプレートを挿入」をクリックします。

text-kaiwa-template-3

 

すると…こんな感じで吹き出しテキストが表示されます。

text-kaiwa-template-4

 

画像を一度クリックし、「メディアを追加」をクリックします。

 

自分の好きな画像を選択し、右下の「投稿に挿入」をクリックします。

text-kaiwa-template-5-2

 

吹き出しの中のテキストと、画像下のテキストを変えれば、吹き出しの完成です。画像下のテキストは削除してもOKです。

text-kaiwa-template-7

まとめ

chihou-tsunagari-1
chef

いかがでしたか?余計なプラグインを使わずに、こんな感じの吹き出しが使えるようになりましたよ!

chihou-tsunagari-4
おばあちゃん

ショートコード使えばいいのに。

chihou-tsunagari-1

ショートコードだと、管理画面(投稿画面)で実際の表示を確認できないから、あまり直感的じゃないんですよね。

hito-2

直感的に使うなら、これがベストかもね。

hito
女の人

あれ?その投稿画面の表示と実際のサイトの表示がなんだかおかしいわ…ちょっと表示が崩れているみたい…

chihou-tsunagari-1

それは、キャッシュクリア再読み込み(リロード)をすればOKですよ。それか、一度ブラウザを再起動してみてください。

chihou-tsunagari-3-2
おじさん

画像はサイズの指定とかあるのかな?

chihou-tsunagari-1

特にないですよ。大きい画像は自動で縮小されます。あと、長方形の画像でも丸くなります。

hito
泣き虫の人

よく使う画像とかテキストを登録したいんだけど…?

chihou-tsunagari-1

さっきみたいに、テンプレートに登録すればOKですよ。ちょっと解説してみますね。先ほどのように管理画面上部の「新規」→「テンプレート」からテンプレートの登録画面に進みます。そして、「テンプレートを挿入」をクリックして、左の吹き出し(or 右の吹き出し)を挿入します。すると、ダミーの画像とテキストが表示されるので、任意の画像とテキストに変更後、「公開」をクリックするだけです。

また、左右の吹き出しのコードを組み合わせて登録すれば、左と右の吹き出しを別々に呼び出す必要がないので便利ですよ。

hito

とってもわかりやすい説明ありがとうございます…

chihou-tsunagari-1

ちなみに、この吹き出しのテキストは普通のテキストと同じです。

このように改行することもできるし

  1. リストを表示したり
  2. 文字を変えたり
  3. フォントサイズを大きくしたり
  4. 吹き出しにしたことによる制限はまったくありません

また、こんな感じで画像を表示することもできます。

shibainu-free-photos-9

lady

途中で画像を変えたい時はどうすればいいの?また、「メディアを追加」をクリックすればいいの?

chihou-tsunagari-1

それでもいいですが、画像を途中で変える時は、鉛筆マークをクリックして、

text-kaiwa-template-8

右側にある「置換」をクリックして画像を変える方が簡単かもしれません。

text-kaiwa-template-9

chihou-tsunagari-1

テキストを会話風にした記事もぜひチェックしてみてくださいね!参考にしていただければ嬉しいです!

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!