駆け出しブロガーのナカモリサトル(@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のショートコードは、
のウェブサイトにも多数記述されていますので、
こちらもご覧になってみて下さい！！
