プログラミング

【WordPress AFFINGER5の使い方】記事で吹き出しを使う方法とカスタマイズ|初心者向け

こんにちは、イケゾーです。

今回は、ブログでよく見かける「吹き出し」の使い方を解説していきます。

イケゾー
そうそうこれが吹き出しだよ
会話系の記事でよく使われるよね
イケジョ

会話形式で書かれる記事もあるくらい、吹き出しって読みやすいんですよね。漫画のようにスラスラ読めることがポイントです。ワードプレスでは簡単に吹き出しを作成できて、記事内に表示ができます。複数の画像を登録すれば、吹き出しに使用する画像を簡単に変更することができます。

吹き出しを使ってみよう

イケゾー
ちょっと怒ってみたり

ちょっと笑ってみたり
イケゾー

イケゾー
ちょっと困ってみたり

こんな感じですね。この使い方を解説していきます。

この記事を読むと

記事の中で、アイコン画像を表示して、吹き出しが使えるようになります。

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

【WordPress AFFINGER5の使い方】記事で吹き出しを使う方法とカスタマイズ

アイコン画像の設定をする

早速、やっていきましょう。

 

アイコン画像を用意する

まずは、吹き出しの横に表示する画像(アイコン)を用意します。

これはなんでも良いのですが、無料で使用できるいらすとやがおすすめです。
老若男女のアイコンはもちろん、スーツを着たアイコンもあるので、非常に使い勝手が良いです。無料とは信じられないですね。

いらすとやのHPより

 

アイコン画像をAFFINGERに登録する

次に、アイコン画像を吹き出しで使用できるように設定します。

ワードプレスのAFFINGER管理から、「会話・ファビコン等」をクリック

 

アイコン画像をアップロード

画像は複数登録しておくことができ、管理するための番号がつけられます。この番号を、記事の作成画面に入力することで吹き出しを作成することができます。

【アイコン画像1】のアップロードをクリックし、画像を選択し保存をします。画像下の入力欄には、アイコン画像の下に表示される「名前」を入力します。下の画像のように、表示がされれば、OKです。

この設定ができれば、こんな吹き出しが表示できるようになります。

イケゾー
アイコン画像1に登録された吹き出しだよ

 

アイコン画像をアップロード(2つめ以降)

同じように、【アイコン画像2】以降も登録しておきましょう。
よく使う画像から順に登録しておくと覚えやすいですね。

後から変更もできますので、2-3個登録したら、次へ進みましょう。

 

実際に吹き出しを使う方法

実際に記事の作成画面で、吹き出しを使っていきます。

 

タグ▶︎会話ふきだし▶︎会話1(アイコン画像1を使う場合)

会話1や会話2の数字は、先ほど登録した「アイコン画像」の数字と同じ番号を選びます。

 

吹き出しの内容を入力する

「会話1」をクリックすると、記事内に[st-kaiwa]というタグが挿入されます。このタグの間に入力した内容が、吹き出しの会話として表示されます。

イケゾー
ここに吹き出しの内容を入力するよ

 

反対向きの、吹き出しを作成する

会話のやりとりが分かりやすいように、反対向きの吹き出しを作ります。
方法は簡単で、[st-kaiwa]のタグに、[ r](半角スペースとr)を付け加えます。

イケゾー
ここに吹き出しの内容を入力するよ
反対向きの吹き出しだよ
イケゾー

 

これで、登録したアイコン画像の表示と、反対向きの吹き出しを使えるようになりました。

 

【参考】オリジナルアイコンの作成

吹き出しに使用するアイコン画像について、無料で使える「いらすとや」を紹介しましたが、多くの記事ではオリジナルのものが使われています。

僕が使用している画像は、実物イケゾーに似せて、マコさん(ブログはこちら)に作っていただきました。かわいく書いて頂きありがとうございました。無料配布されている画像も良いですが、オリジナルのアイコンだと、ブログの色が出るので非常に良いですね。

イケゾー
ノーマルの顔だよ
焦ったときの顔だよ
イケゾー
イケゾー
笑った顔だよ
困ったときの表情だよ
イケゾー

 

まとめ

以上で、AFFINGERで記事で吹き出しを使う方法を解説してきました。

記事で吹き出しを使用するメリットは多いので、カスタムして使いやすいように設定しておくと便利ですね。

 

当ブログでは、仕事や副業さらには生活で使える「効率」を発信しています。

ぜひ、他の記事もご覧ください。

 

ではでは。

 

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング
-, ,