speech bubbleがインストールできないし違う方法もダメだったけど吹き出しが出来たって話し   
坂田 賢太坂田 賢太

こんにちは、坂田賢太です!

ちょっとよくわからないタイトルになってしまいました()

ワードプレスで吹き出しを作って会話風にすると、とってもいい感じですよね。

私もアフィリエイトサイトを作る時は吹き出しを使っています。

坂田 賢太坂田 賢太

こんな感じです^^

そこで、吹き出しプラグインと言えばspeech bubbleですが、speech bubbleがなぜか見つからずインストールできなかったんです。

そして、違うプラグインを試してみたもののやっぱりダメでした。

でも、吹き出しはプラグインだけじゃなくても方法があるという事がわかったので、今こうして吹き出しが使えています。

坂田 賢太坂田 賢太

よかった~

まあ、speech bubbleが使えないのは、私だけだと思いますがspeech bubbleを使いたくない!とかspeech bubbleの設定が面倒だという方もいると思います。

そこで、speech bubbleがインストールできなくて、吹き出しキャラを使える方法を紹介しています。 

speech bubble(スピーチバブル)がインストールできない

 私はアフィリエイトサイトを作る時には、speech bubble(スピーチバブル)を使っているのですが、このサイトでもspeech bubble(スピーチバブル)のプラグインを使おうと思ったら、speech bubbleが見つからずインストール出来ませんでした。

プラグインの新規追加でもspeech bubble(スピーチバブル)が見当たらない()

 

同じ名前のプラグインは有るけどちょっと違うんです・・・

でも、見つからないものをいつまでも探していても仕方ありません。「どうせなら、違う方法を試してみるか」ってなりました。ネタにもなりますしね()

speech bubble(スピーチバブル)の替わりにTinyMCE Templatesを使う

TinyMCE Templatesというプラグインをつかって、吹き出しを多用できるという記事をみつけました。

コピペで出来るって所に惹かれました(笑)

このプラグインは記事の投稿画面でテンプレートを記憶させて、投稿画面からボタン一つで呼び出す事が出来るプラグインです。

わかりやすくいえば、吹き出しコードをTinyMCE Templatesに記憶させておけば、記事を書く時にボタン一つで呼び出せるって事ですね。

コピペで出来るんだから簡単だろうと思いましたが、かなりてこずりました(笑)

坂田 賢太坂田 賢太

最終的にこの方法では出来なかったんですけどね(汗)

手順だけ紹介しておきます。 

吹き出しを作る

まず、TinyMCE Templatesのプラグインをインストールします。

「プラグイン」⇒「新規追加」⇒「今すぐインストール」

「今すぐインストール」のボタンが「有効化」に変わったら必ずクリックしてください。

吹き出し風の会話をTinyMCE Templatesに記憶させる

管理画面のサイドバーにテンプレートの項目が追加されていると思います。

もし無ければ「投稿」の項目の中に入っているかもしれません。

「テンプレート」⇒「新規追加」

 

投稿画面が出てきますので、

テキストエディターに、下のコードをコピーして貼り付けて下さい。

左からの吹き出し

<div class=”balloon”>

  <figure class=”balloon-image-left”>

    <img src=”dummy.jpg” alt=”dummy”>

    <figcaption class=”balloon-image-description”>名前</figcaption>

  </figure>

  <div class=”balloon-text-right”>

    <p>吹き出しテキスト</p>

  </div>

</div>

こんな感じです。

わかりやすくタイトルもつけておきましょう。

出来たら右側の「公開」をクリック。

 

右からの吹き出しも同じように記憶させます。

右側の吹き出し

<div class=”balloon”>

  <figure class=”balloon-image-right”>

    <img src=”dummy.jpg” alt=”dummy”>

    <figcaption class=”balloon-image-description”>名前</figcaption>

  </figure>

  <div class=”balloon-text-left”>

    <p>吹き出しテキスト</p>

  </div>

</div>

これで「投稿」画面に、ボタン一つで吹き出しのコードが呼び出せるようになりました。

次はこのコードを投稿画面で呼び出した時に、吹き出しの形になるように設定します。

スタイルシートにコードを追加

スタイルシートは「外観」⇒「テーマの編集」で開きます。

右側が「スタイルシート」になっている事を確認して下のコードを「スタイルシート」の下の行にコピペします。

 

/*——————–

吹き出しを作る

——————–*/

.balloon {

margin-bottom: 2em;

position: relative;

}

.balloon:before,.balloon:after {

clear: both;

content: “”;

display: block;

}

.balloon figure {

width: 60px;

height: 60px;

}

.balloon-image-left {

float: left;

margin-right: 20px;

}

.balloon-image-right {

float: right;

margin-left: 20px;

}

.balloon figure img {

width: 100%;

height: 100%;

border: 1px solid #aaa;

border-radius: 50%;

margin: 0;

}

.balloon-image-description {

padding: 5px 0 0;

font-size: 10px;

text-align: center;

}

.balloon-text-right,.balloon-text-left {

position: relative;

padding: 10px;

border: 1px solid;

border-radius: 10px;

max-width: -webkit-calc(100% – 120px);

max-width: calc(100% – 120px);

display: inline-block;

}

.balloon-text-right {

border-color: #aaa;

}

.balloon-text-left {

border-color: #aaa;

}

.balloon-text-right {

float: left;

}

.balloon-text-left {

float: right;

}

.balloon p {

margin: 0 0 20px;

}

.balloon p:last-child {

margin-bottom: 0;

}

/* 三角部分 */

.balloon-text-right:before {

position: absolute;

content: ”;

border: 10px solid transparent;

border-right: 10px solid #aaa;

top: 15px;

left: -20px;

}

.balloon-text-right:after {

position: absolute;

content: ”;

border: 10px solid transparent;

border-right: 10px solid #fff;

top: 15px;

left: -19px;

}

.balloon-text-left:before {

position: absolute;

content: ”;

border: 10px solid transparent;

border-left: 10px solid #aaa;

top: 15px;

right: -20px;

}

.balloon-text-left:after {

position: absolute;

content: ”;

border: 10px solid transparent;

border-left: 10px solid #fff;

top: 15px;

right: -19px;

}

私は賢威というテンプレートを利用していますので、スタイルシートにその情報が出ており、その下に入れました。

コピペ出来たら画像では見切れていますが、ファイルを更新をクリックします。

これで完了・・・

のはずだったんですけどね。

投稿画面でメディアを追加の横にテンプレートを挿入ボタンが出ていますが、呼び出してみても表示されません。

うまく行くとこんな感じになる様です。

何ででしょうか?

さすがにちょっとこれ以上スタイルシートを触るのは危険ですから 諦めようかと思っていました。

しかし、じつは私が使っているワードプレステーマの賢威8にはキャラクタープラグインというものが有りました。

坂田 賢太坂田 賢太

「何で今まで気づかなかったかったんだよ!」って思いますよね()

賢威8でもキャラクター設定が簡単に出来る

賢威は今までキャラ設定が管理画面に入っていたんです。

でも、賢威8はプラグインを公式ページからダウンロードしてワードプレスにインストールしなければいけなかったらしく、全く気が付きませんでした。

坂田 賢太坂田 賢太

わかりにくい(^^;

賢威8の吹き出しキャラ設定はコチラの記事を参考にして下さい。

もしspeech bubbleがインストールできず、他のCSSやHTMLなど触りたくないと思っているなら、賢威8のテーマを購入される事をおすすめします。

賢威8は下線マーカー

アイコンも

ボックスも
ボックスも
投稿画面からボタン一つで出来ます!
難しい操作をするよりもテーマを一つ購入するだけで、あなたのサイトが生れ変わりますからね。