WordPressで吹き出しによる会話形式コンテンツを作ってみよう【プラグイン:Speech Bubble】

WordPress

どうも、れぼるです。

今回は、WordPressブログで吹き出しを使った会話形式のコンテンツの作り方を解説します。

 

Revol
今回は、今まさに僕らがやっている、吹き出しを使った会話のようなコンテンツが作れるプラグインについて解説していくぞ
アフィリ
  吹き出しを使うと、普通の記事と違った遊び心を入れたりできそうね。おもしろそう
Revol
解説系の記事を書く時などは特にそうだが、どうしても記事全体が説明的になって固苦しい印象になりやすい。そんな時は吹き出しを使ってみるといいぞ。
アフィリ
すでに説明口調じゃない。もっとおもしろい事言いなさいよ。折角吹き出し使ってるのに
Revol
なん・・・だと・・・

 

Speech Bubbleのインストール手順

まずは、プラグイン「Speech Bubble」をインストールします。

WordPressのダッシュボードのメニューから、

「プラグイン」>「新規追加」の順にクリック

 

 

 

 

 

 

 

検索欄に「Speech bubble」と入力しEnterキーを押します。

 

出てきた一覧からSpeech bubbleを探し、「今すぐインストール」をクリックします。

(検索の1番上に出ないかもしれません。)

 

インストールが完了すると、ボタンが「有効化」に変わるので、

クリックしてプラグインを有効化します。

これで、Speech Bubbleのインストールが完了です。

 

Speech Bubbleの使い方

Speech Bubbleで吹き出しを使う時は、記事の編集時に専用のコードを利用します。

試しに、次のコードを記事の編集画面で入力してみます。

これを記事を公開した状態、又はプレビューで見ると、次のようになります。

1.jpgさん
  ワレワレハ、デフォルトノアイコンガゾーダ。

2.jpgさん
我々2人は、プラグインインストール時に自動で用意されてるぞ。今日はこのブログを乗っ取りき来た

 

・吹き出しの編集は、ビジュアルモードでもテキストモードでも可能

Revol
 実はこのコード、ビジュアルモードでの編集画面に記載しても有効だ。実際にプレビューをみるとちゃんと吹き出しが付いてるはずだ

 

キャラの画像の設定方法

キャラの画像の設定でやる事は

① サーバーへ画像をアップロード

② コード内で画像を指定

の2つです。

1つ1つ見ていきましょう。

キャラの画像をサーバーにアップロード

まず、使いたいキャラの画像をサーバー上のSpeech Bubble用フォルダ内へアップします。

 

画像の保存場所

画像の保存場所は、サーバーの、WordPress内の「speech-bubble」内の「img」というフォルダです。

 

画像の保存場所の例(このブログの場合)

サーバーに接続し、

ドメインのフォルダ >「public_html」(Xserverのみ) >WordPressをインストールしたフォルダ(例:wordpress、wpなど、自身で作成したもの)の順でフォルダを入っていきます。

 

ここから先は共通で

wp-content > plugins > speech-bubble > img

の順で入っていきます。

最後の「img」のフォルダに使いたい画像を入れていきます。

 

サーバーに接続してファイル操作を行うやり方はこちら

 

Xserverのインフォパネルからファイルをアップロードするやり方はこちら

 

画像をアップロードする際は次の点にも注意しましょう。

・使用できる画像形式は、jpg,png,gif,svg,tif

ファイル名は半角英数字を使用

記事内で表示される際の画像の大きさは決まっている(この記事で表示されている大きさ)ので、この大きさでも見える画像がオススメ

1.jpgさん
  参考までに、デフォルトで入っている私の画像サイズは 77 x 77 だ。大体この大きさ、縦横比率にしておくといいぞ

 

キャラクター画像の指定方法

続いて、実際に記事の編集の際の画像の指定の仕方です。

コードの icon=”      ” の部分を、利用したい画像のファイル名(拡張子を含む)に書き換えます。

 

 

アフィリ
ほほう。試しに1.jpgのところを変えてみよう

1.jpgさん
な、なにをする! やめろ!そこを書き替えたら私は出てこれない
アフィリ
えいっ!(>∇<)

1.jpgさん
私がキターーーーーー。

でも、画像ファイルの指定だけを変えたので名前がそのままだ。ということで、次は名前の変更方法だ。

2.jpgさん
兄者ぁぁぁぁぁあぁ(泣

 

キャラの名前の変更方法

キャラの名前は、コードの name=”  ” の部分で変更します。

 

 

寿限無、寿限無 五劫の擦り切れ 海砂利水魚の 水行末 雲来末 風来末
食う寝る処に住む処 藪ら柑子の藪柑子 パイポ パイポ パイポのシューリンガン
シューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーの
長久命の長助
このように長すぎると表示しきれないので注意ね

the end of genesis Revol Eibis evolution turbo type D
いらんだろ?、その長さ

 

セリフの入力方法

セリフは、以下の部分にセリフをいれます。

 

 

実はこのセリフ部分、通常の文章と同様にフォント調整などを適用することもできるので、強く言わせたいところを目立たせることも出来ます。

また、画像を入れる事もできます。

2.jpgさん
兄者ぁぁぁぁぁぁぁぁぁぁぁぁぁぁ(泣

 

キャラの配置としっぽの変更方法

コードの subtype=”  ” の部分を変更すると、キャラの配置と吹き出しのしっぽの形が変えられます。

 

 

・subtype=”R1″の場合・・・右に配置&しゃべっている風のしっぽ

1.jpgさん
き、きさま、さっきはよくもやってくれたな

・subtype=”L1″の場合・・・左に配置&しゃべっている風のしっぽ

アフィリ
えぇ~?まだいたの~?(>3<)

・subtype=”R2″の場合・・・右に配置&考えている風のしっぽ

2.jpgさん
あ、あ・・・ 兄者ぁぁぁぁぁあぁ(泣

・subtype=”L2″の場合・・・左に配置&考えている風のしっぽ

Revol
え?何、この茶番?

吹き出しの種類の変更方法

吹き出しの種類は何パターンか用意されていて、変更することが出来ます。

コードの type=”    “の部分を変える事で、吹き出しの種類を変えらえれます。

 

 

選べる吹き出しの種類と実際の形は以下のようになっています。

drop

type=”drop”にした時 

アフィリ
も~う、さっさと落ちてよ~。ドロップだけに
1.jpgさん
うっさい 。元々インストールされていたのは我々だ。よってこのブログは我々が支配するのだ~

std

type=”std”にした時。シンプルなデザインです。

アフィリ
でも2人とも顔ないじゃん

1.jpgさん
シ、シンプルでいいだろ。この吹き出しと一緒だよ。

fb

type=”fb”はFacebookのようなデザインです。

アフィリ
fb・・・

フェルディナントブラウン

Revol
Facebookな。なんでブラウン管の発明者の名前出した?

 

fb-flat

type=”fb-flat”はFacebookのメッセンジャーようなデザインです。

アフィリ
最近、シュタインズ・ゲート・ゼロのアニメにはまってて

Revol
リンターロ

ln

type=”ln” はLINEのようなデザインです。

1.jpgさん
って我々を無視するなー
アフィリ
・・・

 

ln-flat

type=”ln-flat”。こちらもLINEのようなデザインです。

1.jpgさん
おい、既読スルーすんな。
アフィリ
未読スルー

 

pink

type=”pink”。ピンクを基調とした吹き出しです。

吹き出しだけじゃなく、名前もピンクの太字になります。

アフィリ
おかえり下さいませご主人様~~(_ _)

2.jpgさん
カワイイ声で何言ってだ(怒。なにそれ?どんなツンデレメイド喫茶?

 

rtail

type=”rtail” 。色味があるので画面映えしそうです。

アフィリ
何言ってるの?デレなんて無いわよ。早く帰って

2.jpgさん
ご、ごめんなさい~

1.jpgさん
あ、そんな養豚場の豚を見る目で。でもなんかゾクゾクする

think

type=”think”。文字通り尻尾が”思っている”感じです。

Revol
はぁ、やっと終わったか・・・ 
アフィリ
ふわぁ~。眠くなってきたなー( ̄~ ̄)

まとめ

いかがでしたでしょうか。

今回はちょっとした茶番劇を交えて解説しました。

僕にもっとお笑いのセンスがあればドッと笑いを取れたところですが、

吹き出しを使う事でこういった遊び心も入れられます。

 

それでは、ありがとうございました

 

1.jpgさん
我々を倒しても第二第三のjpgさんが・・・

アフィリ
しつこい!

コメント

タイトルとURLをコピーしました