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

2020年2月2日

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

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

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

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

を改造しまくりました。

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

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

(ver.1)

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

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

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

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

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

{会話BOX}

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

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

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

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

画像は横幅の%で制御

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

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

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

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

横着機能『左右反転』

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

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

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

transform: scale(-1, 1)

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

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

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

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

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

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

画像の向き

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

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

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

吹き出し種類

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

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

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

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

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

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

名前と名前カラー

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

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

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

吹き出し位置調整

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

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

まとめ

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

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

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

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

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

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

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

{会話BOX}

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