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]でショートコードを記述します。
「~」の部分に話したい内容を記述してみましょう。
これでもいいんですけれど、できればトリプルハローを右にして向かい合わせ感を出したいですよね。
その場合は、ショートコードを修正します。
「st-kaiwa2 r」のように半角スペースを空けて「r」を入力してみましょう。
これだけではしゃべるモードにならない
さて、これだけでは当然「しゃべるモード」にはなりません。
それでは、会話のショートコードの話したい部分にCSSを設定してみます。
[st-kaiwa1]と[/st-kaiwa1]の間に、上記のHTMLタグとCSSを記述します。
そして、Pタグの間に話したい内容を記述します。
最近少し話せるようになったんですよね。
奇遇だな。寡黙なワシも凄いしゃべっている気がするゾ。ガハハ
一杯おごりますよ。
そうか、では乾杯といこう。
(まとめ)柔らかい感じが演出できるけれど・・
「会話ふきだし」は、キャラクターの画像やおしゃべりの雰囲気がフランクになりサイトが明るい感じになります。
「AFFINGER」の最新バージョンでふきだしを使ってキャラクターがしゃべっているような演出もできるようになりましたが、会話シーンでは少し動きのあるサイトとなり読む人を惹きつける効果も出ると思います。
ただし、会話シーンの多用は控えた方がいいかもしれません。
その記事内で伝えたい部分や大事な点は、会話とは別の表現方法で詳しい説明を入れた方が、読む人の満足感が増す可能性が高いです。
さて、今回は会話シーンがアップデートされましたが、それ以外にも「AFFINGER」テーマは豊富な機能で様々なサイトデザインを作成できます。
WordPressのテーマ選びに迷っているかたには、是非お勧めしたいテーマの1つとなっています。
WordPressテーマの「Affinger6」は以下から購入できます。個人ブランドもコーポレートサイトも多彩なデザインで作成できます。
作るぜい!(^^)!
おしゃべり会話機能だー