WordPressテーマのAffinger6はver20241022から会話ふきだしに「しゃべるモード」が実装されました。 残念ながら、ショートコードが非対応のため、ブロックエディタのみの対応ですので通常、クラシックエディタ(以下、旧エディタに統一します)で「しゃべるモード」が使えません。
そこで、旧エディタでも「しゃべるモード」が使える様にPost Snippetsプラグインを使って新たなショートコードを作成しました。
旧エディタで投稿しています会話ふきだしの「しゃべるモード」について
「しゃべるモード」は、下に示す様に、会話ふきだしのテキストをタイピングアニメーションで表示されます。
旧エディタで投稿・デモ
こんにちわ‼️ この会話ふきだしは旧エディタで「しゃべるモード」を実現しています。
使用したPost Snippetsショートコード
shortcode [kaiwa_typing kaiwa_no="1" position=""]こんにちわ‼️ 〜略〜 [/kaiwa_typing]
「Post Snippets Plugin」を使ったショートコードの作成
Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。
Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、番号を振ったエリアに従って説明します。 （Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。）
先ず、「Add New Snippet」ボタンを押します。
① エリアのUntitledにショートコードの名称を記入します。 ショートコード名を、kaiwa_typing にしました。
② エリアに下のHTMLコードをコピペします。 { } で囲まれた{kaiwa_no}と{position}文字列が変数です。 この変数が、ショートコードオプションになります。
|
1 2 3 4 5 6 7 8 |
<div style="margin-bottom:20px;height: 150px;"><!--CLS対策でエリア高さを規定--> [st-kaiwa{kaiwa_no} {position}] <div class="st-kaiwa-hukidashi-content"> <p>{content}</p> </div> [/st-kaiwa{kaiwa_no}] </div> |
なお、{content}によって、コードの前後が分離される囲み型ショートコードにしています。
③ Variables（変数）をカンマ区切りで記述し、「 =」の後がデフォルト値になります。 下で示す内容を ③ エリアに記述します。
kaiwa_no=1,position④ エリアにショートコード化するので、レ点を入れます。 ⑤ エリアにはPHPを使っていないので無記入のままです。
⑥ エリアにショートコードの簡単な説明を記載します。（下記は参考です）
kaiwa_noはkaiwa番号を記入、右にアバターを配置するには、positionに「 r 」を記述する。 会話内容を記述したら終点に[/kaiwa_typing]を配置する。以上で、ショートコードが完成しました。 ただ、今回作成したショートコード「kaiwa_typing 」は「会話吹き出しブロック」をコードエディタに切替てコードを読み取り、モディファイしています。 そのため、このショートコードを使用する際は、Affinger6のバージョンアップ等によってタイピングアニメーションが機能しなくなる可能性があることにご注意ください。
完成したショートコードの使い方
- しゃべるモードの有効化
「AFFINGER管理」→「会話アイコン」の画面から”しゃべるモード（タイピングアニメーション）”を有効化しておきます。 - ショートコードの使い方
旧エディタのビジュアルエディタで【Post Snippets】ボタンを押し、今回作成した「kaiwa_typing」ショートコードを選択します。 ビジュアルエディタの編集エリアに下で示す赤字の「kaiwa_typing」ショートコードの先頭部が下に示す様に配置されます。 会話内容を記述したら終点に[/kaiwa_typing]を忘れずに記述します。
shortcode [kaiwa_typing kaiwa_no="1" position=""]ここに会話を記述する[/kaiwa_typing]
ショートコードの説明
- kaiwa_noオプション：会話ふきだしの番号を記入します。
- positionオプション：「 r 」を指定すると、会話ふきだしのアバターの位置が右寄せになります。
- 囲み型ショートコードの間に：会話の内容を記述します。
会話ふきだし「しゃべるモード」の使用上の注意（2024/12/11追記)
モバイルの様な横幅の小さい画面では、しゃべるモードのアニメーションが開始され会話行が追加されるに従って、下の要素にズレが生じSEO的に望ましくありません。 つまり、「ウェブバイタル（Web Vitals）」中のCLS（Cumulative Layout Shift）が悪化する恐れががあり得ます。 この対応策のため、前記「Post Snippets Plugin」②エリアのHTMLコードの１行目に<div>タグを追加してこの<div>で囲まれた要素の高さを150pxに規定しました。
よって、会話エリア高さを150pxに規定したので、モバイルの様な横幅の小さい画面（例えばiPhoneSE）でプレビューして確認しながら、会話ふきだしの会話行数を５行以内（要素の高さ150px以内）に収める必要があります。