affinger-speech-balloon-right-20200316_ec

WordPress

AFFINGER5の「会話吹き出し」を反対向きにする方法。 r] ←これの意味を優しく解説



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

「会話吹き出し」の位置を、
反対向きにする手順

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

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

affinger-speech-balloon-right-20200316_1-02

↑ こんなのですね

普通に使うと、上記のように会話アイコンが「左サイド」にくる仕様になってます

でも、このショートコードにちょっと手を加えるだけで…

affinger-speech-balloon-right-20200316_1-06

↑ 会話アイコンを「右サイド」にもってくることができます

ただ、「会話吹き出し」タグの説明を見ても…

affinger-speech-balloon-right-20200316_top-01

↑ このように r]で反対向き と超ざっくりな解説がありますが、これだけだとちょっと意味不明かもですよね

めっちゃ悩んだ

この「会話吹き出しを反対側にもってくる方法」は、超簡単です

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

ちなみに、会話吹き出しの「使い方」や「アイコン登録」の方法は ↓ をどうぞ♪

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

続きを見る

会話吹き出しの「色・デザイン設定」をカスタマイズする方法は ↓ から♪

affinger-customize-speech-balloon-20200317_ec
AFFINGER5で「会話吹き出し」の色&デザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

当ブログのWordPress環境

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

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

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

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

AFFINGER5における「会話吹き出し」を ”反対向き” にする手順【 r] の意味】

pc-work-202001_01

いきなり結論から言ってしまうと、「前側」のショートコードに…

半角スペース + r

を入れるだけでOK

具体的に見ていくよ!

まずは通常の使い方で、「会話吹き出し」のショートコードを入れましょう

やり方は ↓ から♪

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

続きを見る

これで…

affinger-speech-balloon-right-20200316_1-01

↑ テキストの前後に、「会話吹き出し」のショートコードが挿入されました

でもこれだけだと、まだ…

affinger-speech-balloon-right-20200316_1-02

↑ アイコンは、通常の「左サイド」のままですね

つづいて、前後に挿入された2つのショートコードのうち、「前側」にあたる…

affinger-speech-balloon-right-20200316_1-03

↑ このショートコードのなかを、一部だけ書きかえます

具体的には、元々の…

affinger-speech-balloon-right-20200316_1-04

↑ この形から…

affinger-speech-balloon-right-20200316_1-05

↑ この形に、「手入力」で変えましょう

つまり!

kaiwa1

すぐ右側に…

半角スペース + r

を追加してあげればOKです

大事な注意点として、半角スペース を入れずに r だけを入れても機能しません

エラーになっちゃう

必ず 半角スペース を r のすぐ左に入れて…

affinger-speech-balloon-right-20200316_1-05

↑ この形にしましょう

プレビューで確認してみると…

affinger-speech-balloon-right-20200316_1-06

↑ 会話アイコンの位置が、無事「右サイド」へと切り替わりました

今回の「会話吹き出しを反対側にする方法」は、これで以上となります

お疲れさまでした♪

あずき🐥

会話吹き出しの「色&デザイン設定」をカスタマイズする方法は、↓ をどうぞ♪

affinger-customize-speech-balloon-20200317_ec
AFFINGER5で「会話吹き出し」の色&デザイン設定をカスタマイズする手順【WordPressブログ】

続きを見る

具体的には、次のカスタマイズ内容だよ!
  • 会話吹き出しの「網掛け」の色を変える
  • アイコンの「丸い枠線」を消す
  • アイコンに動きをつける
  • アイコンを大きく表示する

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

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

-WordPress

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