【楽天】ポイント最大7倍還元中!

SANGO⇒THE SONIC|ふきだしショートコードを一括置換【Classic Editorで編集した記事専用】

15 min

THE SONIC への乗り換え障壁を取り払うべく、ふきだしのサンプルコードをいくつか用意してみました。

以下の注意を全てお読みになり、同意いただいた上でご利用くださいませ。

ことり

ことり

Classic Editor で編集した記事専用のコードです。間違えんさんな。

テーマ開発者様には絶対に質問しないでください。この記事の内容は公式で推奨されているものではありません。

この記事の内容について、テーマ開発者様にメンションをつけて Twitter などで質問・疑問の形で発信することもお控えください。

ご利用は自己責任で。当記事に記載の方法を利用して生じたいかなるトラブル・損害についても責任を負いかねます。

ご利用になる方は下記も併せてご確認くださいませ。

こじかショップ本店の「ふきだしクリエーター」(プラグイン)は テーマに依存しません。また Gutenberg 完全対応です。

ことり

ことり

そのままお使いになれますよ!

  1. バックアップが取れること
  2. リストアした経験があること
  3. テスト環境の構築ができること
  4. あるいは外注を視野に入れられること
  5. これらの用語がわかること

コードの置換には WordPressプラグイン「Search Regex」を使います。

【2020年5月8日 追記】
3年(4年だったかな?)の歳月を経てアップデートされました。めでたい。

ことり

ことり

残念ながら数年前に更新がストップしています・・・。

使用すると、サイトに登録しているメールアドレスに宛てて「サイトで技術的な問題が発生しています」というメッセージが送られてくるため、ちょっとドキッとします。

実際には、現時点(2020/4/1)で確認が取れている限りでは私のサイトでは何も起こっていません。ですが、その状態がいつまで続くかはわかりません。また、公式サイトから削除されれば入手できなくなります。

もろもろの事情をご理解いただいた上、ご利用はあくまでも自己責任でお願いいたします。

ことり

ことり

サンプルコードは THE SONIC 公式の色に準じてカラーを設定しています。

  • アレンジはご自由に。
  • 自己責任でどうぞ。
  • 無料でのリクエストは承っておりません。

スポンサーリンク

右に画像:THE SONICカラーの吹き出し

左に画像のあるふきだしが主流かと思います。しかし、あえて「右に画像のあるふきだし」を先にご紹介しました。その理由は、SANGO のコードを置換する際、「左に画像のあるふきだし」を先に置換してしまうと、すべて「左に画像のあるふきだし」に統一されてしまうからです。

【名前】をキャラ名に、【画像URL】をアイコン画像URLに、それぞれ書き換えます。

右に画像/枠線なし

SANGO の場合は「右に画像のあるふきだし」を先に置換してください。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

ショートコード(もとの形)

[say name="【名前】" img="【画像URL】" from="right"]テキスト[/say]
【名前を " " で挟んでいない場合】
[say name=【名前】 img="【画像URL】" from="right"]テキスト[/say]

Search pattern

|[say name="【名前】" img="【画像URL】" from="right"]([sS]*?)[/say]|
【名前を " " で挟んでいない場合】
|[say name=【名前】 img="【画像URL】" from="right"]([sS]*?)[/say]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2"} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2"><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt=""/>【名前】</div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

SANGO の場合は「右に画像のあるふきだし」を先に置換してください。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

ショートコード(もとの形)

【「name=""」を残している場合】
[say name="" img="【画像URL】" from="right"]テキスト[/say]
【「name=""」を削除している場合】
[say img="【画像URL】" from="right"]テキスト[/say]

Search pattern

【「name=""」を残している場合】
|[say name="" img="【画像URL】" from="right"]([sS]*?)[/say]|
【「name=""」ごと削除している場合】
|[say img="【画像URL】" from="right"]([sS]*?)[/say]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2"} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2"><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt=""/></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

ショートコード(もとの形)

[prpsay img="【画像URL】" name="【名前】"]テキスト[/prpsay]

Search pattern

|[prpsay img="【画像URL】" name="【名前】"]([sS]*?)[/prpsay]|
【名前を " " で挟んでいない場合】
|[prpsay img="【画像URL】" name=【名前】]([sS]*?)[/prpsay]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2"} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2"><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt=""/>【名前】</div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

ショートコード(もとの形)

【「name=""」を残している場合】
[prpsay img="【画像URL】" name=""]テキスト[/prpsay]
【「name=""」ごと削除している場合】
[prpsay img="【画像URL】"]テキスト[/prpsay]

Search pattern

【「name=""」を残している場合】
|[prpsay img="【画像URL】" name=""]([sS]*?)[/prpsay]|
【「name=""」ごと削除している場合】
|[prpsay img="【画像URL】"]([sS]*?)[/prpsay]|
<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2"} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2"><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt=""/></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

右に画像/画像のみ枠線あり

SANGO の場合は「右に画像のあるふきだし」を先に置換してから。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

ショートコード(もとの形)

[say name="【名前】" img="【画像URL】" from="right"]テキスト[/say]

名前ありの場合の Search pattern

|[say name="【名前】" img="【画像URL】" from="right"]([sS]*?)[/say]|

名前ありの場合の Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2","borderColor":"#b2d4e2","border":true} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2;border:solid 2px #b2d4e2"><span class="huki-text-before" style="border-left-color:#b2d4e2"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #b2d4e2"/>【名前】</div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

名前なしの場合の Search pattern

【「name=""」を残している場合】
|[say name="" img="【画像URL】" from="right"]([sS]*?)[/say]|
【「name=""」ごと削除している場合】
|[say img="【画像URL】" from="right"]([sS]*?)[/say]|

名前なしの場合の Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2","borderColor":"#b2d4e2","border":true} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2;border:solid 2px #b2d4e2"><span class="huki-text-before" style="border-left-color:#b2d4e2"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #b2d4e2"/></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

Search pattern

|[prpsay img="【画像URL】" name="【名前】"]([sS]*?)[/prpsay]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","backgroundColor":"#b2d4e2","borderColor":"#b2d4e2","border":true} --><div class="huki-box huki-right"><div class="huki-text" style="background-color:#b2d4e2;border:solid 2px #b2d4e2"><span class="huki-text-before" style="border-left-color:#b2d4e2"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#b2d4e2"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #b2d4e2"/>【名前】</div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

右に画像/枠線あり/背景色:白

SANGO の場合は「右に画像のあるふきだし」を先に置換してください。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

Search pattern

|[say name="【名前】" img="【画像URL】" from="right"]([sS]*?)[/say]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","color":"#333","backgroundColor":"#ffffff","borderColor":"#10a0bb","border":true} --><div class="huki-box huki-right"><div class="huki-text" style="color:#333;background-color:#ffffff;border:solid 2px #10a0bb"><span class="huki-text-before" style="border-left-color:#10a0bb"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#ffffff"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #10a0bb"/>【名前】</div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

Search pattern

|[prpsay img="【画像URL】" name="【名前】"]([sS]*?)[/prpsay]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"position":"huki-right","color":"#333","backgroundColor":"#ffffff","borderColor":"#10a0bb","border":true} --><div class="huki-box huki-right"><div class="huki-text" style="color:#333;background-color:#ffffff;border:solid 2px #10a0bb"><span class="huki-text-before" style="border-left-color:#10a0bb"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-left-color:#ffffff"></span></div><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #10a0bb"/>【名前】</div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

スポンサーリンク

左に画像:THE SONICカラーの吹き出し

【名前】をキャラ名に、【画像URL】をアイコン画像URLに、それぞれ書き換えます。

左に画像/枠線なし

SANGO の場合は「右に画像のあるふきだし」を先に置換してください。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

Search pattern

|[say name="【名前】" img="【画像URL】"]([sS]*?)[/say]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"backgroundColor":"#b2d4e2"} --><div class="huki-box huki-left"><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt=""/>【名前】</div><div class="huki-text" style="background-color:#b2d4e2"><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-right-color:#b2d4e2"></span></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

Search pattern

|[prpsay img="【画像URL】" name="【名前】"]([sS]*?)[/prpsay]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"backgroundColor":"#b2d4e2"} --><div class="huki-box huki-left"><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt=""/>【名前】</div><div class="huki-text" style="background-color:#b2d4e2"><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-right-color:#b2d4e2"></span></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

左に画像/画像のみ枠線あり

SANGO の場合は「右に画像のあるふきだし」を先に置換してください。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

Search pattern

|[say name="【名前】" img="【画像URL】"]([sS]*?)[/say]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"backgroundColor":"#b2d4e2","borderColor":"#b2d4e2","border":true} --><div class="huki-box huki-left"><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #b2d4e2"/>【名前】</div><div class="huki-text" style="background-color:#b2d4e2;border:solid 2px #b2d4e2"><span class="huki-text-before" style="border-right-color:#b2d4e2"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-right-color:#b2d4e2"></span></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

Search pattern

|[prpsay img="【画像URL】" name="【名前】"]([sS]*?)[/prpsay]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"backgroundColor":"#b2d4e2","borderColor":"#b2d4e2","border":true} --><div class="huki-box huki-left"><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #b2d4e2"/>【名前】</div><div class="huki-text" style="background-color:#b2d4e2;border:solid 2px #b2d4e2"><span class="huki-text-before" style="border-right-color:#b2d4e2"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-right-color:#b2d4e2"></span></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

左に画像/枠線あり/背景色:白

SANGO の場合は「右に画像のあるふきだし」を先に置換してください。「左に画像のあるふきだし」を先に置換した場合、すべて「左に画像のあるふきだし」に統一されてしまいます。

Search pattern

|[say name="【名前】" img="【画像URL】"]([sS]*?)[/say]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"backgroundColor":"#ffffff","borderColor":"#10a0bb","border":true} -->
<div class="huki-box huki-left"><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #10a0bb"/>【名前】</div><div class="huki-text" style="background-color:#ffffff;border:solid 2px #10a0bb"><span class="huki-text-before" style="border-right-color:#10a0bb"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-right-color:#ffffff"></span></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

Search pattern

|[prpsay img="【画像URL】" name="【名前】"]([sS]*?)[/prpsay]|

Replace pattern

<!-- wp:tsnc-gutenberg-blocks/huki {"backgroundColor":"#ffffff","borderColor":"#10a0bb","border":true} -->
<div class="huki-box huki-left"><div class="huki-imgname"><img class="pf-face-img" src="【画像URL】" alt="" style="border:solid 2px #10a0bb"/>【名前】</div><div class="huki-text" style="background-color:#ffffff;border:solid 2px #10a0bb"><span class="huki-text-before" style="border-right-color:#10a0bb"></span><!-- wp:paragraph -->$1<!-- /wp:paragraph --><span class="huki-text-after" style="border-right-color:#ffffff"></span></div></div><!-- /wp:tsnc-gutenberg-blocks/huki -->

スポンサーリンク

おわりに:くれぐれもお願いしたいこと

冒頭にも記載した注意を全てお読みになり、同意いただいた上でご利用くださいね。

ことり

ことり

よろしくお願いいたします。

テーマ開発者様には絶対に質問しないでください。この記事の内容は公式で推奨されているものではありません。

この記事の内容について、テーマ開発者様にメンションをつけて Twitter などで質問・疑問の形で発信することもお控えください。

ご利用は自己責任で。当記事に記載の方法を利用して生じたいかなるトラブル・損害についても責任を負いかねます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策:日本語が含まれないコメントは無視されます。ご注意ください。