※内容に広告・プロモーションを含みます。

Webスキルアップ

【超カンタン!】AFFINGER6で行う会話吹き出し設定を画像で解説【プラグイン不要】

こんな人におすすめの記事です

  • AFFINGER6の会話吹き出し設定方法を知りたい人
  • プラグインなしで会話吹き出し設定をしたい人

 

Webサイトの記事では会話吹き出しを使うことが良くありますが、会話吹き出しを使うためにはWord Balloonなどのプラグインに頼るのが通常でした。

しかしWordPressテーマのAFFINGER6であれば、プラグインを使うことなく簡単に会話吹き出しの設定ができます。

 

ヒロ
会話吹き出しはこんなのです

 

本記事ではAFFINGER6の会話吹き出し設定方法について解説するだけではなく、カスタマイズ方法や使用方法なども合わせて解説します。

この記事を読み終わればAFFINGER6の会話吹き出しについて困ることはなくなるので、実際に使いながら手順書としてお使いください。

 

\\AFFINGER6の公式サイトはココ↓↓から//

AFFINGER公式サイト

 

まだAFFINGER6を購入していない場合は、購入からインストールまではこちらの記事で解説していますので参考にお使いください。

 

 

AFFINGER6の会話吹き出し設定方法

 

ではさっそくAFFINGER6での会話吹き出し設定方法を解説します。

 

ダッシュボード画面で【AFFINGER管理】をクリックします。

 

AFFINGER管理画面を開いたら【会話アイコン】をクリックします。

 

こちらは僕の【会話アイコン設定】の画面です。デフォルトでは画像部分や【アイコン名】【画像のURL】部分は空欄になっています。

ヒロ
会話アイコンは8種類設定できますが、正直実際に使うのは3つくらいにおさまります。

 

こちら実際の会話アイコン設定の拡大です。【アイコン名】が必要な場合は入力してください。必要ない場合は入力しなくてもOKです。

画像は【アップロード】をクリックするとメディア画面に移りますので、使用する画像を選択します。

 

ヒロ
画像サイズは100px以上で、なるべく正方形のものを使いましょう

 

アップロードまで済ませたら、会話アイコン設定画面の下にスクロールして【Save】をクリックすると設定完了です。

 

それでは設定した会話アイコンのカスタマイズ方法に移ります。

 

AFFINGER6の会話吹き出しカスタマイズ方法

 

ではAFFINGER6の会話吹き出しカスタマイズ方法を解説します。

 

ダッシュボードの【外観】から【カスタマイズ】をクリックします。

 

カスタマイズ画面で【オプション(その他)】をクリックします。

 

【会話ふきだし】をクリックします。

 

設定した会話1~会話8までの色設定が表示されますので、色を変える場合は【Select Color】をクリックします。

 

【Select Color】をクリックすると色の選択画面が表示されるので、希望の色を選びます。

 

会話吹き出し画面の下側に【アイコンに枠線をつける】【ふきだしを角丸にしない】【ボーダーデザインタイプ:普通・太め・なし】【ボーダーデザインタイプの背景色】を好みで選択します。

 

設定が済んだら【公開】をクリックしてカスタマイズ完了です。

 

ヒロ
僕はブログの雰囲気に合わせてデフォルト設定のまま使ってますが、吹き出しに枠を付けたりするのも良さそうです

 

では続いて記事作成画面での会話吹き出し使用方法に移ります。

 

AFFINGER6の会話吹き出しの使用方法

 

ここからはAFFINGER6の会話吹き出しの使用方法を解説します。

 

ブロックエディターの全体のシェア率がまだ2割程度でまだ主流はクラシックエディターですので、今回はクラシックエディターでご案内しています。

 

記事の編集画面で【タグ】【会話吹き出し】を選択し、設定した会話の番号を選択します。この場合は【会話1】を選択しています。

 

すると画像のようにショートコードが貼り付けられます。

 

会話吹き出しの文字はショートコードの間に入力します。

 

プレビューで見てみるとこのように会話吹き出しが表示されます。

 

ヒロ
ここに文字を入力します

 

ちなみにショートコードの前半の【st-kaiwa1】の後に【st-kaiwa1 r】のように【半角スペース + r】を入力すると、会話アイコンが右側に配置されます。

 

このように、半角スペース + r で右側に配置されます
ヒロ

 

これでAFFINGER6で会話吹き出しアイコンの設定から使用方法までの解説は終了です。

 

AFFINGER6以外で会話吹き出しを設定したい場合

 

ここまでAFFINGER6での会話吹き出しについて解説しましたが、プラグインのWord Balloonも人気です。

AFFINGER6にないデザインの会話吹き出しを使用したい場合は使ってみるのもおすすめです。

 

 

 

最後に:AFFINGER6の会話吹き出しを使って記事に彩を添えよう

 

いかがでしたか?

今回はAFFINGER6での会話吹き出し設定方法からカスタマイズ方法、記事作成時の使用方法を解説しました。

 

AFFINGER6はプラグイン不要で会話吹き出し設定ができる人気のWordPressテーマです。

プラグインを減らすことでサイト速度も向上するためSEO的にも有利になります。

オシャレでSEOにも強いサイトを作るならAFFINGER6がおすすめです。

\\ここをクリック//

AFFINGER公式サイト

 

AFFINGER6の購入からインストールまではこちらの記事で解説しているので手順書として参考にしてください。

 

ちなみに【ココナラ】で依頼すると会話吹き出しアイコンだけではなく、ブログやSNSなどで使えるアイコンを作ってくれます。

使い方は、まずトップページから【会員登録】を済ませます。

 

会員登録を済ませたら、トップページ下にスクロールし【カテゴリから探す】の【イラスト・漫画】から【アイコン作成】をクリックします。

 

アイコン作成の画面に移ると、イラストレーターを選択できるようになります。イメージに合うイラストレーターを選んで、依頼してみましょう。

アイコン作成の相場は1000円から8000円くらいです。

 

\\公式サイトはここをクリック//

 

 

ヒロ
ちなみにこのアイコンは奥さんにペンタブで書いてもらいました

 

読んでいただいてありがとうございました。

設定方法がわからなくなったらまたこのページに戻ってきて手順に沿って設定してみてくださいね。

これからは会話吹き出しを使って、記事にテンポを付けて読者にとって見やすくなるように心がけましょう。

 

関連記事

  • この記事を書いた人

ヒロ

事業会社でリモートでマーケターやってます。このブログは主に力抜いて思うことを書く場としています。たまにマーケティングのノウハウとか書きます。

おすすめ記事

-Webスキルアップ
-,