吹き出し！これ、いいじゃないですか！使えると思います！！

これ！見てみてください！いいですよね！

お知らせです

Speech bubble (ふきだしプラグイン)は、Wordpressのプラグインページから検索してインストールします。それから有効化にできます！
　　　　　※Speech bubbleの表示イメージはスナップショットで画像化しています。

対話している感じを表現できます。

SNSっぽいブログに出来ますね！

上記の吹き出しを出す記述のサンプルを表示します。（全く同じものです）

[speech_bubble type="ln" subtype="a" icon="1.jpg" name="ボス" ]なんかしゃべってるみたいに見える！[/speech_bubble][speech_bubble type="pink" subtype="b" icon="2.jpg" name="ちはる" ]わぁー感じがいいですよね！[/speech_bubble][speech_bubble type="fb-flat" subtype="c" icon="1.jpg" name="ボス" ]割と、か、かわいいじゃねーか[/speech_bubble][speech_bubble type="pink" subtype="d" icon="2.jpg" name="ちはる" ]あら、当然ですわ！ハッハッー！[/speech_bubble]

コピペして試してみてください(笑)。

・・・

おっと、実際に試す場合は「Speech bubble 」プラグインをインストールしてあげないと使えませんでした。

先にそっちを説明せねば・・・

解説をご覧になって、こんな風にできるのか！とご理解を深めて頂いてからでも遅くはないでしょう。
インストールはチャチャっと完了しますからね！

プラグインをインストールしてもらったら、このテスト用の投稿記事にコピペしたコードを貼り付けて、プレビューしてもらえたら、同じものが出ますよ。(笑)

これ、活用していきたいなぁ！

軽い感じでも、しっかり記事になると思うし、読んでても楽しくなると思う！

感動したので、簡単いですが記事にしてみました。

やってみたら思ったほど、難しくはなかったですよ。

それに、やりながら憶えていけばいいと思ったので、やってみようとチャレンジして見てください。

絶対に、ブログの記事が読み易くなります。

全編これでやるとなると大変かもしれません。(笑)

吹き出しの形状は9種類ありました！

実は吹き出しの種類も9種類用意されています。（ type=”〇〇”）9種類のコードはdrop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ thinkのどれかを選ぶのですが、9種類の表示イメージを提示しておきます。

こんな感じです。以外にピンクがよさげに見えますね。

吹き出しの表示位置(左右）と普通の吹き出しと心の声を表現

subtype=”〇〇”では、画像の左右の位置と、2種類の吹き出しを選びます。
それに記述方法が3タイプあって、どれを使うかは自由だそうです。
3つのタイプはこんな感じで理解してもらって、実際どれを採用するか決めるのはあなたになります。

3つのタイプ
subtype=”a”　は、subtype=”L1″や　subtype=”left1″と記述しても同じ意味になります。

a = L1 = left1
b = R1 = right1
c = L2 = left2
d = R2 = right2

と同じ扱いをしてくれます。

ここでは一番簡単な「a,b,c,d」の設定で記述します。

後、名前を表示させることも、大事な部分ですね。

画像付近に表示される名前を入れます。
この上の設定イメージでは、name=”ボス” と入れています。

それと、セリフ（〇〇〇〇・・・）はテキストで自由に表現できます。

コードのどの部分に書くのか？黄色の部分に書きます。

speech_bubble type=”drop” subtype=”d” icon=”1.jpg” name=”ボス” ]〇〇〇〇・・・〇〇[/speech_bubble　

黄色の色付き部分がそれに当たりますね。

画像にオリジナルが欲しい！と思った。

用意されているのは影みたいな画像ファイルですので、味気ないです。

デフォルトでは「1.jpg」と「2.jpg」の2枚が収録されています。
それぞれ、icon=”1.jpg”、icon=”2.jpg”と既定値として入力しています。

自分でアイコンを作ってみようか？

ネットで色々検索して情報を集めました。

アイコンの表示サイズがデフォルトでは幅77×高さ77ピクセルだそうですが、iPhoneのRetina対応を考慮すると画像のサイズを幅150×高さ150pxにすると良さそうだ、という事が解ったので、さっそく画像を準備。ネットで、無料で似顔絵を作成できるサイトがありますのでそこで作ったものを「150ｐｘ：150ｐｘ」にリサイズまで準備しました。

今回は、いらすと屋 さんなどフリー素材を使わせていただきました。

画像をサーバーにFTPでアップする！

作成した画像は、Speech bubbleプラグインのディレクトリにアップロードする必要があります。

FTPソフトを使い、WordpressがインストールされているFTPサーバーにアクセスします。

今回はエックスサーバーを利用していますので、エックスサーバーのファイルマネージャーWebFTPを使って、画像ファイルをアップロードしました。

エックスサーバーのインフォパネルへログイン（IDやパスワードはご勘弁！）します。

ファイルマネージャをクリック（赤い囲み）

以下の場所をを開きます。…/wp-content/plugins/speech-bubble

speech-bubbleの中に「img」ディレクトリがありますので、この中に新しい画像をアップロードしてください。デフォルトで1.jpgと2.jpgがあります。追加します。

ファイルの選択をクリック（赤い囲み）

アップロードする画像ファイルは今回、sampl.pngです。
エクスプローラーが開きますので、アップロードするファイルを選択します。

それから開くをクリックします。

アップロードするファイル名が表示されています。ファイル名に間違いがなければ、アップロードをクリックします。

アップロードしたら、sampl.png　が表示(追加）されていましたら、完了です。

これで新しい画像を使えるようになります。

icon=”sampl.png”　を　アップロードしましたので、さっそく表示してみます。

アイコン画像が変わりました！

どうですか、いい感じですよね！！(笑)

あっ失礼！

順番が逆でした！speech_bubbleのインストールをしてないと、設定先のフォルダーは存在しませんからね！（失礼しました！）

インストールの方法は割と簡単ですよ。

この優秀なプラグインは更新がされていませんので、100％大丈夫ですとは言い難いのですけど…

2018/12/21現在、プラグインをインストールして利用を始めた、我が身としましては、ご覧の通りです。

全然、使えています！(笑)

インストール手順を書いときますね！

①WordPressメニュー左側に縦に並んでいる中から「プラグイン」→「新規追加」を選んでクリックしましょう。（↓のような表示になります）

②キーワード（右のほう）に「speech-bubble」と入力してみましょう。

以下のプラグインが表示されてるはずです。赤で囲った「今すぐインストール」をクリックします。

③インストールが正しく終わりました。メッセージが通知されたら、赤囲った「有効」をクリックしましょう。

これでインストールは終了です。

まとめ

ひょんなことから、技術系の記事を書くことになりましたが、自分でトライした事ですので上手く表現できたのか、これからこのプラグインを利用しようと考えている方に、少しでもお役に立て手数料たら幸いです。

私自身、吹き出しを使ったブログ記事はこれから始めるので、運用面で、コードをカキカキする際に、何か便利なやり方は・・・とか考えてしまいそうです！

これは！

とか発見できるものがあったら、関連記事として、ご紹介していけるといいですよね。

そうそう、グーテンベルグの使い方が今一つ？
この記事はクラッシックエディターで書きました。

WordPress5.0の更新時に、新エディターとして標準で使えるお話でしたが、日本語表記になってなくて日本語表記にする方法がよくわからず、クラッシックエディターをインストールして、記事を書いていましたが、いづれ、新エディターも使えないといかんだろうと考えてました。

グーテンベルグもWordPress5.0で標準装備・・・

テスト運用をやっていたことにきがついたら、グーテンベルグもプラグインがあったんで、ダメもとでインストールしてみました。

日本語表記になっちゃったんです。

これでいいのか、よくないのか、定かではありませんが、悩みが解消したのは事実です。

最後までお付き合い頂きありがとうございました。