動画ACにアップロードした動画が公開中です。下のボタンから一覧をご覧いただけますのでどうぞご利用ください。

ユーザ名:ryo88

動画をダウンロードする

主に風景やエフェクト、背景動画をアップしています。

このページには広告が含まれる場合があります。

サイト/ショップ作成のお話

AFFINGERテーマの会話シーンがタイピング風を演出できるように

2024年10月24日

WordPressのテーマ「AFFINGER6」の新しいバージョンで、記事内に設置できるおなじみの会話アイコンに「しゃべる機能」が追加されました。

WordPressテーマの「Affinger6」は以下から購入できます。個人ブランドもコーポレートサイトも多彩なデザインで作成できます。

作るぜい!(^^)!

今すぐ購入する

おしゃべり会話機能だー

今回、「AFFINGER6(20241022)」バージョンで、大きな仕様変更がありました。

それが、会話ふきだしの「しゃべるモード」の追加になるわけですが、実は「ブロックエディタのみで利用できる」という仕様になっています。

「AFFINGER」のテーマを利用すると、無料の「AFFINGERブロック」プラグインをインストールして、ブロックエディタで簡単に「会話ふきだし(おしゃべり)」を追加できます。

では、クラシックエディタを使っている人には利用できない機能なのでしょうか?

執筆モードが「テキストモード」で直接HTMLやCSSを記述できる状態であれば、クラシックエディタを使っていてもおしゃべり機能を実現できます。

この記事では、その方法にも触れながら「会話ふきだし」の「しゃべるモード」について書いていきたいと思います。

「会話ふきだし」とは

サイトの記事内でキャラクターなどがマンガのように吹き出しで会話をしているシーンをよく見かけると思います。

この「会話ふきだし」はプラグインなどでも設定できたのですが、「AFFINGER」は会話用のアイコンを設定するだけで簡単に会話シーンを作成できるようになっています。

ちなみに当サイトでは会話シーンは一切使用していません(笑)

「AFFINGER管理」内の「会話アイコン」で最大8つの話者を設定できます。

これまでは各話者の名前と画像を設定するだけでしたが、これに今回「おしゃべり機能」がついた、というわけです。

会話文がタイピング文字のように一文字ずつ画面に表示されるので、まるでしゃべっているかのように表現できるようになったのです。

実際に設定してみる

YouTubeが全盛になる前の一時期、この会話ふきだしがもの凄くはやっていました。

今でもWebサイトでは結構見る機能なのですが、あまりにも会話が多くて筆者は少し敬遠していたところがありました。

せっかくなので、今回は実際に会話アイコンを設定してこの記事内で会話シーンを演出してみたいと思います。

WordPressのテーマに「AFFINGER」を設定すると左サイドバーの「AFFINGER管理」でサイト内の細かい設定をできるようになります。

AFFINGER管理画面の「会話アイコン」で、WordPressの「会話1」と「会話2」にそれぞれ名前とアイコン画像を上のように設定しました。

画像の注意点は、画面内にも書いてあるように「100px以上の正方形サイズ」が推奨なので、そのような画像を用意しましょう。

画像を挿入する画面でサイズを「会話風アイコン-100px✕100px」に設定すると円形が綺麗に表示されます。

後は、一番下の「しゃべるモード(タイピングアニメーション)」にチェックを入れるだけとなります。

後は、記事内で文章を書くのと同じように会話を表示させます。

ここからは、執筆を「ビジュアルモード」ではなく「テキストモード」で書く前提で説明します。

というのも、先に書いた通り、クラシックエディタで「しゃべるモード」を実現するためには、「テキストモード」での記述が必要だからです。

まずは、会話ふきだしをテキストモードで記述してみましょう。

例えば会話1の吹き出しを作りたい場合は、記事内に[st-kaiwa1]~[/st-kaiwa1]というショートコードを記述します。

英語で返ってきたら

stの後のハイフンは半角なのでご注意ください(上の文字をそのままコピペしても動作しません)。
以降の説明で[st-kaiwa1]や[st-kaiwa2]と言う説明が出てきた時もすべてハイフンを全角で記述しています。
もしコピーをするのであれば、ご自身でハイフンの部分だけを半角に修正してください。

会話2であれば、[st-kaiwa2]でショートコードを記述します。

「~」の部分に話したい内容を記述してみましょう。

にゃんこマスター
にゃんこマスター
こんちにゃ、普段はバーのマスターをやっているにゃんこマスターでっす
トリプルハロー
トリプルハロー
1年の内限られた時間しか顔を出さないトリプルハローだ

これでもいいんですけれど、できればトリプルハローを右にして向かい合わせ感を出したいですよね。

その場合は、ショートコードを修正します。

「st-kaiwa2 r」のように半角スペースを空けて「r」を入力してみましょう。

にゃんこマスター
にゃんこマスター
真下にいると落ち着かないので、対面しませんか?
そうだな。これでどうだ
トリプルハロー
トリプルハロー
にゃんこマスター
にゃんこマスター
OKです(だって顔が怖いんだもん・・)。

これだけではしゃべるモードにならない

さて、これだけでは当然「しゃべるモード」にはなりません。

それでは、会話のショートコードの話したい部分にCSSを設定してみます。

<div class="st-kaiwa-hukidashi-content"><p>話したい内容</p></div>

[st-kaiwa1]と[/st-kaiwa1]の間に、上記のHTMLタグとCSSを記述します。

そして、Pタグの間に話したい内容を記述します。

にゃんこマスター
にゃんこマスター

最近少し話せるようになったんですよね。

奇遇だな。寡黙なワシも凄いしゃべっている気がするゾ。ガハハ

トリプルハロー
トリプルハロー
にゃんこマスター
にゃんこマスター

一杯おごりますよ。

そうか、では乾杯といこう。

トリプルハロー
トリプルハロー

(まとめ)柔らかい感じが演出できるけれど・・

「会話ふきだし」は、キャラクターの画像やおしゃべりの雰囲気がフランクになりサイトが明るい感じになります。

「AFFINGER」の最新バージョンでふきだしを使ってキャラクターがしゃべっているような演出もできるようになりましたが、会話シーンでは少し動きのあるサイトとなり読む人を惹きつける効果も出ると思います。

ただし、会話シーンの多用は控えた方がいいかもしれません。

その記事内で伝えたい部分や大事な点は、会話とは別の表現方法で詳しい説明を入れた方が、読む人の満足感が増す可能性が高いです。

さて、今回は会話シーンがアップデートされましたが、それ以外にも「AFFINGER」テーマは豊富な機能で様々なサイトデザインを作成できます。

WordPressのテーマ選びに迷っているかたには、是非お勧めしたいテーマの1つとなっています。

WordPressテーマの「Affinger6」は以下から購入できます。個人ブランドもコーポレートサイトも多彩なデザインで作成できます。

作るぜい!(^^)!

今すぐ購入する

おしゃべり会話機能だー

おすすめ

1

サラリーマンでも会社経営でも、社会人になるとなんだかんだ言って数字と向き合う時間は増えると思います。 計算していても結構多く登場するのは、割合を求める場面ではないでしょうか。 例えば、 A商品の利益率 ...

2

地震や大雨のニュースを見るたびに、防災の意識が高まる・・・ようにならなければならないのですが、筆者は非常食以外、特に防災を意識した持ち物を用意していないのが現状だったりします。 自分の場合、自宅が海の ...

3

今年の11月にアメリカ大統領選挙があります。 民主党候補の現職バイデン大統領が今秋の大統領選出馬を見送り、現職副大統領のカマラ・ハリスを擁立した途端に民主党の支持が回復しました。 日本では、9月27日 ...

4

3日ほど前、筆者の自宅に「ガーさん」が遊びにやってきました。 筆者の部屋に招き、2泊していただいた後の3日目の夜に無事にお帰りになりましたので、十分休息を取られたのではないかと思います。 最近本州の方 ...

5

YouTubeには、ヒーリングミュージック的なものがたくさんアップされていますよね。 筆者も1時間くらいの「運上昇系ヒーリング」や「海を眺めながらジャズヒーリング」などの動画をよく聞いています。 今で ...

6

「動画AC」に新しい動画をアップしました。 ■動画一覧はこちら 今回ご紹介している動画以外にもアップされている動画がありますので、是非ご覧ください。 降りてくるハートフルな4色と野球のボールがこちらに ...

7

最近結婚した「飯豊まりえ」が主演した映画「シライサン」(2020年公開)について語ってみようと思います。 なぜ、この映画を語ろうと思ったかはさておき、ネタバレにならないように内容を簡単にご紹介しておき ...

8

『はんざ~い、君を武器で殴った~』 『もし脇の毛が濃くて、とても悩んでいるのなら~、毛根なんてなくしちゃえば~、生えないよぜったいぃ~♪』 これらを見て「嘉門達夫」の替え歌だとすぐに分かったかたは、そ ...

9

昨日、本当に久々だったのですが、テニスの「ウィンブルドン大会」を見たんですよ。 何時ぶりか・・・と言うと、「ロジャー・フェデラー」の姿をグランドスラムやマスターズ1000などの大きい大会であまり見なく ...

10

たくさんの動画をダウンロードできる「動画AC」で、筆者が新しく登録した動画が公開されました。 今回の動画は、以前から公開されていた「ネオンライン」の残り5色と「駒ケ岳をバックにした馬たち」の計6本とな ...

-サイト/ショップ作成のお話