新着情報 役立つ情報 徒然日記

マンガの吹き出しで初心者もアクセスアップ⁉プラグイン『speech bubble』の使い方を徹底解説!

更新日:



一発屋
  どうも!ハンターハンターが再開されるということでちょっと楽しみな一発屋です!

さてお気づきの皆さんもいらっしゃるとは思いますが、今回の記事は冒頭からちょっと違った雰囲気になっています。

これはワードプレスの『speech bubble』というプラグインを使っていて、マンガの吹き出しのように、キャラクターと文章を入れることができるのです。

脳筋初心者管理人の一発屋にとって、『seech bubble』で吹き出しを入れるのも少し苦労した経緯があったので、今回は同じくワードプレス初心者に向けて『speech bubble』の使い方を分かりやすくご紹介してみたいと思います。

スポンサーリンク




『speech bubble』の使い方

まず、ワードプレスのダッシュボードのプラグインの項目から、新規追加を選択し、『speech bubble』で検索してインストールを行いましょう。

インストールができたら『speech bubble』の有効化をします。

これで準備は完了です。

ワードプレスのプラグイン『speech bubble』はショートコードを記事内に書き込むことによってマンガのような吹き出しで会話のような文章を書くことができます。

脳筋初心者管理人の一発屋にとってはこの『ショートコード』なんて言葉を聞いただけで身構えてしまいましたが、実際は簡単な操作なので慣れればすぐに導入することができます。

記事内にショートコードを挿入

ワードプレスのプラグイン『speech bubble』で使用するコードは以下のものになっています。

speech bubble で使うショートコード
[speech_bubble type="(ここで吹き出しの種類を指定)" subtype="(吹き出しを左右どちらに表示するか指定)" icon="(画像を指定)" name="(画像の名前を指定)"](文章を挿入)[/speech_bubble]

このショートコードをワードプレス記事作成画面の『ビジュアル』の部分に挿入することによってマンガのような吹き出し会話を作成することができます。(実際の表示は『プレビュー』で見られるので、ショートコードを挿入したらプレビューで吹き出しが表示されているか確認しながら作業を行いましょう。)

吹き出しの種類、吹き出しの位置(左右)、会話するキャラクターの画像、キャラクターの名前が指定できるので、色々なパターンの会話形式を埋め込むことが可能です。

以下それぞれについて説明していきます。

吹き出しの種類

ショートコードの中の『type="()"』の()の所を変えることによっていろいろな種類の吹き出しを作ることができます。

涙型(drop)

ショートコード内のtype=""の部分をtype="drop"にすると涙型の吹き出しが作れます(下図)。

一発屋
  こんにちは!
スタンダード(std)

ショートコード内のtype=""の部分をtype="std"にするとスタンダードタイプの吹き出しが作れます(下図)。

一発屋
  こんにちは!
フェイスブック風(fb)

ショートコード内のtype=""の部分をtype="fb"にするとフェイスブック風の吹き出しが作れます(下図)。

一発屋
  こんにちは!
フェイスブック風フラット(fb-flat)

ショートコード内のtype=""の部分をtype="fb-flat"にすると先ほどのフェイスブック風の吹き出しよりものっぺりとした吹き出しになります(下図)。

一発屋
  こんにちは!
ライン風(ln)

ショートコード内のtype=""の部分をtype="ln"にするとライン風の吹き出しになります(下図)。

一発屋
  こんにちは!
ライン風フラット(ln-flat)

ショートコード内のtype=""の部分をtype="ln-flat"にすると先ほどのライン風よりものっぺりとした形の吹き出しになります(下図)。

一発屋
こんにちは!
ピンクの枠(pink)

ショートコード内のtype=""の部分をtype="pink"にするとピンクの枠の吹き出しになります(下図)。

一発屋
  こんにちは!
しっぽ型(rtail)

ショートコード内のtype=""の部分をtype="rtail"にするとしっぽ型の吹き出しになります(下図)。

一発屋
  こんにちは!
心の声風(think)

ショートコード内のtype=""の部分をtype="think"にすると心の声風の吹き出しになります(下図)。

一発屋
  こんにちは!

吹き出しの位置(左右)

ショートコード内の『subtype="()"』の()部分を変えることによって吹き出しの左右の位置を変えることができます

吹き出しの位置を左にする(L1)

ショートコード内のsubtype=""の部分をsubtype="L1"にすることによって吹き出しの位置が左側になります(下図)。

一発屋
  左からこんにちは!
吹き出しの位置を右にする(R1)

ショートコード内のsubtype=""の部分をsubtype="R1"にすることによって吹き出しの位置を右側にすることができます(下図)。

一発屋
  右からこんにちは!

キャラクター(画像)の名前を指定

ショートコード内の『name="()"』の()部分を変えることによって好きな名前を表示することができます。

例として先ほどから使用している一発屋を、『name="一発屋"』から『name="一発屋芸人"』に書き換えることによって、一発屋芸人に変えてみます(下図)。

一発屋芸人
  誰が一発屋芸人や!!

会話するキャラクター(画像)の指定

個人的にはここが一番わかりづらかったので、実際の操作画像を交えて出来る限りわかりやすく説明していきたいと思います。

なお、一発屋はサイト運営用にエックスサーバーを使っているので、操作はすべてエックスサーバーの場合ということになります。

まず、吹き出しでしゃべらせたいキャラクターを決めます。

ここでは例として『いらすとや』で拾ったネコの画像を使ってみようと思います(下図)。

続いてこの画像を会話のキャラクターとして使用するために『speech bubble』専用のフォルダーにアップロードします。

この作業で初心者の一発屋は手詰まりになったので初心者の皆さんは注意深く読んでください。

まず、エックスサーバーの『インフォパネル(サーバーパネルでないので注意)』にログインしましょう。

インフォパネルにログイン出来たら『ファイルマネージャー』にログインしましょう(下図赤枠)。

ファイルマネージャーにログイン出来たら、『speech bubble』をインストールしているサイトのファイルをクリックします(下図)。

その後、『public_html』、『wp-content』、『plugins』、『speech-bubble』、『img』と順番にクリックしていきましょう(下図)。

 

すると、『speech bubble』の画像ファイルにログイン出来るのでここに先ほどいらすとやでダウンロードした画像をアップロードしていきます(下図手順参照)。

これにより、『speech bubble』の画像ファイルの画像一覧に画像が追加されます。

ここでは後でショートコードに挿入するために画像の名前をコピーしておきましょう(下図)。

長くなりましたが、画像指定の準備はこれで終了です。

実際の使用ではコピーした画像の名前をショートコード内の『icon="()"』の()の所に挿入します。

スポンサーリンク




実際の使用例

それでは今までの説明を踏まえて、実際アップロードした画像を使って『speech bubble』で吹き出し会話を作ってみましょう。

ライン風吹き出し、左側表示、名前はサーバル
[speech_bubble type="ln" subtype="L1" icon="animal_serval.png" name="サーバル"]すっごーい![/speech_bubble]
実際の表示
サーバル
すっごーい!

マンガの吹き出しで初心者もアクセスアップ⁉プラグイン『speech bubble』を使ってみた!のまとめ

一発屋もそうですが、WEBサイトを訪問した時写真や画像があるページはそれだけでちょっと読んでみようかなという気持ちになります。

ある統計では女性は特にその傾向が顕著で、ほとんど画像しか見ていないなんて話もあるそうです(それは言いすぎだとは思いますが)。

また会話形式の文章の方が内容がすんなり入ってくるということもあるので、なるべく写真や画像を使い、『speech bubble』などで会話形式の文章を載せることによって訪問者が見やすく興味をもってくれるようなWEBサイトを作りアクセスアップを目指してみてはいかがでしょうか。

それでは今回の記事はここで終了とさせていただきます。


当サイトのサーバーはワードプレスと互換性の高いエックスサーバーを使用しています。

2017年6月30日まで初期設定費用が3000円→1500円の半額キャンペーン中です。


また当サイトのドメインは日本語ドメイン取得可能なお名前.comで取得しています。



にほんブログ村 小遣いブログへ
にほんブログ村

人気ブログランキング







メルマガ配信中!

全くのアフィリエイト初心者が月10000円~稼ぐ方法を配信中です!

*は入力必須です。


氏名*  姓:名:
メールアドレス* 
確認用メールアドレス* 





一発屋のおすすめ記事

1

どうも!夏場のランニングでは5キロごとに公園の水飲み場で水浴びをする一発屋です! 日本列島はそろそろ梅雨という時期でありますが、梅雨が明けるとまた厳しい暑さの季節がやってきます。 一発屋がランニングを ...

2

どうも!梅雨でも台風でもずぶ濡れになりながら走り続ける一発屋です! さて今回は久しぶりにランニンググッズ関連の商品でございます。 もうすぐ日本列島は嫌~な季節、『梅雨』に入りますね。 『梅雨』時でもラ ...

3

どうも!時計を見なくてもお腹の減り具合で時間がわかる一発屋です! さてさてランニンググッズネタが続きますが、今回は夏のランニングにおすすめのグッズをご紹介してみたいと思います。 まだまだ比較的涼しいの ...

4

どうも!朝目覚めるとたまに覚えのないアザが出来ている一発屋です! さてさて、唐突ですがランナーの皆さんは夜にランニング、ナイトランをする時どんなグッズを持って行きますでしょうか。 昨今のランニングブー ...

5

どうも!明日やれることは明後日やる一発屋です! いきなりですが、ランニングを楽しまれているみなさんはどんなランニングウォッチを使っているでしょうか。 ランニングを始めてある程度長い距離を走れるようにな ...

6

どうも!一日1リットルほどブラックコーヒーを飲むため体からコーヒーの香りが漂う一発屋です! さてさて昨今のランニングブームで通勤ランをするランナーが増えてきましたよね。 通勤ランをするためにはランニン ...

-新着情報, 役立つ情報, 徒然日記
-, , , ,

Copyright© アラフォーランナー一発屋商店! , 2017 All Rights Reserved Powered by AFFINGER4.