フキダシになるタグ
タグが{で始まるとき、タグがフキダシみたいになるよ。
太字記法と組み合わせてもいい感じ!
[*** [madobe.icon][{わーい!]] → madobe.icon{わーい! 表示サンプル(画像)
https://gyazo.com/fc48f43646fb633ca07cde547001abc1
liqriqさんがものすごい進化版を作ってくれました!
これを見たときすごすぎて窓辺ちゃんはひっくり返った。
マンガでわかるScrapboxの中でも進化したフキダシが使われてます!
プロフィールアイコンとのきれいな組み合わせ方とか、スマホ対応とか、どひぇ~って感じ!
新しい記法の定義でフキダシ記法も作れるようになりました!
今までは公開プロジェクトでスタイル適用できない場合があったけど、公式機能になったことで解決したよ~!
code:style.css
/* { で始まるタグを吹き出しにする ※アイコン記法は除く */
display: inline-block; position: relative; vertical-align: text-top;
line-height: 1; font-size: 91%; color: #FFF !important; background-color: #b2bcba; padding: 3px 4px 1px 5px; margin-left: 10px;
border-radius: 4px; border-bottom-left-radius: 0 }
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -7px;
width: 0; content: "";
border-width: 0 0 7px 7px; border-style: solid; border-color: #b2bcba transparent } .line ahref*="/%7B":not(.icon) span:first-child { display: none } .line.cursor-line ahref*="/%7B":not(.icon) span:first-child { display: inline } code:import.css
フキダシ記法版(拡張装飾記法)は、ある程度長文でもそれなりに表示できるようになってます。 そのほか見た目でタグ版と違う部分は、背景色と文字サイズくらい。あと、地味にプレゼンモードでのサイズ感調整など。
[{ これがフキダシ記法だよ~] → これがフキダシ記法だよ~
code:tag_style.css
/* フキダシ記法版 */
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85); padding: 3px 4px 2px 5px; margin-left: .6em;
border-radius: .4em; border-bottom-left-radius: 0 }
.line:not(.cursor-line) .deco-\{::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -0.45em;
width: 0; content: '';
border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }
code:import.css
初出 2017-09-06
2017-09-15 太字記法との組み合わせが有効なことに気づいたので追記
2017-09-17 フォント指定してた部分を取っ払った
2017-10-10 liqriqさんのページにリンクしました
2017-10-16 拡張記法が使えるようになったよ!公式ヘルプと『マンガでわかるScrapbox』にリンクしました
2017-10-19 フキダシ記法スタイルを追記
2017-11-16 フキダシ記法の表示がFirefoxでちょびっと変だったので直した
2018-03-27 タグリンクのhref値が変わったぽいので対応
2018-04-01 タグリンクのhref値が変わったぽいので対応
2018-05-19 拡張記法版だと字が小さくなりすぎる場合があったのでサイズ指定しないようにした
2022-03-19 タグリンクのhref値が変わったぽいので対応