AFFINGER BLOG

AFFINGER5(アフィンガー5)の吹き出しを設定する方法【カラーや枠線の設定】

2020年12月30日

 

アフィンガー5で吹き出しのカスタマイズをしたい。

カラーを変えたりエフェクトを付けたりする方法が知りたい。

 

このような疑問にお答えしていきます。

 

本記事の内容

・吹き出しの設定方法

・カラーや動きを付ける方法

 

本記事の信頼性

この記事を書いている僕はブログ運営3ヶ月目で収益5桁を達成した高校生。

Twitter(hyon1182)でも情報発信を行っています。

 

今回はWordPressテーマ『AFFINGER5』で吹き出しをカスタマイズする方法を解説していきます。

 

アイコンの設定方法や吹き出しの色を変えたりする方法を紹介しているのでぜひ参考にしてみて下さい。

 

本記事を読めば簡単に吹き出しを設定できると思いますよ。

 

AFFINGER5で吹き出しを設定する方法

 

それでは、AFFINGER5でアイコンを設定していきましょう。

 

会話風ふきだしを作るために以下の2つを設定していきます。

 

会話風ふきだしを作るためにすること

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

 

それぞれ見ていきましょう。

 

会話風アイコンの設定

最初に『会話風アイコン』を設定していきます。

 

 

『AFFINGER5管理画面』→『会話・ファビコン等』の順に進みます。

 

上記の画面から自分がアイコンとして使いたい画像をアップロードしておきましょう。

 

まずは会話風アイコンのカスタマイズから説明していきますね。

 

会話風アイコンのカスタマイズ

  1. 枠線を消す
  2. 少し動かす
  3. 大きくする

 

アイコンについてカスタマイズできることは上記の3つです。

 

会話風アイコンの枠線を消す

 

まずは会話風アイコンの枠線を消すカスタマイズです。

 

『WordPress管理画面』→『外観』→『オプションカラー』→『会話風ふきだし』の順番にクリックします。

 

 

『アイコンの枠線を消す』にチェックを入れることで、アイコンの淵がなくなります。

 

アイコン画像が白色の時は、枠線があった方がきれいに表示されますね。

 

会話風アイコンを少し動かす

 

次は『会話風アイコンを少し動かす』カスタマイズです。

 

『管理画面』→『AFFINGER管理』→『会話・ファビコン等』をクリックしてください。

 

 

上記のような画面が表示されるので『会話風アイコンを少し動かす』にチェックを入れましょう。

 

アイコンにアニメーションが表示されます。

 

 

こんな風にアイコンを揺らすこともできますよ。

 

会話風アイコンを大きくする

 

次に『会話風アイコンを大きくする』カスタマイズです。

 

『管理画面』→『AFFINGER管理』→『会話・ファビコン等』をクリックしてください。

 

 

上記の画面から『会話風アイコンを少し大きく』にチェックを入れます。

 

これでアイコンのサイズが大きく表示されるようになりました。

 

吹き出しの設定

 

ここまで会話風アイコンの設定をお伝えしてきました。

 

ここでは『ふきだし』について設定方法を解説します。

 

ふきだしのカスタマイズ

  1. 角丸にしない
  2. 背景の色を変更

 

以上の2つをカスタマイズすることができます。

 

それぞれ見ていきましょう。

 

吹き出しを角丸にしない

 

まずは『吹き出しを角丸にしない』カスタマイズになります。

 

『WordPress管理画面』→『外観』→『オプションカラー』→『会話風ふきだし』の順番にクリックします。

 

 

 

上記の画像のように『ふきだしを角丸にしない』をクリックすれば完了です。

 

ふきだしがより角ばった形にできますよ。

 

吹き出しの背景色を変える

 

次に吹き出しのカラー設定に移りましょう。

 

まずは『吹き出しの背景色を変える』カスタマイズです。

 

『WordPress管理画面』→『外観』→『オプションカラー』→『会話風ふきだし』の順番に移動してください。

 

 

上記の画像の赤で囲んだ部分から背景色を変えることができます。

 

ポイント

薄い青色などの目立たない色にしておくのがおすすめです。

カラーコード例:#f4fbff

 

自分が気に入った色に設定してみてください。

 

吹き出しの枠線の色を変える

 

最後は『吹き出しの枠線の色を変える』カスタマイズです。

 

『WordPress管理画面』→『外観』→『オプションカラー』→『会話風ふきだし』の順番に移動します。

 

 

会話風ふきだしを『ボーダーデザインタイプ』に変更すると、枠線だけが表示されるようになります。

 

太さをカスタマイズする方法は以下の2つ。

 

  • 普通(2px)
  • 太め(3px)

吹き出しを目立たせたい方は太めを選ぶのがおすすめです。

 

こだわりが無ければ普通の大きさで大丈夫です。

 

まとめ:吹き出しを設定してブログを読みやすくしよう

今回はAFFINGER5で吹き出しをカスタマイズする方法についてお伝えしてきました。

 

ブログは文章が多いため、どうしても単調になってしまいます。

 

画像や会話風のふきだしを入れることで記事に彩りを出していきましょう。

 

今回の内容はここまでとなります。

 

-AFFINGER, BLOG

© 2021 HYON BLOG Powered by AFFINGER5