ブログ

【AFFINGER5】ブログ吹き出し+カスタマイズ方法を徹底解説

悩んでいる人
AFFINGER5のブログテーマを使用中です。ブログ記事で吹き出しを使いたいのですが、どうすれば使えますか?カスタマイズ方法も詳しく知りたいです!

 

こういったお悩みにお答えします。

 

本記事の内容

  • AFFINGER5で吹き出しを表示させる手順を解説
  • 吹き出しに関するよくある質問【カスタマイズ方法について】

 

本記事を書いている筆者について

KikuchiBlogの筆者プロフィール画像

Kikuchi Blog(@KikuchiBlog

この記事を書いているKikuchiは、令和元年10月に通っていた岩手大学理工学部を入学から1年半で中退し、放送大学へ編入しました。現在は、生活と福祉コースに所属し学士修得を目指して勉強しながら、ブログを書いています。

 

今回は、ブログテーマAFFINGER5で吹き出しを表示させる手順とよくあるカスタマイズ方法などについての質問を答えていきます。

 

本記事を読むと、実際に今ここで使っているような吹き出しを表示させたりすることが出来ます。
キクチ

 

あわせて、あなたのブログサイトに合ったカスタマイズ方法を知ることができるのでぜひ参考にしてみて下さい。

 

それでは早速、解説していきます。

 

AFFINGER5でブログに吹き出しを表示させる手順


大きく分けて手順は、以下3つの通り。

 

AFFINGER5で吹き出しを表示させる手順

  • ①:AFFINGER5の管理設定
  • ②:アイコン・ファビコンの設定
  • ③:ブログ記事に表示

 

1つずつ詳しく解説していきます。

 

①:AFFINGER5の管理設定

 

まず、WordPressのダッシュボード(管理画面)から「AFFINGER5管理」を選択します。

 

wordpressの管理画面

AFFINGER5管理をクリック

 

左側のメニューから下にある「会話・ファビコン等」をクリックします。

 

affinger5の会話・ファビコン設定

会話・ファビコン等をクリック

 

これでひとまず下準備はOK。次は、吹き出しを表示させるための設定を行います。

 

②:アイコン・ファビコンの設定

 

アイコン・ファビコン設定から会話風アイコンのところまで行きます。

 

AFFINGER5会話風アイコン

すでにKikuchi Blogでは設定済み

 

吹き出しは最大で8つまでしか設定できませんが、有料プラグインを導入することで好きな数だけ増やすことも可能です。
キクチ

 

ここでは例として【アイコン画像5】で設定していきます。まずは、吹き出しのアイコン画像下に表示されるアイコン名を入力しましょう。

 

AFFINGER5アイコン設定

例として「疑問に思っている人」と入力

 

最後に画像のURLを入力するか、「アップロード」をクリックしてアイコン画像を選択します。

 

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

アップロードの方が簡単なのでオススメ

 

画像を選択したら、添付ファイルの表示設定からアイコンサイズを「会話風アイコン100×100」に選択してください。

 

affinger5アイコンサイズの変更

サイズを会話風アイコン100×100に変更

 

投稿に挿入をクリックし、アイコン・ファビコン設定に戻ったら下の「保存」ボタンをクリック。

 

AFFINGERアイコン設定保存

これで設定は完了

 

では最後にブログ記事で表示されるか確認してみましょう。
キクチ

 

③:ブログ記事に表示

 

記事に表示するにはまず、投稿画面の「タグ」ボタンをクリックします。

 

wordpressの投稿画面
クラシックモードの場合


タグから「会話ふきだし」を選択し、設定した会話ふきだしの番号をクリックします。

 

wordpressの投稿画面
設定したのは「会話5」


画像のようなタグが表示されると思うので、タグの中に文字を入力してみましょう。

 

wordpressの投稿画面
タグの真ん中に文字を入力


悩んでいる人
おはようございます!

 

プレビューをクリックして以上のように表示されたら設定は成功です。

 

吹き出しに関するよくある質問【カスタマイズ方法について】

 

カスタマイズ方法などについて、よくある以下3つの質問をまとめてみました。

 

吹き出しに関するよくある3つの質問

  • ①:吹き出しを反対にしたい
  • ②:吹き出しの色を変えたい
  • ③:使用するアイコン画像について

 

①:吹き出しを反対にしたい

AFFINGER5吹き出し表示


吹き出しを逆向き(右側表示)にする方法は、以下のように「r」を先頭タグの中に入れるだけ。

 

AFFINGER5吹き出し表示
半角文字で「r」を入力


注意ポイント

rを入れるのは先頭タグだけで、数字のあとに半角スペースを空けて入れましょう。⇒[st-kaiwa〇 r][/st-kaiwa〇]

 

悩んでいる人
ブログの作り方が分かりません。助けて下さい…

 

分かりました。解説しながら一緒に作りましょう!
悩んでいる人

 

使いこなすと上のような感じでLINEのような会話メッセージを表現することもできますよ。

 

②:吹き出しの色を変えたい

 

吹き出しの色を変えるには、まずWordPressダッシュボード(管理画面)から「外観⇒カスタマイズ」を選択します。

 

wordpressダッシュボード画面
外観⇒カスタマイズをクリック


カスタマイズのメニューバーから「オプションカラー⇒会話風ふきだし」を選択。

 

WordPressカスタマイズ設定
オプションカラー⇒会話風ふき出し


会話ごとに吹き出しの色を変更することが可能です。

 

wordpress吹きだしカラー設定


③:使用するアイコン画像について


個人的にアイコン画像は、以下の方法で準備するのがオススメ。

 

アイコン画像の準備方法

  • ①:自撮り画像を使う⇒顔出しOKならば一番オススメ
  • ②:CHARAT(キャラット)で作る⇒当ブログのアイコン画像に使用
  • ③:ココナラで作成してもらう
    ⇒有料だかオリジナルのアイコンを作ってもらえる

 

無料でアイコン画像を作りたいのならば、CHARATのようなソフトを使って自分で作るのがオススメ。

 

ココナラで作成してもらうとお金はかかりますが、クオリティーの高い世界で一つだけのアイコン画像を作成してくれます。

 

まとめ:ブログでは吹き出しを有効利用するべし


今回は、ブログテーマAFFINGER5で吹き出しを表示させる手順とよくあるカスタマイズ方法などについて解説しました。

 

吹き出しを使うとサイトが見やすくなったり、分かりやすく解説できたりするなどの効果があるので個人的には所々で使用することをオススメします。

 

ぜひ本記事を参考に吹き出しをカスタマイズし活用してみてください。

 

以上、最後までご覧いただきありがとうございました。

-ブログ
-

© 2021 Kikuchi Blog