affinger-speech-balloon-20200315_ec

WordPress

AFFINGER5で「会話吹き出し」を使おう。会話アイコンの登録と、記事へ入れる手順【WordPressブログ】



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

会話吹き出し

の使い方をご紹介していきたいと思います

まず「WING(AFFINGER5)」における会話吹き出しとは、例えば…

affinger-speech-balloon-20200315_2-05

↑ こんなのです

この「会話吹き出し」を入れることで、記事の雰囲気に「柔らかさ」や「独自性」を出すことができます

前後のテキストを区切る役割にもなって、視覚的にも読みやすくなるよ!

そして使い方は超簡単です

それではさっそく見ていきましょー🐥

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

AFFINGER5における「会話吹き出し」の使い方【アイコン登録&挿入手順】

「会話吹き出し」のアイコン登録

pc-work-202001_01

まずは、会話吹き出しと一緒に表示される「アイコン」を登録していきましょう

affinger-speech-balloon-20200315_1-01

↑ WordPress管理画面 > AFFINGER5 管理 をクリックします

affinger-speech-balloon-20200315_1-02

↑「AFFINGER5 管理」の画面が開いたら、左側のメニュー一覧から「会話・ファビコン等」タブをクリックします

affinger-speech-balloon-20200315_1-03

↑ この「会話風アイコン」という場所で、アイコンの登録ができます

登録枠として、【アイコン画像1】~【アイコン画像8】まで「計8個」が用意されてます

1~8まで、どれでも好きな枠を使おう!

今回は、【アイコン画像1】の枠を使ってアイコンを登録してみますね

affinger-speech-balloon-20200315_1-04

↑「アップロード」をクリックします

affinger-speech-balloon-20200315_1-05

↑ アイコンに使いたい画像を、自身のPC内からアップロードする場合は、「ファイルを選択」をクリックしましょう

もしくは、すでにWordPressへ「アップロード」したことのある画像を使う場合は…

affinger-speech-balloon-20200315_1-06

↑ 画面上部の、「メディアライブラリ」タブをクリックすると…

affinger-speech-balloon-20200315_1-07

↑ 以前にアップロードした画像の一覧が表示されるので、使いたい画像をクリックしましょう

アップロードは、「PC」内のファイルを「ネット」上に読みこむこと!(その反対はダウンロード!)

画像を選べたら、右側の…

affinger-speech-balloon-20200315_1-08

↑「代替テキスト」という欄に、この画像のことを端的に表すワードを入力しましょう

この代替テキストは、画像が万が一「読み込みエラー」で表示されない場合のための設定です

画像の代わりに、ここで設定した「代替テキスト」が表示されるよ!

つづいて、画面右下の…

affinger-speech-balloon-20200315_1-10

↑「サイズ」という欄をクリックして…

affinger-speech-balloon-20200315_1-11

↑ 画像の表示サイズを選択しましょう

通常は、「会話風アイコン - 100 × 100」を選んでおけばまずOKです

affinger-speech-balloon-20200315_1-12

↑ その後、1番下の「投稿に挿入」をクリックします

すると、「AFFINGER5 管理」の画面に戻るので…

affinger-speech-balloon-20200315_1-13

↑ 画面下側の「保存」をクリックして、この設定を保存しましょう

ちなみに、「保存」ボタンのすぐ上にある…

  • 会話風アイコンを少し動かす
  • 会話風アイコンを少し大きく

という2項目で、表示パターンの指定もできます

この2つは、ブログでは使ってないよ

「保存」ボタンをクリックすると…

affinger-speech-balloon-20200315_1-14

↑ このように、登録したアイコンが表示されます

あと、アイコンの下に名前を表示したい場合は、ここの「アイコン名」という欄に入力すればOKです

これで、アイコンの登録はOK🐥

今度は、記事のなかでこの「会話吹き出し」を実際に入れていきましょう

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

「会話吹き出し」の挿入

pc-work-202001_02

まずは投稿編集の画面を開いて、会話吹き出しのセリフ(テキスト)を…

affinger-speech-balloon-20200315_2-01

↑ 普通に入力しましょう

入力は「ビジュアルエディタ」のままでOK!

「ビジュアルエディタってなに?」という方は、↓ をどうぞ♪

wp-editor-visual-and-text-20200308_ec
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

ということで、会話吹き出しのセリフを入力したら、そのテキストを…

affinger-speech-balloon-20200315_2-02

↑ 丸ごと選択します

その状態で、画面上部の…

affinger-speech-balloon-20200315_2-03

↑ タグ > 会話ふきだし > 会話1 をクリックしましょう

ちなみに、今回の例では【アイコン画像1】の枠に登録していたので 会話1 を選択してます

つまり…

  • 【アイコン画像2】の枠に登録した場合 → 会話2
  • 【アイコン画像3】の枠に登録した場合 → 会話3

を選べばOKです

選択すると…

affinger-speech-balloon-20200315_2-04

↑ テキストの前後に、ショートコードが自動挿入されます

編集画面では実感が湧かないですが、これでもう「会話吹き出し」はできてます

プレビューで見てみると…

affinger-speech-balloon-20200315_2-05

↑「会話吹き出し」に無事変わりました🐥

最後に、覚えておきたいポイントとして…

  • 吹き出しの「網掛け」の色
  • アイコンを囲ってる「丸い枠」の色
  • 同じく「丸い枠」の、表示そのもののオンオフ

といった表示デザインについては、自由に変更することもできます

カスタマイズの手順は ↓ をどうぞ♪

今回の「会話吹き出しの使い方」については、これで以上となります

大変お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.