駆け出しブロガーのナカモリサトル(@SatoruNakamori)です。
WordPressで自分のブログを立ち上げたならば、
やっぱり使ってみたいのは「吹き出し」ですよね!


でも!
ブログ初心者、さらにはワードプレス初心者にとって吹き出し効果は
そんなにカンタンではないというのも正直なところ。
他のサイトで吹き出しを出す方法を調べてみたけど、
やっぱりよく分からなかった・・!
というそこのあなた!
私も理解できるまで苦労しました・・・!
そこで、つまづいた私が画像解説付きで、ワードプレス上で
吹き出し表現ができる方法について、ご紹介いたします!!
目次
超初心者だから伝えられる!WordPressで吹き出しの出し方
まずは事前準備!
まずは吹き出しを出したいキャラのアイコンをWordPress(以下WP)に
アップロードします。
今回は私のアバターと、

フリー素材にゃんこをアップしていきます。

WordPressの「メディア」→「新規追加」をクリック

WPに使用する画像は全て「メディア」→「新規追加」よりアップロード
していかなくてはなりません。
「新規追加」をクリックすると、以下の画面となります。

こちらの画面から、アイコン用の画像をアップロードしていきます。
アップロードが完了すると、下記の画像のように、メディアライブラリに
画像がUPされているのが確認できました。

これで、事前準備は完了です!
吹き出しを出すためにはショートコードが必要
吹き出しを出すためにはそれぞれWPテーマに対応した
ショートコードが必要です。
HTMLの仲間みたいなものだと思えば良いでしょう。
WPテーマはいろいろありますが、
私はブログも初心者でプログラム経験もゼロだったので、
上手にフリーテーマをカスタマイズしていく
自信はありませんでした。そこで、有料テーマの
WordPressテーマ「スワロー」を使っています。
吹き出し効果のショートコードは?
スワローやストークの吹き出し効果のショートコードはこちらです。
太字で強調した①アイコンのアドレス、②アイコンの名前、③吹き出し内のテキストは
それぞれ適切なものに変更していかなくてはなりません。
②アイコンの名前と③吹き出し内のテキストはそのまま直接入力すればOKです。
冒頭の私の吹き出しのセリフ

を例にするならば、つまりはこういう事です。

アイコンのアドレスはどこにある?
アイコンのアドレスは事前準備でアップロードしたメディアライブラリで確認できます。
アイコンにする画像をまずはクリックします。

すると、添付ファイルの詳細情報が表示されます。
右側に「URL」とあります。これが①アイコンのアドレスURLとなります!
このURLをコピーしてショートコード内に貼り付けましょう!

以上の手順で吹き出しのショートコードを書き加えれば吹き出しの完成です!
デフォルトに設定されているツールバーは使ったらすぐに効果が反映されますが、
ショートコードは効果が反映されません。(作成中に吹き出しは表れない)
イメージどおりかどうかはプレビューで確認しましょう。
ショートコード内の「type=””」でカスタマイズも可能
ショートコード内の「type=””」で「”」と「”」の間を変更する事で
様々なとカスタマイズができます。
- アイコンを左 … l
- アイコンを右 … r
- アイコンを大きく … big
- Facebook風… fb
- LINE風… line



ショートコードは吹き出しだけでなく、様々な表現方法を
ブログに加えることができますので使いこなすことで
より伝わる、わかりやすいブログにすることができますので
ぜひ、一つ一つ覚えていきましょう
WPのショートコードは、
のウェブサイトにも多数記述されていますので、
こちらもご覧になってみて下さい!!