AFFINGER(アフィンガー)

AFFINGER5で吹き出しを設置するやり方とカスタマイズ方法

2021年3月22日

 

悩む人
AFFINGER5(アフィンガー5)でどうやったら吹き出しを設置することができるのか知りたいな...

 

こんな悩みに答えます。

 

AFFINGER5(アフィンガー5)では、記事内に吹き出しを入れることができる機能が搭載されています。

 

 

KEI
ダミーテキストダミーテキストダミーテキストダミーテキスト

 

本記事では、記事前半にアフィンガー5で吹き出しを入れるやり方からカスタマイズ方法、記事後半では、吹き出し用のアイコンを作成する方法までを紹介しています。

 

とても簡単に設置することができますので、ぜひ参考にしてみてください!

 

 

AFFINGER5で吹き出しを入れるやり方

 

それでは、AFFINGER5で吹き出しを設置するやり方を紹介します。

 

図解を使って順番に解説しますね!
KEI

 

step
1
アイコンの設定

 

まずは、「①AFFINGER5 → ②会話・ファビコン」をクリックして、会話風アイコンの設定をします。

 

すると、以下の画面になるので、項目を入力していきます。

 

  • アイコン名:アイコンの下に表示されるテキストを入力
  • 画像のURL:アイコン用の画像URLを入力

 

キャプチャでお見せすると、以下の箇所に入力した内容が反映される感じです。

 

 

画像のURLは、「アップロード」のボタンをクリックすることで、アイコンをアップロードできます。

 

設置ができましたら、ページ下の「保存」ボタンをクリックして完了です。

 

step
2
会話アイコン用のショートコードを入れる

 

続いて、記事の投稿画面を開き、エディタの「①タグ → ②会話吹き出し → ③会話(1~8)」をクリックします。

 

 

会話用の数字が「1~8」まであるので、設置したい吹き出しの番号をクリックします。

 

今回は、試しに「会話1」を選択してみます。選択すると、以下のようにショートコードが表示されます。

 

 

ショートコードが追加されましたら、以下のように、ショートコード内に入れたいテキストを入力します。

 

 

これで吹き出しの完成です!

 

後は、プレビュー画面で以下のように、吹き出しが表示されていればOKです!

 

悩む人
ダミーテキストダミーテキスト

 

ちなみに、アイコンを右側に配置したい場合には、半角スペースで小文字の「r」を入れます。

 

 

これで、吹き出しが反対側になります!

 

ダミーテキストダミーテキスト
悩む人

 

続いて、吹き出しのカスタマイズ方法について紹介していきます!

 

AFFINGER5の吹き出しをカスタマイズするやり方

 

会話吹き出しの色や、アニメーションを付けるやり方について、紹介します。

 

吹き出しの色

 

吹き出しの色は、「外観 → カスタマイズ → オプションカラー」から設定できます。

 

 

 

 

オプションカラーの画面になりましたら、「会話風ふきだし」の項目があるので、「会話1〜8」までの色変更ができます。

 

 

その他にも、アイコンの罫線を消したり、ボーダーの太さの調整もできるので、お好みで吹き出しのカスタマイズをしてみてください!

 

カスタマイズができましたら、「公開」をクリックして完了です!

 

アニメーションの付け方

 

吹き出しにアニメーションを付けるには、「①AFFINGER5管理 → ②会話・ファビコン等」で設定します。

 

 

するとページ下に「会話風アイコンを少し動かす」という項目があるので、チェックを付けます。

 

 

チェックができましたら、「保存」ボタンをクリックします。

 

KEI
こんな感じで、時間差でアイコンがバウンドします!

 

また、その下にある「会話風アイコンを少し大きく」にチェックすると、アイコンが少し大きくなりますので、お好みで調整してみてください!

 

AFFINGER5の吹き出し以外で作成する方法

 

AFFINGER5以外の吹き出しを使用したいと思う方は、サルワカさんが無料で提供している吹き出し用のCSSを使用してみるのがオススメです!

 

>> CSSで作る!吹き出しデザインのサンプル19選

※クリック後、外部リンクに飛びます

 

ちなみに、AFFINGER5では、以下のように作ることができます。

 

 

作成方法を解説していきます!

 

step
1
CSSをコピー&ペースト

 

まずは、サルワカさんのサイトから、設置したい吹き出し用のCSSをコピーします。

 

吹き出しは、上下ではなく左右のデザインを選んでください!
KEI

 

今回は、以下のCSSを使います。

 

 CSS
.balloon4 { position: relative; margin: 2em 0 2em 40px; padding: 15px; background: #fff0c6; border-radius: 30px; } .balloon4:before { content: ""; position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #fff0c6; border-radius: 50%; } .balloon4:after { content: ""; position: absolute; left: -24px; width: 20px; height: 18px; bottom: 3px; background: #fff0c6; border-radius: 50%; } .balloon4 p { margin: 0; padding: 0; }

 

CSSのコピーできましたら、「外観 → カスタマイズ → 追加CSS」に貼ります。

 

 

貼り付けが完了しましたら、「公開」をクリックします。

 

step
2
投稿画面で編集

 

続いて、投稿画面を開き、吹き出し用のHTMLを設置していきます。

 

まずは、エディタ画面の「タグ → レイアウト → 全サイズ → 左右50%」をクリックします。

 

 

すると、以下の画面が表示されますので、「左:画像」「右:吹き出し用のHTMLコード(テキスト)」をそれぞれ設置していきます。

 

 

画像の設置方法は、左側をクリックして、「メディアを追加」で画像を追加できます。

 

右側は、以下、吹き出し用のHTMLコードをコピー&ペーストします。

※HTMLコードを貼る際には、「ビジュアル」から「テキスト」に切り替えて貼ります。

 

 HTML
<div class="balloon4"> <p>ここに文章</p> </div>

 

以下のように、テキストモードで<div class="rbox"></div>内に貼り付ければOKです。

 

「テキスト」画面

 

最後に、「ビジュアル」に切り替えて、「このテキストは最後に消して下さい(50%)」の文言を削除したら完成です!

 

 

念のため、PC,スマホで問題なく表示されているか確認してみてください!

 

吹き出し用のアイコンを作成する方法

 

最後に、吹き出し用のアイコンを作成する方法を紹介します。

 

吹き出し用のアイコンを使用するには、著作権の侵害にならないフリー画像を使用しましょう。

 

以下のサイトでは、アイコンを作成することができますので、参考にしてみてください!

 

>> 無料アイコンメーカー・似顔絵アプリ・アバター作成サイト58選

※クリック後、外部リンクに飛びます

 

ココナラで依頼するのはおすすめ!

 

また、アイコンを自分で作成するのはメンドウと思う方は、ココナラでイラストレーターさんに作成を依頼するのがおすすめです!

 

要望に合わせたアイコンを作成してくれ、何より自分で作成するより高品質のアイコンを格安で作成してくれます!

 

また、多種多様な表情のアイコンを作成してくれるので、ブログで吹き出しを使い分けたいときなんかにも利用ができますよ!

 

 

AFFINGER5で吹き出しを設置する方法とカスタマイズ:まとめ

 

いかがでしたか?

 

今回は、AFFINGER5の吹き出しを設置するやり方からカスタマイズする方法について、紹介しました。

 

今回紹介したやり方で、アフィンガー5での吹き出しの設置やアイコンの作成方法が分かりましたら幸いです。

 

なお、吹き出し以外でAFFINGERでできるカスタマイズについては以下で紹介していますので気になる方は参考にしてみてください!

 

 

ここまで読んでいただきありがとうございました!

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)