MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

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

      2016/06/23

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

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

CAUTION

ワードプレス限定です!

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

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

 

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

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

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

JSファイルにコードをコピペする

画像の下に空白ができることがあるので、それを自動で削除するため、こちらのコードをメインのJSファイル(.jsで終わるファイル)にコピペします。

Stinger5なら「base.js」ですね。

これがなくてもテキストを会話風にすることはできるので、よくわからなければスルーしちゃっても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

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

 - WordPress・カスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします