AFFINGER5

【マネするだけ!】AFFINGER5(アフィンガー)で会話吹き出しを作る方法

 

AFFINGER5(アフィンガー)を導入したけど、会話吹き出し機能の使い方ってはじめはわかりませんよね。

でも安心してください。

この記事では、そんな方にもわかりやすく、シンプルに解説していきます。

 

こんな疑問に答えます

・会話吹き出しの使い方がわからない

・思うようにカスタマイズできない

・枠線だけの設定をしたい

 

この記事を書いた人

・ブログ歴6か月の大学生ブロガー。初心者ブロガーの役に立つ情報を発信中!

Twitter(@Blog624renoru)はこちら!

 

この記事を読むと、誰でもAFFINGER5(アフィンガー)で会話吹き出しを作る方法がわかります。

身構えないで、1つずつやっていこう!

 

 

会話吹き出しの完成例

こんにちは、れのるです
会話吹き出しのサンプル
会話吹き出しのサンプル
会話吹き出しのサンプル

 

上のような感じで完成です。

 

 

会話吹き出しの作り方

 

吹き出しをカスタマイズ

  1. 背景色の設定
  2. 枠線にする
  3. アイコン画像を取得する方法
  4. 吹き出しのアイコン設定
  5. アイコンを動かす方法

会話吹き出しのカスタマイズ方法のステップは上のようになります。

 

①背景色の設定

 

Wordpresの管理画面の外観 > カスタマイズ > オプションカラー > 会話風ふきだしをクリック。

会話風吹き出しをクリックすると、下の画像の画面に来ます。

 

カラー設定画面

 

ここで、会話吹き出しの背景カラーを設定していきます。

色を選択をクリックして、自分好みのカラーに設定しましょう!

>>HTMLカラーコード:Web色見本 原色大辞典

カラーで迷ったら、HTMLカラーコードを参考にしてね!

 

➁背景を白、枠線にだけカラーをする方法

①背景色の設定のみを行うと、背景色全体にカラーが付きます。

枠線にだけカラーしたい場合は、以下の方法で行います。

 

枠線だけの設定

 

ボーダーデザインタイプ(2px)に変更にチェックし、ボーダーデザインタイプ(2px)時の背景色「色を選択」白色に設定します。

上の設定をするだけで、枠線のみの吹き出しを作ることができます。

 

③アイコン画像を取得する方法

画像がそもそもないよ!という方は画像を取得する必要があります。

 

僕がオススメするのは

 

いらすとやは無料で使えるフリー素材サイトです。

シンプルで使いやすいのが特徴!

 

ココナラは自分だけのオリジナルアイコンを作りたい方にオススメです。

 

オリジナルアイコンを作りたい方は、【体験談】ココナラのイラストでブログを差別化!あなただけのブログを作ろう!を見てください

ちなみにこのアイコンはココナラで作りました!

 

 

➃会話吹き出しのアイコン設定

Wordpresの管理画面からAFFINGER5管理 > 会話・ファビコン等クリックします。

 

アイコンを設定

 

画像を設定する方法は2つ!

①アップロードからアイコンを設定

②画像のURLを直接アイコンを設定

 

①の場合はクリックして好きな画像を選ぶだけでOKです

②なら画像のURLを取得しましょう。

 

画像のURLの取得方法

メディアの追加 > 好きな画像をクリック > リンクをコピーから画像URLを取得して完了です。

 

画像のURLを取得

 

➄アイコンを動かす方法

会話・ファビコン等をクリックしたら、会話風アイコンを少し動かすにチェックするだけ!

 

アイコンを少し動かす方法

 

こんな感じで動くよ!

 

 

会話吹き出しを使ってみよう

タグ > 会話吹き出し 会話1~8(設定したもの)をクリック。

 

会話吹き出しを使う

 

設定した吹き出しなら、こんな感じで使用できますよ!

 

 

会話吹き出しの向きを変える方法

 

会話1~8を押すと下の画像のようになります。

デフォルトの向きなら、何もしなくてOKです

 

この向きを変えるには・・・

 

会話吹き出しを逆向きにする

 

半角スペース&rを画像の通りに追加記入だけ!

向きを変えたよ!

 

 

反映されないときの対処法

これまで設定してきたけど、反映されていなかった。

こういう人もいるのではないのでしょうか?

その場合は外観 > カスタマイズ > 全体カラーをクリックします。

 

反映されないときの対処法

 

反映されない場合は、⑴全体的に反映に設定されていると思うので、画像のように⑵「デフォルト表示の一部メニューに設定を変えてみてください。

設定が上手く反映されるはずですよ!

 

変更時には、全体的なデザインが崩れる可能性があるので注意してください!

 

 

まとめ:AFFINGER5(アフィンガー)で会話吹き出しを作る方法

 

今回は、AFFINGER5(アフィンガー)で会話吹き出しを作る方法を解説しました。

会話吹き出しに関する情報を詰め込んだので、これで網羅しちゃってください!

 

この記事があなたの役に立てたらうれしいです。

 

今回はここまで。

  • この記事を書いた人
  • 最新記事

れのる

初めまして。まったり系ブロガーれのるです このサイトでは ブログ&書籍レビューをメインで配信してます。 たまに人間味あふれる記事も書いてみたり! まあ僕のブログなんで好きなようにやってます(笑) 興味があれば覗いていってね!

-AFFINGER5

© 2021 renolog Powered by AFFINGER5