初心者向けWordPressホームページの作り方

初心者のためのWordPressを使ってホームページ作り方

吹き出しプラグイン「Speech Bubble」のタグを簡単入力

▼そんなデザインじゃ信頼されませんよ!▼
[dfads params='groups=144&limit=1&orderby=random']
吹き出しプラグイン「Speech Bubble」のタグを簡単入力

吹き出しが簡単に作れるプラグイン「Speech bubble」
まだ、デモWordPressに試しに入れてみました、が…

一回一回タグを書かなければいけないみたいで、正直使いづらい。。。

ブログを楽しいものにできる素晴らしいプラグインなのに、初心者には正直使いづらい、
初心者だと、すぐ挫折するレベル^^;
これでは、楽しくブログの更新ができない!!!

と、そこで最初に設定さえできれば
投稿ページ、固定ページに簡単に吹き出しが挿入できる設定をご紹介します。

Speech Bubbleタグの簡単入力設定の手順です。

  1. 「Speech Bubble」をインストールする
  2. 「AddQuicktag」をインストールする
  3. AddQuicktagにSpeech Bubbleのタグを設定する
  4. 実際にボタン一つで吹き出しが使えるか試してみよう!
  5. まとめ

「Speech Bubble」をインストールする

まずは、Speech Bubbleをインストールします。

《プラグイン》→《新規追加》→検索窓に「Speech Bubble」と入力して検索します。
Speech Bubbleを《いますぐインストール》をクリックします。

「Speech Bubble」をインストールする

インストールが完了したら《プラグインを有効化》をクリックします。

「Speech Bubble」をインストールする

これで吹き出しが表示されるようになります。

 

試しに、投稿ページで以下の様なタグを書いてみましょう。

A さん
わしはブルー!
B さん
わたしはオレンジ!

 

すると、以下のように表示されます。

A さん

わしはブルー!

B さん

わたしはオレンジ!

こちらは、インストール時に入っているデフォルト画像です。

この画像は、自分で好きな画像に変更することが可能です。

サーバーに接続して、WordPressをインストールしているフォルダにアクセスし、
《wp-content》→《plugins》→《speech-bubble》→《img》フォルダに画像をアップしましょう。
現在入っている画像「1.jpg」「2.jpg」は、デフォルト画像です。
画像のファイル名は、短くわかりやすくしましょう。

【フォルダの場所】
wp-content/plugins/speech-bubble/img/

「Speech Bubble」へオリジナル画像をアップロードする

画像は、大きいサイズで作成しても自動で縮小して表示されるようです。
私は、100px x 100px で画像を作成したものをアップしています。

「AddQuicktag」をインストールする

まずは、AddQuicktagをインストールします。

《プラグイン》→《新規追加》→検索窓に「AddQuicktag」と入力して検索します。
AddQuicktagを《いますぐインストール》をクリックします。

「AddQuicktag」をインストールする

インストールが完了したら《プラグインを有効化》をクリックします。

「AddQuicktag」を有効化する

AddQuicktagにSpeech Bubbleのタグを設定する

続いて、AddQuicktagにSpeech Bubbleのタグを入力していきます。
《設定》→《AddQuicktag》の順にクリックします。

AddQuicktagにSpeech Bubbleのタグを設定する

設定するのは、画像の3〜5を使います。
3:ボタン名…そのままですが、投稿画面でのボタン名になります。
4:開始タグ…ここにSpeech Bubbleのタグを入力します。
5:ボタンの表示順…増えてもいいように、100の位で設定しておきましょう。001、002、003…
6:利用する項目…WPのどの入力画面で利用したいかチェックします。

AddQuicktagの設定

3:ボタン名

ボタン名には、わかりやすい名前を入れましょう。
ネコ_L1_fb-flat
「ネコ」の画像で、「左位置」「Facebookのフラット吹き出し」という意味にしてみました。

4:開始タグ

ここにタグを入れます。
吹き出しタイプ:type=”fb-flat”
向き:subtype=”L1″
画像:icon=”01-cat.png”
名前:name=”ねこさん”
文章:★(文章の入力位置がわかりやすい用に★を入れています)

ねこさん

5:ボタンの表示順です。

設定したタグが増えてもいいように、100の位で設定しておきましょう。
例:001、002、003…

6:ボタンを利用する入力画面

以下の3つを選択しました。

  • ビジュアルエディター
  • post:投稿
  • page:固定ページ

《変更を保存》ボタンをクリックしましょう。

【吹き出しの種類を増やす場合】
上記の作業を繰り返して、増やしましょう。
画像の種類、向き、吹き出しタイプを増やしておけば
吹き出しを使った記事も楽々入力できます!

これで、ボタン一つで入力できる準備ができました。

実際にボタン一つで吹き出しが使えるか試してみよう!

《投稿》→《新規追加》で実際に試してみましょう。
まだ、ボタンが表示されていない場合は
以下の《ツールバー切り替えボタン》をクリックしましょう。

《ツールバー切り替えボタン》をクリック

Quicktagボタンが表示されます。

Quicktagボタンが表示されます。

《Quicktagボタン》をクリックすると、設定した項目が表示されます。

設定した項目が表示される

《ネコ_L1_fb-flat》を選択してみましょう。
ちゃんとタグが挿入されましたね!
便利〜(笑)

《ネコ_L1_fb-flat》を選択しタグを挿入

《男性_R1_fb-flat》も選択してみましょう。
こちらも、ちゃんとタグが挿入されたので
文章を変更して、確認してみましょう。

それが、こちら!!!

ねこさん

やったーこれで吹き出しが簡単に使える〜!!!

サラリーメン

これで効率よく吹き出しが使えるから、残業しなくて済むぞー!!!

まとめ

吹き出しは、「ブログを面白くする効果」と「わかりやすく効果」があります
タグを毎回入力するのは、大変です。

初期設定をすることで、記事の更新時間も短縮することができるので
効率よく記事が書けるようになります。

ぜひ、効率化してブログを楽しく更新していきましょう!

この記事が気に入ったら
いいね!しよう

この記事を書いた人

WordPressラブ管理者 YUTAPON
PHPとか詳しくない自分でも見た目がいいホームページが作れたことに感動したので「初心者のためのWordPress勉強サイト WordPressラブ」を作ってみました。
ぜひ、WordPress初心者の方のお役に立てればうれしいです。

Facebookコメント

Return Top