ブログ運営

AFFINGER5で会話ふきだしを使用、カスタマイズする方法

2021年4月29日

 

どうも、にわとりちきんです。

 

今回は、WordPressテーマのAFFINGER5(アフィンガー5)で会話ふきだしを使用、カスタマイズする方法を紹介します。

 

会話風アイコンの設定

まずは「会話ふきだし」で使用するアイコンを設定します。

 

step
1
ダッシュボードから「AFFINGER5 管理」→「会話・ファビコン等」をクリックする

 

step
2
会話風アイコンで「アイコン画像」「アイコン名」の表示を設定する

  • アイコン名
    ふきだしのアイコン下に表示される名前を設定します。
    ※未入力でアイコン名を非表示にできます。
  • 画像のURL
    アイコンに使用する画像を設定します。
    下のアップロードボタンから設定できます。

 

step
3
オプションを設定する

  • アイコンを動かしたい場合は「会話風アイコンを少し動かす」にチェックを入れます。
  • アイコンの表示を大きくしたい場合は「会話風アイコンを少し大きく」にチェックを入れます。

 

step
4
「保存」をクリックする

 

これでアイコンの設定は完了です。

 

会話ふきだしのデザインの設定

次に「会話ふきだし」のデザインを設定します。

 

step
1
ダッシュボードから「外観」→「カスタマイズ」をクリックする

 

step
2
「[+]オプションカラー」をクリックする

 

step
3
「会話風ふきだし」をクリックする

 

step
4
会話風ふきだしのデザインを設定する

  • 会話の背景色
    ふきだしの背景色を設定します。
    ※会話1の背景色のみ設定した場合は会話2~8にも同じ色が反映されます。

 

  • アイコンの枠線を消す
    アイコンに枠線をいれるかいれないか設定します。
    チェックを入れると枠線が表示されません。
  • ふきだしを角丸にしない
    ふきだしを角丸にするかどうかを設定します。
    チェックを入れるとふきだしの角が直角になります。

 

  • ボーダーデザインタイプ(枠線のみ)に変更
    ふきだしに枠線を入れるかどうかを設定します。
  • ボーダーデザインタイプの背景色※一括
    ふきだしに枠線を入れた場合の背景色を設定します。
    ※ふきだしに枠線を入れた場合は、この項目で設定した色がふきだしの背景色になり、上段の会話の背景色で設定した色が枠線の色になるので注意が必要です。

 

step
4
上部の「公開」をクリックする

 

以上で会話ふきだしのデザインの設定は完了です。

 

会話ふきだしを記事内で使用する方法

それでは実際に記事に使用してみましょう。

 

step
1
投稿ページに移動して「タグ」→「会話ふきだし」→「会話1( r]で反対向き)」をクリックする

 

step
2
表示されたコードに任意のテキストを入力する

上記の入力だと、

 

(ここにテキストを入力)

 

↑のように表示されます。

 

アイコンの位置の反対側にしたい場合は、

上記のように st-kaiwa1 の後に「半角スペース」と「r」を入力します。すると、

 

(ここにテキストを入力)

 

↑のように表示されます。

 

以上で完了です。

 

まとめ

今回は、WordPressテーマのAFFINGER5(アフィンガー5)で会話ふきだしを使用、カスタマイズする方法を紹介しました。

うまく使えば文字のみの記事よりも、見やすく楽しい雰囲気のブログの作成に役立てることができると思うので是非使ってみてください!

 

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

「にわとりちきんのブログ」ではTwitterで最新記事の投稿、更新などのお知らせをしております。

次回も読んでいただけるという方は、是非Twitterのフォローよろしくお願いいたします!

それでは、また!

 

こちらの記事もおすすめ

 

© 2021 にわとりちきんのブログ Powered by AFFINGER5