*

WordPressのプラグインで吹出しを使って会話風に

公開日: : 最終更新日:2018/01/02 WordPress ,

記事を書いて、画像を入れてわかりやすくというのは、よくやりますが、これを会話のように吹き出しを使うことができたら楽しいのに・・と思っていたところでピッタリのものを発見!使い方も簡単

しかもプラグインでインストールして有効にするだけ。

スポンサーリンク


プラグインは「Speech Bubble」といいます

製作者さんのサイトはこちら↓です。

http://www.arisoude-nakatta.com/wp-speech-bubble-plugin-toc-v-1-0-jp/#comment-1871

 

Speech Bubbleのインストール


WordPressのダッシュボードから
「プラグイン」→「新規追加」をクリックします。

プラグインの追加
プラグインの追加が表示されたら「キーワード」の欄に「Speech Bubble」と入力します。

候補の中にSpeech Bubbleが表示されるので「今すぐインストール」をクリックします。

インストールをクリック
インストールができたら「有効化」をクリックします。

プラグインの有効化
これで吹き出しが使えるようになりました。

 

Speech Bubbleの使い方


ダッシュボードの「投稿」から記事を投稿する画面を開きます。

「テキスト」タブでショートコードを入力します。

 

ショートコード

 

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] こんにちわ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="B さん"] おばんです [/speech_bubble]
 

利用するには、まずこのショートコードをそのまま投稿欄の「テキスト」タブの方へ入力します。

一度「プレビュー」で確認してみましょう。↓のように表示されます。

基本の吹き出し
 

※うまく表示されなかった場合

下記●印の部分には半角のスペースを挿入します。
うまく行かない場合は、まずこの点をチェックします。

[speech_bubble●type=”drop”●subtype=”L1″●icon=”1.jpg”●name=”A さん”] こんばんわ [/speech_bubble]
 

次に自分の表示したいように中身を変更します。

ショートコードの意味は次のようになっています。

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”A さん”] こんばんわ [/speech_bubble]
 
type 吹き出しの形等を指定
subtype 方向(右か左)を指定
icon 人型のアイコン指定,(オリジナルが使えます)
name 表示する名前を指定(○○さんなど)
セリフ 表示したいテキストを入力します。セリフは,ショートコードの][で挟まれた部分に書き込みます。

それぞれの”〇〇”の部分を変更することでオリジナルなものにできます。

 

typeの種類


全部で9種類の吹き出しデザイン『std・drop・fb・fb-flat・ln・ln-flat・pink・rtail・think』があります。

9種類の吹き出しタイプ
●それぞれのタイプを対話にした場合は次のようになります。

タイプdrop タイプfb
タイプfb-flat
タイプLINE風
タイプLINE平面
タイプpink
タイプrtail
タイプstd
タイプthink
 
スポンサーリンク

 

subtypeを指定

L1が左(leftですね)

R1が右(riteですね)

L2・R2にすると吹き出しが少し変わりますね

subtypeの変更サンプル

 icon画像の変更


icon=“1.jpg”の部分で,表示するアイコンを指定できます。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] おこんばんわ [/speech_bubble]
変更するには、Speech bubbleプラグインのimgフォルダにアイコンをアップロードします。

画像の拡張子としては,jpg, png, gif, svg, tifが使用できます。

 

画像追加方法


①FileZilla等のFTPクライアントソフトを使って利用しているサーバーのWordPressフォルダにアクセスします。

②speech-bubbleプラグインのフォルダを探します。

通常、\wp-content\plugins\speech-bubble\img\に配置されていると思います。
アップロードする画像を選択して右クリック→アップロードを選んでください。

 

プラグインのフォルダ
 

Speech Bubbleのimgフォルダにアイコンのファイルが追加されました。

 

追加ファイル
 

speech-bubbleショートコードの引数をicon=”icon_k1.png”等のように追加された画像名を指定します。

😛 FileZilla(ファイルラジ)についてはこちら(^^)

 

ブログの中で画像を変更してSpeech Bubbleを使ってみました。

画像追加後の使用実例

吹き出し実用例
 

name


name=”Aさん”の部分では,”Aさん”の部分をアイコンの下部や,吹き出しの上に表示します
no name
おこんばんわ

位置は選択したデザイン毎に決まっています。

nameの位置

会話について


セリフは、ショートコードの][で挟まれた部分に書き込みます。自由にテキストで書くことができます。ということは・・・

会話の吹き出しの中はテキスト表示なので、検索ワードとしてSEOに関係してきます。


Stinger3画像変更へ    ファビコン作成へ

WordPress一覧へ

 

にほんブログ村


雑学・豆知識 ブログランキングへ

スポンサーリンク




関連記事

サイトマップをグローバルメニューに表示するⅠ

グローバルメニューというのはヘッダーの下のエリアを指します。 前の記事で作成したカテゴリー別の記事

記事を読む

プラグインTinyMCE Advancedでビジュアルモードのボタン追加

今回は投稿画面の拡張機能についてのプラグインです。 記事投稿には「ビジュアル」モードと「テキスト

記事を読む

プラグイン入ってる?WordPressのプラグイン覚書

今使っているWordPressには、いくつものプラグインがはいっています プラグインとは?簡単

記事を読む

WordPressのタイトルロゴ PCにあるソフトで作るwebで透過も

Cool Textで簡単にロゴを作る方法を試してみましたが、実際にタイトルにするロゴは別の方法で作成

記事を読む

プラグインContact Form 7-問合せ簡単作成のカスタマイズ

前回はContact Form 7-の基本的な使い方で「お問い合わせ」なんか作ってみました そのほ

記事を読む

WordPressのイメージマップにSmartArtを使う時の手順

前回ExcelのSmartArtを使って写真入り画像を作りました。 今回は続きになります。

記事を読む

画像のキャプチャ編集ができるMonosnapインストールと起動メニュー

Skitchというソフトをおしえてもらいました。 画像に矢印とか文字とか囲い枠とかいれられるソフト

記事を読む

プラグインbrBrbrでテキストモードの改行をそのまま表示

このプラグインの製作者のページには 「改行が改行しただけ改行したまま改行する」とあります。 改行

記事を読む

お名前.comからXserverにドメイン移管 | 完了まで

ドメインは、取得してくれた事業者とは別の事業者に管理を移すことができます。 なので1か所にまとめよ

記事を読む

1枚の画像で複数リンク!WordPressでイメージマップを作ってみた

イメージマップとは ホームページビルダーを使っていた時に1枚の画像に複数のリンク先を指定できる

記事を読む

スポンサーリンク




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


花見弁当
お花見とは?なぜ桜なの?意味や由来 花見の風習いつから?日本だけの文化?

春になるとお花見シーズン到来とばかりに、お花見の名所には人が集い、桜の

後片付け
バーベキュー初心者 現地でやることは?炭おこしや焼き方&後片付け

前回の続きです。 バーベキュー初心者 はじめての場合に必要な準備

バーベキュー初心者 はじめての場合に必要な準備とやることやいるもの

暖かくなるとバーベキューなんてやってみたくなりますよね(^^)

駄菓子から元祖梅ジャムが消えた 昭和の味駄菓子の歴史と駄菓子屋の今

この前ニュースというか、テレビで梅ジャムが消えたという話題をやっていた

エプロンとは?いつから?つける意味や必要は?メリットを考えてみた

普段エプロンてつけていますか?つける派つけない派ありますが、もとい、エ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくてアフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・映画を観ること・パソコンで遊ぶこと・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に走り回りたい・猫を飼いたい・・

    いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。
    日々どうしたらできるか考えながらリアル仕事に追われています。

PAGE TOP ↑