【WordPress】ロリポップで会話プラグイン「Speech buble」を使用する方法

WordPress

【やりたいこと】「吹き出し」を使いたい!

文字だけの文章だと、ちょっとつまんない。

そんなあなたにおすすめのプラグインがあります!その名も、

「Speech buble」

このプラグインを使用することで、いとも簡単に会話形式の記事を作成することができます!

ということで、

今回は、「Speech buble」の使い方についての記事です(^^)/

※会話形式で使用する画像をサーバーにアップロードする必要があります。今回は、ロリポップのサーバーにアップロードする方法を書いています。

【10分でできる!】会話形式はこれでばっちし!

※ダウンロード時間は10分の中に含まれていません。

0.概要

会話形式で使用する画像をロリポップのサーバーにアップロードし、Speech bubleで設定した吹き出しを表示させます。最後に、AddQuicktagで簡単に吹き出しを使用する方法を紹介します。

1.使用したもの

・ロリポップレンタルサーバー スタンダードプラン

ロリポップ!レンタルサーバー
【WordPressの表示速度No.1】のレンタルサーバー「ロリポップ!」月額550円から高速WordPressが使える!初期費用・ドメインも無料!今すぐ10日間の無料お試し

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

Hueman
The Hueman theme loads fast and is 100% mobile-friendly according to Google. One of the best rated theme for blogs and magazines on WordPress.org. Powering 70K+...

・プラグイン AddQuicktag

AddQuicktag
AddQuicktag は HTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。

・プラグイン Speech bubble

Speech bubble (ふきだしプラグイン)
Easy to add Speech bubbles in your post.

2.手順

①AddQuicktagとSpeech bubbleのインストール

プラグインの新規追加をクリックします。

AddQuicktagを検索し、インストールします。 インストール後、有効にします。

同様にSpeech bubbleもインストールし、有効にします。

 

②サーバーに画像をアップロード

ロリポップのユーザー専用ページに移動し、ユーザー設定のアカウント情報をクリックします。

ロリポップ!FTPのログインをクリックします。

使用しているサイト名のフォルダをクリックします。

その後は、

サイト名フォルダ > wp-content > plugins > speech bubble > img

の順番にクリックします。

imgフォルダに到達したら、左上のアップロードをクリックします。

ファイルを選択するをクリックし、アップロードする画像を選びます。

「アップロード待ちです。」の表示があれば、アップロードするをクリックします。

下記の画像のように、表示されていれば成功です。

③吹き出しの表示

以下のコードが、吹き出しを表示させるコードです。本文記入のところにコピぺしてください。

speech_bubble type="rtail" subtype="L1" icon="" name="○○"] こんにちは[/speech_bubble]
speech_bubble type="rtail" subtype="R1" icon="" name="○○"] こんばんわ[/speech_bubble]

②でアップロードした画像の名前をコピーします。

iconのところにペーストします。

すると、下記の画像のように、icon画像がアップロードした画像になります。

「type」は吹き出しの形、「Subtype」は吹き出しの位置、「name」はアイコンの名前

④AddQuicktagの設定

吹き出しを使用するたびに、③のようにコピペするのは、めんどくさいですよね。AddQuicktagに登録することで、簡単に吹き出しを使用することができます。やってみましょう(^^)/

設定のAddQuicktagをクリックします。

(a) 名前を決めます。ここでは、「吹き出し」と設定しました。

(b) [/speech_bubble]以外の吹き出しのコードを貼り付けます。

(c) [/speech_bubble]と記入します。

(d) すべてにチェックをつけて、「変更を保存」をクリックします。

本文にもどり、AddQuicktagから吹き出しをクリックします。

下記の画像のように、表示されていれば成功です。

3.追記

吹き出しのタイプは、色々あります。「WordPress Speech buble」で検索してみてね(^^♪

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

水中ドローンとUnityのお部屋|SHOWROOM(ショールーム)
水中ドローンとUnityの配信をメインにします(*^^*)たまにおやつ配信やおしゃべり配信します(*^^*)

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

※無料版あり Unity学習100日記念本(0~30日編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
Unity学習100日記念本(Progate編) - ひでとのお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

タイトルとURLをコピーしました