WordPress

吹き出しを使ってみよう!

どうも!0927君です!

今回はWordPressで『吹き出し』を表示させるやり方の説明をしますよ!!

その前に吹き出しというのはこういうやつです。

マコ
マコ
急に呼ばれたけど何?0927君!
コニー
コニー
新しいサイト作りで忙しいのに!なんだよ~0927君!
王子
王子
初めて呼ばれたけど、急にどうしたの??
0927君
0927君
急にごめんね!今回は吹き出しの記事を書こうと思って、わかりやすいようにみんなのを呼んだよ!
マコ
マコ
そういうことね!何でも手伝うわよ♪
0927君
0927君
ありがとう!でも、もう吹き出しがどんなモノかわかってくれたと思うので帰っていいよ!解散!
マコ
マコ
・・・。
コニー
コニー
おい( 一一)
王子
王子
また何かあったら呼んでね!

吹き出しはこのように画像やイラストを使ってコメントしているようにみせることが出来ます!

キャラクターが喋ってることで記事にメリハリが生まれます。

こうすることで読んでいる人が記事にすぐ入り込むことが出来るので記事のクオリティを上げたい人は是非吹き出し機能を使ってみてください!

今回はWordPressのテーマ『JIN』でのやり方とプラグインを使ったやり方と2つの方法で吹き出し機能の説明をします!

どっちの方法でやるにしても次のことは共通なので覚えておきましょう!

・画像やイラストを自分で用意する!

・画像やイラストをWordPressにアップロードする!

・画像情報をひかえる!

では、まずJINの吹き出しを使った記事作成の流れを簡単に説明します。

JINの場合

①吹き出し用のコードを作る!

②記事にショートコードを使って吹き出しを表示!

次にプラグインを使った場合の説明をします。

プラグインの場合

①プラグインをインストール・有効化!

②プラグインの設定!

③画像情報を入力!

④記事のメニューから吹き出しを表示!

という流れになります!

ではそれぞれにやり方について細かい説明に入っていきますね!

吹き出しを使う準備をしよう!

吹き出しに表示させる画像やイラストを用意しよう!

0927君の場合はいつもPhotoshopを使ってイラストを作成してしています!

イラストが描けるお絵かきソフトは無料のものから有料のものまであります。

フリーで十分使えるお絵かきソフトもあるので自分にあったソフトウェアを見つけましょう!

おすすめフリーソフト

①pixiv Sketch

②Photoshop Sketch

おすすめ有料ソフト

①Photoshop CC

本格的にイラストをやりたいならプロも使っているPhotoshop!

月額980円です。画像編集にも使えるのでおすすめ!

②Procreate

iPadでしか使えませんが0927君はiPadでイラスト描くときはよく使ってるよ!

アプリの料金は1,200円で一度購入してしまえばずっと使い放題!

イラストが描けないよ~という人はフリー素材のイラストでもいいと思います!!

かわいいフリー素材集 いらすとや

一度は見たことあるイラストですよね!色んなとこで使われているので目新しさはないかもしれませんが、多くのイラストがあるので困ることはないでしょう!

https://www.irasutoya.com/

FLAT ICON DESIGN

おしゃれなフリー素材が多数ある0927君おすすめの素材サイト!

http://flat-icon-design.com/

用意出来たらアップロードしよう!

イラストや画像を用意しましたらWordPressにアップロードしましょう!

・WordPressのホーム画面から①『メディア』→②『新規追加』を選択します!

・中央にある枠に画像ファイルをドロップするか、【ファイルを選択】からファイルを選んでください!

・①画像をアップロードすると下に追加した画像が表示されます。

・②右端にある【編集】を選択します!

画像の情報をひかえよう!

編集をクリックするとアップロードしたメディアの編集画面になります。

右側にあるファイル名『〇〇〇.jpg』をコピーします!

※今回アップロードした画像のファイル名が4ad194f564321a6c81137917311795b1.jpgというファイル名になりましたがこの変な文字では不便なのであとで変更します

これでアップロードした画像を使う準備が出来ました。

お疲れ様です!

※画像の情報を書き換えよう!

WordPressで画像ファイルをアップロードしたときにファイル名が変な数字文字になることがありますがこれを通常の名前のように変更することって何故か出来ないんですよね。。

画像のタイトルなどは変更出来るのですが、今回吹き出しのコードを使うときにファイル名を入力しなくちゃいけないのでそんなときにいちいち『4ad194f564321a6c81137917311795b1.jpg』って打ち込むのはめんどうですよね。。わかりづらいですし。。

なので今回はこの文字を変えれるプラグインを紹介します!

それは【Customizer Export/Import】というプラグインです!

さっそくインストールしましょう!

①WordPressのホーム画面から『プラグイン』→『新規追加』を選択します!

②Customizer Export/Importをインストール・有効化!

③WordPressのホーム画面からメディアを選択!

④変更したい画像を見つけたら右側のファイル名を変えます!

⑤ファイル名を変更したら左側にあるチェックをします!

ファイル名は日本語不可能なので英語でつけるようにしましょう!

⑥上側にある『一括操作』→『Rename』に変更して適用をクリックします!

⑦画像を確認してみましょう!

ファイル名のところを見ると変更した『test01.jpg』になってますね!これでOKです!

【JIN】コードを設置しよう!

[chat face="画像情報" name="画像の名前" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

上のコードをコピーして記事にペーストして吹き出しを設置しましょう!

英語の部分が基本の文字列あなたが変える部分は日本語の部分です!

それぞれの部分説明します!

画像の情報を入力しよう!

[chat face="画像情報" name="画像の名前" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

赤文字の『画像情報』の部分に先ほどメディアにアップロードした画像のファイル名を入力しましょう!

今回の記事で言うと『test01.jpg』です。

画像の名前を決めよう!

[chat face="画像情報" name="画像の名前" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

画像の名前も表示できます。

画像の名前』の赤文字の部分に画像の名前を入力しましょう!

コニー
コニー
わたしの名前が画像の下に表示されてる!!

吹き出しの位置を『右』か『左』に設定しよう!

[chat face="画像情報" name="画像の名前" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

次は画像の配置を決めます。『配置』という赤文字の部分に「left」または「right」と入力してください。

入力することで下のように左か右かに寄せることが出来ます!

0927君
0927君
left
コニー
コニー
right

吹き出しの色も変更できるよ!

[chat face="画像情報" name="画像の名前" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

・ブルー

0927君
0927君
枠なしのブルーは「none」「blue」だよ!
0927君
0927君
背景なしの枠がブルーは「blue」「none」だよ!
0927君
0927君
背景ブルーの枠もブルーは「blue」「blue」だよ!

色は他にも『red』や『green』や『gray』などがあるよ!

色々試してみてね♪

画像に枠を付けてみよう!

[chat face="画像情報" name="画像の名前" align="配置" border="枠の色" bg="背景色" style="maru"] 吹き出しの内容 [/chat]

コードの最後に『style=”maru”』とつけることで丸い枠で画像を囲むことが出来るよ!

必要ない場合はstyle=”maru”という文字を削除でOKです!

コニー
コニー
丸い枠があるver
コニー
コニー
丸い枠がなしver

※コード入力の注意!

注意点

①スペルを間違わないように注意!

②半角スペースがあることに注意!

name=”画像の名前” align=”配置”

こちらのコードのように実は真ん中に半角スペースがあるので注意しましょう!

半角スペースを入れないだけで反映されないので文字列を見直そう!

【JIN】吹き出しを記事で使ってみよう!

①記事を書くときに表示される『』をクリックします!

②『ショートコード』を選択します!

ショートコードを入力する機能が表示されるのでそこに吹き出しのコードを入力します!

プレビューで確認してみると・・・・・反映されてます!!

吹き出しのコードはテキストに保存しておくといいよ!

0927君は何度もコードを書き込むのがめんどくさいので『ワードパッド』や『メモ』に書いて保存してあるよ~!

これで吹き出しが必要なときにコピー&ペーストで吹き出しを表示できるのでおすすめ!

【プラグイン】吹き出しのプラグインを使ってみよう!

続いてプラグインで吹き出しを表示するやり方の説明になります!

とても簡単に吹き出しを設定できるのでおすすめです!!

プラグインのインストールと有効化!

WordPressのホーム画面から『プラグイン』→『新規追加』を選択します!

プラグインを追加する画面になったら右側にあるプラグインの検索のとこに『LIQUID SPEECH BALLOON』と入力して検索しましょう!

プラグインを見つけたら『今すぐインストール』→『有効化』でLIQUID SPEECH BALLOONが使えるようになります!

LIQUID SPEECH BALLOONの設定をしよう!

①WordPressのホーム画面から『設定』を選択。

②『LIQUID SPEECH BALLOON』を選択。

③画像の名前を入力するところ。

④画像のURLを入力するところ。

画像URL】はクリック出来るのでクリックしたらWordPressにアップロードしたメディア一覧が見れるのでそこから吹き出しに使いたい画像を選びます。

吹き出しに使いたい画像を選択すると『メディアの編集』という画面が開くので右側にある『ファイルのURL』をコピーします!

画像の名前を入力しましょう!

今回は『コニー』と名付けました!

先ほどコピーした画像のURLを入力しましょう!

③上記2つを入力したら『追加』をクリックします!

④『変更を保存』を選択して設定の終了です!

【プラグイン】吹き出しを記事で使ってみよう!

次はいよいよ記事や固定ページで吹き出しを使ってみましょう!

記事や固定ページで簡単に吹き出しを表示!

①記事を書くときに表示される『』をクリックします!

②新しく『フキダシ』が追加されているので選択します!

すると標準で設定していた画像が表示されました!
文字を入力すれば吹き出し完了です!

他の機能もあるよ!

記事の右側を見ると『フキダシ設定』というものが表示されていますのでそこで吹き出しを細かく設定できます!

・アバター

ここで登録してある画像を選択できます!
※登録はさっき説明したLIQUID SPEECH BALLOONの設定画面で出来るよ!!

・向き

吹き出し画像を左側に寄せるか、右側に寄せるか選択できます!

向き『右』ver

・デザイン

デザインは『標準』か『バブル』がどちらかに変更できます。

吹き出しの吹き出し部分がバブルになるか、そうならないかの違いだけです。

・サイズ

サイズは吹き出しの大きさを変更できます!

小・標準・大きい

と変更できます!

サイズ『大きい』
サイズ『小さい』

・色設定

吹き出しの色を変えることも可能です!

背景の色文字の色を変更できます!

まとめ

①吹き出しを使うには画像・イラストを用意しよう!

②イラストを描けなくてもフリーのイラスト素材でOK!

③コードの文字列は間違えないように気をつけよう!

④プラグインを使って簡単に吹き出し表示!

⑤吹き出しをたくさん使って記事のクオリティをあげよう!!

今回は記事に吹き出し機能を使う説明をしましたがいかがでしたでしょうか!

何度も言いますがやっぱり吹き出しのイラストがあるとないとでは記事のメリハリが違いますし、クオリティが上がります!!

そして記事を読んでくれる人が理解しやすくなるという良いことづくめです♪

今回紹介したプラグインなどで簡単に表示できるようになりますので是非やってみてください!!

最後まで記事を読んでいただきありがとうございました!!

こちらの記事もおすすめだよ♪

COMMENT

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)