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はプラグインから自分で入れる必要が有りました。

 

いや~全く気が付きませんでした。

賢威はキャラ設定も下線マーカーもボタン一つで出来るので楽ですね。

 

もしあなたがアフィリエイト初心者で、

speech bubbleがインストールできず、

他のCSSやHTMLなど触りたくないと思っているなら、

賢威8のテーマを購入される事をおすすめします。

 

賢威8は下線マーカー

アイコンも

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