記事の詳細


はじめに

◆えみか◆
emika
こんにちは!プレイジョブのえみかです。ワードプレスは初心者で最近触り始めたばかりです。(;´・ω・)汗 記事の中に吹き出しを入れたいな~と思ってるんですけど、難しいこととかめんどくさいことはやりたくないし、変なところ触ってサイトがおかしくなったら嫌やな~って感じです。(-_-;) でもできると信じて・・・今日はやります!!笑 無事入れれるかな・・・ドキドキ。|д゚)
◆Emikuma◆
emikumapro
よっ!Emikumaです。ぼくはえみかに作られたキャラクターやで。LINEスタンプにもなっとーで。笑 今日はワードプレスの吹き出しのプラグインの入れ方について説明していくで~♪

 

えみか
えみくまワクワク様!今日はワードプレスの吹き出しのプラグインについて教えてほしいねん~♪ 
えみくま
ええよ~!報酬のいちごは用意してくれたやろな~~。笑
えみか
もちろん!私ワードプレス初心者やから、丁寧に説明してな!よろしく~!
えみくま
この記事読んでいったら、ワードプレスの記事の中に吹き出し入れれるようになるで~!吹き出しの種類もいっぱいあるし、いろんな表現できるようになると思うから、書く記事もおもろくなるはず~~♪
えみか
まじで!めっちゃ楽しみ!!!

さっそくインストールしてみよう!

えみくま
ほな、さっそくインストールしていこう!!この吹き出しはCSSとかなんも触らずに、プラグインっていうアプリみたいなんを入れたら使えるねんで~♪便利やろ~♪
えみか
そうなん!よかった~!それなら私でもできそう!CSS?なんちゃら?とかよくわからんから助かった~~笑 
えみくま
そうやろ~!じゃぁまずワードプレス開くで!開ける?
えみか
それくらいはできる!!笑 ダッシュボード開いてるで~! 
えみくま
おっけ。ほんじゃぁ、左のメニューの中にある「プラグイン」っていうところ押してみて~!※ない場合は、管理者になる必要があります。

ws000124

えみか
ぽちっとな。
えみくま
次は「新規追加」をクリックしてな~!

2

えみか
ぽちっとな。
えみくま
ええ調子やな!今度は「プラグインの検索」の窓に「Speech Bubble」って入れて検索しよか! 

3

えみか
Speech Bubbleっと。
えみくま
出てきたら、「今すぐインストール」をクリック!

4

えみか
ぽちっとな。
えみくま
次は「プラグインを有効化」をクリック!
えみか
ぽちっとな。
えみくま
おわりや!
えみか
え?? 
えみくま
だから、おわりやって! 
えみか
もう?めっちゃ簡単やん! 
えみくま
そりゃまだプラグインインストールしただけやん!笑 ここからがスタートやで!
えみか
ですよね。でもまぁこれくらいなら全然できる!これって他のプラグイン入れる時も同じやり方やんな?
えみくま
そやで!よ~わかっとるやん!笑
えみか
へへへ~笑 にやにや 

どんな吹き出しがあるの?

えみくま
インストールしたところで、一回どんな吹き出しあるか見てみよか!
えみか
うん!みたい~~♪ワクワク♪

吹き出しの種類

えみくま
この吹き出しのプラグインにあるデザインは9種類!!
えみか
めっちゃある!!!

drop

えみくま
青いな。
えみか
うん。青いな。 

std

えみくま
シンプルで使いやすいな。
えみか
確かに~私好みや。 

fb

えみくま
あれやな。Facebookやな。
えみか
メッセンジャーね!

fb-flat

えみくま
これもFacebookやな!
えみか
ほんまやなぁ! 

ln

えみくま
今度はLINEか!
えみか
なんかおもろいな!

ln-flat

えみくま
これもLINEやな!
えみか
このデザインも好きやわ~ 

pink

えみくま
おっ。なにこれかわいいやん。 
えみか
似合っとーで! 

rtail

えみくま
キレイ色やね。淡路島の海みたい。 
えみか
淡路出身なん?どうりで方言が・・・ 

think

えみくま
あ、淡路出身ばれた!
えみか
やっぱ淡路出身か~。 

 

えみか
こんないっぱいあったらどれ使うか迷う~~♪

吹き出しの向きと形

えみくま
吹き出しは、しゃべっとーやつと、思っとーやつとの2種類もあるで!

L1:左向き・話す

えみくま
左からよっ! 

L2:左向き・考える

えみくま
ピンク、イけてんな~!

R1:右向き・話す

えみか
右からやっほ~!

R2:右向き・考える

えみか
ピンクええやんっ♪ 

 

えみか
なるほどね!これなら表現がもっと広がりそう~~♪

吹き出しを入れてみよう!

えみくま
どんなんか見たところで、次は実際に吹き出しを入れていくで~~!
えみか
え!どうするん?ややこしい?なー!え、大丈夫かな!!??
えみくま
ちょっと落ち着けよ!ゆっくり説明するから焦るな!笑
えみか
はーい。しゅんっ。

これを入れるだけ♪

えみくま
Speech Bubbleは基本的に、記事の編集画面の「ビジュアル」のところだけ触っていくで~!
えみか
え!そうなん!HTMLとか触らんでいいの?嬉しい~!
えみくま
そうそう!じゃぁさっそく、いくで!
えみくま

[★speech_bubble type=”吹き出しの種類” subtype=”向き” icon=”画像.jpg” name=”話す人の名前”] 吹き出し内の文章 [/speech_bubble★]

これを記事の入れたいところに入れるだけやで~!ほんまに入れる時は★は抜いてな!

えみくま
実際、HTMLとビジュアルはこんな感じになっと~で♪

HTML

6

ビジュアル

 5

えみか
ふむふむ。これだけなんや~!!すごい!!

 

9
えみくま
吹き出しの種類のところはさっき説明した、9種類のdrop、std、fb、fb-flat、ln、ln-flat、pink、rtail、thinkのどれかを入れてな!
えみくま
向きのところはさっき説明した、向きと形、L1、L2、R1、R2のどれかを入れてな!
えみくま
画像のところは、1.jpgと2.jpgがデフォルトやで!好きな画像の入れ方はあとで説明するな!

7

えみくま
話す人の名前のところは、会話する人の名前とかを入れてな!
えみくま
吹き出し内の文章は、会話を入れてな!
えみくま
これで、できあがり!
えみか
もうちょっとわかりやすく知りたい~!
えみくま
そんなえみかのために、ちゃんと用意してるよ~♪
えみか
ありがとうございますっ!!笑

こんな感じになるよ!

えみくま
さっき説明したやつをわかりやすく説明すると、こんな感じかな~!

8

えみか
おぉ~!なるほど~! 
えみか
でも、これ顔味気なくない?自分の顔にするにはどないしたらいいん??
えみくま
よっしゃ。ほんならそれ今から説明していくで~~!

画像を入れてみよう!

えみくま
顔のところに画像を入れようと思ったら、ワードプレスのメディアのライブラリところにファイルアップするだけではあかんねん・・・。
えみか
えーー!そんなーー!!
えみくま
まぁ、最後まで話聞いてよ!大丈夫やから!
えみか
わかったぁ~。
えみくま
顔のところに画像入れるには、サーバーの中に画像入れておく必要があるで!
えみか
ふ~ん。
えみくま
うん。笑 場所は、自分が使ってる、サーバーのワードプレスのフォルダの中やで~
えみくま
詳しくは、

ドメイン>wp-content>plugins>speech-bubble>img

このimgの中に使いたい画像を入れたらOK!

えみか
画像はjpgでもpngでもいいの?
えみくま
どっちでもええで~~♪
えみか
了解!画像の大きさは??
えみくま
記事に反映される時は今表示されてる大きさにリサイズされるで~!
えみか
そっか!わかった~!

おわりに

えみくま
よっしゃ!これで吹き出し完成やで!
えみか
やったぁ~~!私でもできた!!結構簡単やったな♪
えみくま
そうやろ~!これで記事内でいろんな吹き出し使って表現できるな~~!
えみか
えみくま今日はありがと~~!
えみくま
報酬のいちごな。忘れたらあかんで。ほんまに。
えみか
はいはい。笑 

 

 

 


The following two tabs change content below.
えみか
プレイジョブのえみかです! 世の中の女性に希望を与えれる人になるため、日々積極的に挑戦して顔晴っています!^^

カレンダー

2017年5月
« 9月    
1234567
891011121314
15161718192021
22232425262728
293031  
ページ上部へ戻る