吹き出しで会話を表現するショートコード創りました

今この時に伝えたい緊急号外記事お役立ちツール,オレティメット,究極プラグイン

吹き出しで会話表現ショートコード

みなさん、こんにちわ。
inowayいのうぇい です。

さて、また最近は暇なときとかHTMLやらCSSをいじくってました。
いや〜おもろいです(笑)

んで、今まで使っていた自分用のオリジナルショートコード、通称

オレティメットショートコード

を改造しまくりました。

正直、今までよりだいぶ使いやすくなったはずです。
ということで、さっそく倶楽部のほうでシェアしたいと思います。

あ、そうそう。
それと今回からコードの説明文に

(ver.1)

と記載しています。
まあ、バージョン1ってことです。

この ver.バージョン 表記は入れるだけで飛躍的にプロっぽくなる魔法のコードです。

だって、今後の拡張性アップデートを予感させるでしょ?(笑)

ちなみに今までシェアしていたコードや、倶楽部入会時にプレゼントしたコードは試作品プロトタイプ扱いになります^^;
あ、でも全然普通に使えますので心配しないでくださいね。

ではでは今日はこれまでで最もお気に入りのオレティメットコードを紹介します。

{会話BOX}

inoway

こんな感じの会話風のやつです

こーゆーのは大好きで今までも作って使ってたんですが、ちょっと理想とは違うものでした。
吹き出しと画像をうまいこと配置出来なくてtable属性に頼ってなんとか形にしてました。

ですが、最近知った便利なモノ【 flexboxフレックスボックス 】を使ってみたらやっと納得出来るレベルのコードに。

※ショートコード挿入画面

上のコード挿入画面を見たらわかると思いますが、順に項目を選んでいくだけなので簡単に使えます。

画像は横幅の%で制御

画像のサイズは横幅の パーセント で制御。
コレによりPC の大画面では大きく、スマホ等のモバイルでは小さく表示することが出来ます。

横幅10%

じゃあ、横幅10%にしたら
1000pxのpc画面なら100pxだけど
スマホで見たら30pxとかになるんじゃね?

横幅30px

30pxなんてこんなんだぜ

そうですね。
一般的にスマホなんかの横画面の表示幅は 320px とかですね。
その10%は 32px 、それは確かに小さすぎる。

てことで、対策としてどんな画面サイズでも画像が 80px までしか縮小しないように
min-width: 80px
を指定しています。

多分これで大丈夫・・・のはず。
上の 戦闘員マスクマン がスマホで小さくなり過ぎてなければ成功です(笑)

横着機能『左右反転』

横向きの顔画像ってありますよね?
右か左に顔の向きがかたよってる画像。

真の思考停

余はわかりやすい画像じゃ

そうそう、そーゆーの。
このタイプの画像って吹き出しの向きによっては違和感出るじゃないですか。

Mr.シレット

統計によると実に76%の人が
違和感を感じてるらしい(嘘)

マチョパンチ

目の前の敵、ぶん殴る。
アレ?後ろか?

そこで、簡単に左右を逆転して表示する機能を実装しました。
まあ、単純に

transform: scale(-1, 1)

を使って画像を裏返しにしてるんですが。

Mr.シレット

確かに。
吹き出しに対して正面なら違和感も無いですね。
これを心理学では正面適正効果といいます(嘘)

マチョパンチ

嘘つきはブン殴る!!
 

うん。
いいですね〜(^^)

ただ、本当のことを言うと画像は二種類用意したほうがいいです。
右向き用と左向き用。

そのほうが確実です。
バグとかエラーとかの影響も受けにくいし。

ただ面倒なときとか直感で向きを変えたい時にはこの機能は絶大な効果を発揮します。
あ、私メッチャ面倒くさがりなんですよ(笑)

去り男

人間は面倒な
生き物さ

※逆に背中で語るタイプの画像にも使えます

画像の向き

この項目では吹き出しと画像の位置を選べます。
現在は以下の4つのタイプから選択するようになってます。

  • 人物が左
  • 人物が左(上固定)
  • 人物が右
  • 人物が右(上固定)

人物が左なら吹き出しは自動的に右に。
反対に右に人物なら吹き出しが左です。

きょんC

上固定って何だ?

上固定は画像を固定して吹き出しだけを下に伸ばしていく表現です。
長文のセリフ、説明なんかで利用するときに選べば読みやすくなるかな?

inoway

これが通常の
【人物が左】状態。
画像は常に真ん中。
長〜いセリフや
コマメな改行を
乱発する場合には
ちょっとバランスが
悪くなるかも?
とくに縦長の画面、
スマホなんかだと
下にスクロールしないと
画像がなかなか
出ないから
誰が喋ってるのか
わからなくなるとか

inoway

そしてこっちは
【上固定】タイプ。
画像は上部に固定され
吹き出しのほうのセリフは
どんどん下に下に
伸びていく感じ。
通常タイプと
上固定タイプ。
好みやシチュエーションに
合わせて使い分けるとGOOD♪

吹き出し種類

表示する吹き出しの種類です。

  • 吹き出し無し
  • 通常吹き出し
  • 考え事吹き出し
  • 怒り吹き出し
  • チャット風

現在は上の5つから選べます。
選んだら対応した吹き出しのショートコードが読み込まれて表示する仕組み。

普通の井上

通常吹き出し。
うん。
めっちゃ通常ですね。

考える井上

考え事吹き出し。
超思考中です・・・

怒れる井上

怒り吹き出しっ!!
うおおおおおおっ!!!
 

疑いの井上

本当にチャット風?いや、本当に?

スーパー井上

間違いなくチャットFUUUU!!!

去り男

だが、一番
ハードボイルドなのは
吹き出し無しだ

ちなみに吹き出し無しはただハードボイルドなだけじゃなく、かなり面白い使い方も出来ます。

実はこいつは
【コード挿入】
って名前の中身の無いショートコードなんです。

なので、逆になんでも入れられるってことです。

マチョパンチ

マチョパンチがあらわれた!!
ドラクエ風の表現だ!!

ソレナーデ

とにかくアイデア次第ですね♪

名前と名前カラー

画像の下に表示するテキストです。
そのキャラクターの名前として表示するのがベターというかベストかな。

カラー は背景に合わせて選べるように変更出来る仕様です。

息子の絵

背景が黒いときは名前のカラーを白くするなど

鮮血のブラッド

血の匂いを感じさせるキャラの名前を真紅にするのも一興か・・・ククク・・・

あー、でもあまりに長い名前を入力すると微妙な改行で表示されるのが玉にキズです^^;

ネフィリタス・アーケンヴァイン・ラビルクローク・シュタインエル・リッセンベルク・アルメシア・プラクリオ・デ・ラ・ベッピン

私の名前はネフィ(略)

吹き出し位置調整

吹き出しの左右位置の微調整項目です。

数字をプラス方向に大きくすると右に、
マイナスに小さくすると左に調整出来ます。

トレカ

私のターン!!
怒り吹き出しを召喚!!
50px左にセットして
ターンエンド!!
 

ミテール

あ、あれは伝説のカード、
吹き出し位置調整!?

トレカ

トラップカード発動
相手の吹き出しを左に100pxへ

ミエハルト

目眩ましか・・・子供騙しだな。
このミエハルト・キーテマセンにとって視覚などただの五感に過ぎん。
ぽいんと調整によっては吹き出しが画像と重なったり、画面外に出たりするので気をつけよう!!
あと、画像の大きさは画面幅やセリフ量により可変するのでPCで見た場合とスマホでみた場合で違いが出ます。

まとめ

とまあ、そんなこんなでとても便利なショートコードです。
欠点はアレですね。

多用してしまうことです(笑)

いや、依存に近いかも^^;

こーゆー漫画風の表現って読者も見てて楽しいんですが、こっちもやってて面白いんです。
そして楽、なんか楽。ほんとに。

見るほう、書くほう、双方 Win-Winウィンウィン な技法。
これが吹き出しの力なんです。

さてさて、ちょっと説明が長くなってしまいましたね。
(書いてて楽しすぎて・・・)

今回ご紹介したオレティメットショートコード、

{会話BOX}

本日、オレティメット倶楽部のほうでシェアしますので是非是非つかってみてください。
面白いですよ(笑)

メンバーサイトへはコチラから登録出来ます

お名前
メールアドレス
任意のパスワード

※もちろん無料です


Short codes Ultimate の様々な機能と3つの拡張アドオンは公式サイトで詳しく確認出来ます。

公式サイト トップページ
Short codes Ultimateショートコード一覧
拡張アドオン追加のスキン
拡張アドオンエクストラショートコード
拡張アドオンショートコードクリエイター
まとめてお得バンドルアドオン

リンク先はプラグイン制作元の海外のサイトになります。英語が苦手なかたは私と同じようにGoogle等の日本語翻訳機能をお使い下さい。


関連記事
Shortcodes Ultimate の拡張オプションを手に入れる方法

見てみる