良い記事を書こうとすると、伝えたいことはある一方で「なるべくシンプルに」を心掛けても、どうしても文章が長くなりませんか?

読み手側とすると、自分もそうですが流し読みをすることが多いと思います。そんな中で、いかに読者さんに記事の要点をサッと掴んでもらえるか最近考えています。

そこで、記事(コンテンツ)を会話調にしてみること!

会話コンテンツを簡単に作る

記事を読みやすくするため、また記事が単調な文章だけの繰り返しにならないように、LINEのような会話のやり取りをWordPressで簡単に実現しようとカスタマイズをしてみました。

今回、完成イメージと「アフィリエイトの雛型」での実装コードを参考にお見せしますね。

完成イメージ

まず、完成イメージをご覧いただくのが早いと思います。こんな感じで左右の配置の組み合わせや、色違いの吹き出しも簡単に記事に入れることが出来るようになります。

WordPressの投稿画面から簡単に吹き出しコンテンツを作れるようにカスタマイズしてみました。
WordPressの投稿画面って、あまり凝ったことが出来ないのでは?

ちなみに、そもそも…

  • イラストを作らないといけなさそう…
  • 記事画面でHTML・CSSを書くのは嫌だなぁ…

WordPressで凝ったことをすると、結構大変なイメージだけど…。

実際に作ってみると、一旦仕組みが完成すると次回からの記事更新が楽になりました。

  • イラストはフリー素材でも良いし
  • 記事画面で特に難しいHTML・CSSも書かず

こんな感じで、更新が楽しくなりました。

キャラクターが何体もいるとにぎやかになりますね。読んでいて楽しいコンテンツになりそうです!

会話調にするメリット

コンテンツを会話風にすると、こんなメリットがあるのではないでしょうか。

  • 読み手の敷居が低くなる
  • キャラクターを使うことで個性を出せる

以前、WordPressテンプレート「賢威」を販売されている「ウェブライダー」松尾さんのセミナーに参加する機会がありましたが、「長い文章は読まなくても、漫画は読んでしまうでしょ!」といったような言葉を覚えています。

吹き出しコンテンツを作る方法

少しばかりテーマ(テンプレート)に手を加える必要がありますが、HTML・CSSを使って実現できます。1回作った仕組みで、次の記事更新から簡単に吹き出し入りの会話文を作れるようになります。

仕組みを作った後はHTML・CSSを書く必要がないのが楽です。

必要なもの

会話の吹き出しをデザインするのに多少HTML・CSSの知識が必要かなと思います。

  • プラグイン「TinyMCE Templates」 (無料)
  • HTML・CSSの知識 (多少)

じゃあ、どうやって作るの?

具体的に吹き出しコンテンツを作る流れを見ていきましょう。

手順

記事を書く度に、いちいちHTML・CSSで組み立てるのは面倒なので、まずテンプレートを作ってしまいます。「記事の中で吹き出しを使いたいなぁ」という場合はパッと取り出せるようにしておきます。

  • プラグイン「TinyMCE Templates」をインストールする
  • CSSで記事投稿欄に吹き出しのデザインを反映させる
  • 会話用の雛型をHTML・CSSで書く
  • 記事を作る際は、作った雛型を使う

大きくこの4つの手順で完成!

WordPressにプラグインをインストールして、会話用の吹き出しの雛型をHTML・CSSで作ればOKってことだね!

プラグイン「TinyMCE Templates」をインストールする

まず、WordPressに吹き出しの雛型を保存しておくためのプラグインをインストールします。今回当サイトで使ったプラグインは「TinyMCE Templates」です。

TinyMCE Templates

今回のように、今後も使いまわしたいデザインがある場合に雛型として保存しておいて、記事を書くときにサッと呼び出せる便利なプラグインです。

CSSで記事投稿欄に吹き出しのデザインを反映させる

吹き出しの雛型を作る際、記事を書いている投稿画面と実際のサイトでの表示が同じになるようにCSSを書きます。

  • 吹き出しの雛型をHTMLで作る
  • テーマフォルダに管理画面用のCSSを作る
  • 「functions.php」にそのCSSを読む設定を書く
  • 吹き出しのデザインを管理画面用のCSS実際のサイト用のCSSに書く

ポイントは管理画面用にも実際のサイト用にもCSSを反映させることですね。

吹き出しの雛型をHTMLで作る

完成イメージ図を描くとこんな感じになります。これを基に雛型となるHTMLを組んでいきます。

吹き出し雛型の設計図

点線で囲った部分をdivタグで構成していきます。class名に「left」が入っているのは、サムネイルが左という意味で書きました。

  • キャラクターの画像を左側・右側のどちらに表示させるか
  • 吹き出しの色味

こういったパターン別にclassを付けてデザインを用意しておくと良いですね。

雛型として保存するHTML

今回テンプレートとして保存しておくHTMLのソースコードです。

先ほどの「TinyMCE Templates」をインストールすると、管理画面に「テンプレート」というメニュー項目が表示されるようになります。

テンプレート : 新規追加

今回の吹き出しのようにちょっと複雑な雛型を登録する際は「ビジュアル」から「テキスト」に切り替えて、直接ソースコードを貼り付けていきます。

テンプレート : 「テキスト」欄に記入

保存をすると、雛型として登録されます。

なるほど!HTMLを「テンプレート」として保存しておいて、CSSはテーマ側に書くということかー!

テーマフォルダに管理画面用のCSSを作る

今使っているテーマフォルダに管理画面で読ませるためのCSSファイルを作ってください。既に管理画面用のCSSがある場合には、そちらを編集してもOKです。

ファイル名は特に制限はありませんが、「admin.css」のように分かりやすくしておくと良いですね。

「functions.php」にそのCSSを読む設定を書く

ファイルを置くだけでは管理画面でCSSを読んでくれないので、その設定を書きます。「functions.php」というファイルを作ってください。既に「functions.php」がある場合にはそのファイルに追記します。

「functions.php」、「admin.css」の保存場所

functions.php

吹き出しのデザインを管理画面用のCSS、実際のサイト用のCSSに書く

管理画面用、実際のサイト用のCSSが揃ったら両ファイルに吹き出しのデザインを書いていきます。

  • 管理画面用のCSS
  • 実際のサイト用のCSS

2度書きするのが面倒な場合には、管理画面用のCSSからも実際のサイト用のCSSからも読み込むCSSを1つ作って、そこにデザインを書いていくのが良いと思います。

CSSの構成例

同じCSSを、管理画面のCSSと実際のサイトのCSSから読み込めば、2度書きしなくて楽ですね。
CSSに書く吹き出しの装飾

セリフのデザインを書いてみたので、良かったら使ってみてくださいね。

これで吹き出しのテンプレートを登録できたし、装飾もばっちりですね。あとは実際に使っていくことになります。

記事を作る際は、作った雛型を使う

1度テンプレートを作ってしまえば、その後は楽々です。記事の投稿画面で「テンプレートを挿入」から雛型を選ぶだけ。

テンプレート : 「テンプレートを挿入」をクリックする

これまで登録したテンプレートの一覧から使いたいものを選びます。

テンプレート : 雛型を選択する

最後に「テンプレートを挿入」をクリックすればOKですね。

OKです!使い方、マスターしました。

おさらい

では、吹き出し会話コンテンツを作る手順をふり返ってみますね。

  • プラグイン「TinyMCE Templates」をインストールする
  • CSSで記事投稿欄に吹き出しのデザインを反映させる
  • 会話用の雛型をHTML・CSSで書く
  • 記事を作る際は、作った雛型を使う

ここまで長々と説明してきましたが、プラグインをインストールして、吹き出しのデザインをHTMLを作って登録CSSを管理画面と実際のサイトで読ませる…これだけで作業完了です。

HTML・CSSは少し書けないといけないけど、「TinyMCE Templates」を使うと色んなことができそうですね!
今後も読者さんに読みやすい記事・コンテンツの書き方を追求していきます。せっかく来てくれた訪問者の方に喜んで記事を読んでもらいたいですね。