こんにちは makadamiです。
今日は、wordpressの有料テーマ、「AFFINGER」を使った「会話ふきだし」機能の設定方法を解説していきたいと思います。
まず「会話ふきだし」とは？
「会話ふきだし」とはこの事
向きを変える事だって簡単！
AFFINGERのテーマを使用すれば、「会話ふきだし」機能のアイコン画像や、会話背景色、ボーダーデザイン色など
自分好みにカスタマイズする事ができます。
この記事では、具体的な設定方法と、カスタマイズ方法を解説していく記事となっています。
それでは、本文へどうぞ。
会話ふきだしを設定してみよう！
まず「会話ふきだし」の使い方がわからないと話になりませんよね。
「会話ふきだし」を使用するには、AFFINGER管理画面から設定しなくてはなりません。
それでは、具体的な設定手順をみていきましょう！
会話アイコンのサイズ設定
会話アイコンのサイズは、大きめにつくるといいです。
ポイント
- サイズは縦横どちらも300~400px。(目安)
- 正方形か丸型で作ろう。
※サイズ小さめで作ると荒くなります。
会話アイコンの作成方法
手書きで作成したい場合は、ペイントソフトを使いましょう。
無料で使いたい場合は、ファイアアルパカなどが当てはまります。
僕のアイコンはファイアアルパカで作成しているよ。
こちらも一定期間ではありますが、無料体験版で CLIP STUDIO PAINTが無料で使えます。
使ってみた感じでは、CLIP STUDIO PAINTの方が描きやすいです。
また手書きではなく、アイコン素材を無料でダウンロードするなら、FLAT ICON DESIGNなどを使うといいでしょう。
僕が使用しているアイコンはICOOON MONOから使わせて頂いています。
こちらも無料で使用する事ができます。
アイコンにする画像を用意できたらAFFINGERでの設定手順をみていこう！
【AFFINGER6】会話アイコン設定手順
- WordPress管理画面からAFFINGER管理画面に移動します。
- AFFINGER管理画面から「会話アイコン」をクリックしましょう。
- すると上の画像のような画面が表示されます。
- サイトに表示させたい名前は「アイコン名」に入力します。
- 画像のアップロードは、「アップロード」をクリックしましょう。
- サイトに表示させたい画像を選択します。
- 選択できたら最後に「保存」をクリックして完了です。
画像のURLは入力しなくてOK！アップロードすれば自動的に入力されます
アイコンをこの様に動かしたい場合は、「アイコンを少し動かす」にチェックをいれましょう。
会話ふきだしをカスタマイズする
次に「会話ふきだし」のカスタマイズ方法をみていきましょう。
- wordpress管理画面に移動します。
- 「外観」⇨「カスタマイズ」とすすみましょう。
- 「カスタマイズ」画面で「オプション(その他)」をクリックします。
- 「会話ふきだし」の項目があるのでクリックしましょう。
この様な画面が表示されたら大丈夫です！
ここで背景色や、ボーダーデザイン色などの変更ができます。
変更したい項目を変更したら最後に「公開」を押して無事完了です。
ふきだしを記事に表示させてみよう
Gutenbergとクラシックエディタの両方の表示方法を解説していくよ。
Gutenbergの表示方法
「ブロックの追加」⇨「STINGER」の項目の中に「STINGER：会話吹き出し」という項目があるのでクリックします。
クリックするとエディタに反映されるよ！
反映された会話吹き出しを「ワンクリック」した後、右側の「ブロック」で向きやアイコンを変える事ができます。
クラシックエディタの表示方法
ビジュアルエディタの「タグ」⇨「会話ふきだし」で設定することができます。
吹き出し会話は、記事を見やすくしたりなどのメリットがあります。
AFFINGERのテーマを使えば、吹き出し設定は簡単にできます。是非使ってみてはどうでしょうか。
こちらの記事もおすすめです
AFFINGER6の購入や詳細はこちらから
