超初心者だから伝えられる!WordPressで吹き出しの出し方を画像付きで解説!

初心者向けブログノウハウ

 

駆け出しブロガーのナカモリサトル(@SatoruNakamori)です。

 

WordPressで自分のブログを立ち上げたならば、

やっぱり使ってみたいのは「吹き出し」ですよね!

 

ナカモリサトル
そうそう!吹き出し、使ってみたい!
フリー素材にゃんこ
吹き出しのあるブログって、なんかカッコいいニャ〜。

 

でも!

 

ブログ初心者、さらにはワードプレス初心者にとって吹き出し効果は

そんなにカンタンではないというのも正直なところ。

 

他のサイトで吹き出しを出す方法を調べてみたけど、

やっぱりよく分からなかった・・!

 

というそこのあなた!

 

私も理解できるまで苦労しました・・・!

 

そこで、つまづいた私が画像解説付きで、ワードプレス上で

吹き出し表現ができる方法について、ご紹介いたします!!

 

スポンサーリンク

超初心者だから伝えられる!WordPressで吹き出しの出し方

まずは事前準備!

まずは吹き出しを出したいキャラのアイコンをWordPress(以下WP)に

アップロードします。

今回は私のアバターと、

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

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

WPに使用する画像は全て「メディア」→「新規追加」よりアップロード

していかなくてはなりません。

 

「新規追加」をクリックすると、以下の画面となります。

こちらの画面から、アイコン用の画像をアップロードしていきます。

 

 

アップロードが完了すると、下記の画像のように、メディアライブラリに

画像がUPされているのが確認できました。

 

これで、事前準備は完了です!

 

吹き出しを出すためにはショートコードが必要

吹き出しを出すためにはそれぞれWPテーマに対応した

ショートコードが必要です。

ショートコードとは?
超カンタンにいうならば特別な知識がなくてもブログに色々な表現をつけ加えられる言語です。

HTMLの仲間みたいなものだと思えば良いでしょう。

 

WPテーマはいろいろありますが、

私はブログも初心者でプログラム経験もゼロだったので、

上手にフリーテーマをカスタマイズしていく

自信はありませんでした。そこで、有料テーマの

WordPressテーマ「スワロー」を使っています。


 

スポンサーリンク

吹き出し効果のショートコードは?


スワローストークの吹き出し効果のショートコードはこちらです。

 

[voice icon="①アイコンのアドレス" name="②アイコンの名前" type="l"]③吹き出し内のテキスト[/voice]

太字で強調した①アイコンのアドレス、②アイコンの名前、③吹き出し内のテキスト

それぞれ適切なものに変更していかなくてはなりません。

②アイコンの名前と③吹き出し内のテキストはそのまま直接入力すればOKです。

 

冒頭の私の吹き出しのセリフ

 

ナカモリサトル
そうそう!吹き出し、使ってみたい!

 

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

 

アイコンのアドレスはどこにある?

アイコンのアドレスは事前準備でアップロードしたメディアライブラリで確認できます。

アイコンにする画像をまずはクリックします。

 

すると、添付ファイルの詳細情報が表示されます。

右側に「URL」とあります。これが①アイコンのアドレスURLとなります!

このURLをコピーしてショートコード内に貼り付けましょう!

 

 

以上の手順で吹き出しのショートコードを書き加えれば吹き出しの完成です!

 

初心者ならではの注意点

デフォルトに設定されているツールバーは使ったらすぐに効果が反映されますが、

ショートコードは効果が反映されません。(作成中に吹き出しは表れない)

イメージどおりかどうかはプレビューで確認しましょう。

 

 

ショートコード内の「type=””」でカスタマイズも可能

ショートコード内の「type=””」で「”」と「”」の間を変更する事で

様々なとカスタマイズができます。

  • アイコンを左 … l
  • アイコンを右 … r
  • アイコンを大きく … big
  • Facebook風… fb
  • LINE風… line
ナカモリサトル
アイコンを右に寄せたり
ナカモリサトル
フェイスブック風にすることもできます。
これでみんなも吹き出しが使えるようになるニャ!

 

ショートコードは吹き出しだけでなく、様々な表現方法を

ブログに加えることができますので使いこなすことで

より伝わる、わかりやすいブログにすることができますので

ぜひ、一つ一つ覚えていきましょう

 

WPのショートコードは、

OPENCAGE(オープンケージ)

のウェブサイトにも多数記述されていますので、

こちらもご覧になってみて下さい!!



スポンサーリンク