会話プラグインSpeech Bubbleの画像インストール方法(Xサーバー)

WordPressで、サーバーがXサーバーならSpeech Bubbleを導入しやすのでおすすめよ、って話をしたいもやし嫁です。

もや嫁
会話プラグインいれてみたよ

もや旦
遊んでないで記事書きなよ!もう稼げるまではしめじアイコン禁止ね。

アフィ専業になることになったもやし嫁は稼げるようになるまでしめじアイコンを封印されました。

もや嫁
くそー。しばらくこの姿で暮らします。

うちはテンプレートにAffinger4を使っているので、テンプレートにふきだし機能がついていますが、Affinger4以外でもテーマに左右されずに会話が出せるので、テーマ変更する可能性があるならSpeech Bubbleおすすめです。

目次

Speech Bubbleのインストール

WordPressのプラグインからインストールできます。

プラグイン→新規追加→Speech Bubbleで検索→インストール→有効化

コレだけです。

アイコン画像インストール方法(Xサーバーの場合)

アイコン画像はプラグイン内のimgフォルダに直接入れないと会話に出てきません。ここがちょっと面倒。ですが、XサーバーはFFFTPを使わなくてもサーバー内のフォルダを操作できるのでSpeech Bubbleを比較的導入しやすいと感じました。

XサーバーでのSpeech Bubbleの画像アップロード方法

Xサーバーにログインするとこの画面が出てきます。

ファイルマネージャをクリック。

Speech Bubbleをインストールしたサイトのドメイン名をクリック。ここから会話を挿入したいサイトのフォルダに入っていきます。

public_htmlをクリック。

wp-contentをクリック。

pluginをクリック。プラグインのフォルダに入ります。

インストールされたプラグインの一覧が出てきますので、speech-bubbleをクリック。

imgをクリック。このimgフォルダに画像をインストールするとふきだしに絵が出せるようになります。

ファイルを選択をクリックし、ふきだしに使いたい画像を選択しアップロードをクリックします。一度に5つのファイルまで同時にアップロード出来ます。

ちなみに、このときアップした画像のファイル名は会話プラグインでも使用します。完結でわかりやすい英数字ファイル名がおすすめ。

 

 

Speech Bubbleの挿入コード(タグ)

Speech Bubbleはインストールしても挿入ボタンなどは現れません。

文字をコードで挟むと会話のふきだしになるのですが、私に特殊文字をHTMLでここに表示する技術がないので、私が参考にした下記のサイト様よりコードを頂いてください。

参考 【Speech Bubble】会話形式の吹き出しが使えるプラグイン 『WordPress』

もや嫁
色んな種類のふきだしがあるんだじぇ

全部で「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「rtail」「think」の9種類のふきだしがあります。

もや旦
右もできるじゃん!
バブ氏
ばぶばぶ

ふきだしの色などはプラグインCSSで変更できる

ふきだしの色を変えたい場合はプラグインのファイルを直接編集します。(コードがかければAffinger4の追加CSSでも調整できそう)

プラグイン→Speech Bubble→編集と進みます。

コードが出てきます。
ふきだしの形ごとにphpファイルが組んであるので、ふきだしのコードのtype=”rtailの赤字の部分の文字が書いてあるファイルを開きましょう。

色の変更なら”#~~“から始まる部分を探して変更しましょう。
#~~をコピーして、Googleで検索すると色が出てきますので確認できますよ)

もや旦
早く記事かけー!記事!!
もや嫁
早く稼いで戻りたい。

メルマガ2年生のためのメルマガやってます

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

夫婦でアフィリエイトを実践する「もやし家」の嫁。
トータルの稼ぎとしては旦那(もや旦)と競っているが、この家の財布と実権を握っているため、もや旦は逆らえない。もや嫁の夢は、アフィリエイターとして成功して、もや旦の実家である千葉の館山に電源カフェを作ること。アフィリのメルマガやってました(今はお休み中)

目次