リンクを吹き出し化してセリフやモノローグを表現する(安定版)
2017/10/6 19:57 色々うまく動かない部分や、scrapbox本体のデザインに影響が出てしまっているため、もうしばらく修正します
2017/10/13 scrapboxの他の部分のデザインに影響が出る部分を直しました。
これでひとまず完成です。
2017/10/16 公式の方で記法拡張の機能が追加されました。欲しかったものがピンポイントで実装！
吹き出しのCSSは、ブラッシュアップされたものがこちらで公開されています
madobeさんの/scrasobox/フキダシになるタグを元に作らせて頂きました
madobeさん、ありがとうございます
2017/10/6 テキストの折り返しに対応 
2017/10/6 クリックしても新規ページ作成リンクに飛ばない。スマホ等で編集しやすい。 [「通常のセリフ] [(何かを考える時] [<スマホでのやり取り] 見ての通り、アイコン記法と組み合わせるといい感じです
scrapboxの仕様なのですが
guestから見ると、文中の空リンクは通常のテキストに置き換えられてしまいます
guestに対しても吹き出しを見せたい場合、ページを生成してlinkを確定させる必要があります
以下の文はきちんと吹き出し記法で書いています
しかし、リンク先のページを作っていないため、
scrapboxにログインしてない状態で見ると、
風情も何もないただのテキストになります
上の記法紹介ではきちんとリンク先のページがあり、リンクが機能しているので第三者からも見える
通常のテキストでもこういうこと出来れば解決するのだが、どうやればいいのかよくわからない
吹き出しそのものをgyazoるのが早い気がしてきた。うーん。
記法拡張が使えるようになり、解決した
導入したいプロジェクトの
settings に、以下の style.css をコピペしただけでは動きませんこのサイトの場合:
https://scrapbox.io/li9ri9/ li9ri9の部分だけ入れる
吹き出し準備用
style.css.line .text { clear: both; overflow: auto }
.line img.icon {
display: inline;
}吹き出し全体用
style.css.line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon),
.line a[href^="/ここにサイト名/("]:not(.icon),
.line a[href^="/ここにサイト名/%3C"]:not(.icon) {
pointer-events: none;
line-height: 1.4em;
display: inline-block;
vertical-align: top;
margin-left: 16px;
max-width: 80%;
margin-bottom: 0.5em;
position: relative;
padding: 3px 7px 2px 7px;
border-radius: 6px;
}
.line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon):after,
.line a[href^="/ここにサイト名/("]:not(.icon):before,
.line a[href^="/ここにサイト名/("]:not(.icon):after,
.line a[href^="/ここにサイト名/%3C"]:not(.icon):after {
display: block;
position: absolute;
content: "";
top: 10px;
left: -16px;
width: 0;
border-width: 7px 0 0 18px;
border-style: solid;
}
.line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon) span:first-child,
.line a[href^="/ここにサイト名/("]:not(.icon) span:first-child,
.line a[href^="/ここにサイト名/%3C"]:not(.icon) span:first-child { display: none }
.line.cursor-line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon) span:first-child,
.line.cursor-line a[href^="/ここにサイト名/("]:not(.icon) span:first-child,
.line.cursor-line a[href^="/ここにサイト名/%3C"]:not(.icon) span:first-child { display: inline }
.line.cursor-line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon),
.line.cursor-line a[href^="/ここにサイト名/("]:not(.icon),
.line.cursor-line a[href^="/ここにサイト名/%3C"]:not(.icon){
all:initial;
pointer-events: none;
font-size: 14px;
}
.line.cursor-line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon):after,
.line.cursor-line a[href^="/ここにサイト名/("]:not(.icon):after,
.line.cursor-line a[href^="/ここにサイト名/%3C"]:not(.icon):after {
all:initial;
}
セリフ吹き出し
style.css/* 「 で始まるタグを吹き出しにする ※アイコン記法は除く */
.line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon) {
color: #000 ;
background-color: #d8d8d8;
}
.line a[href^="/ここにサイト名/%E3%80%8C"]:not(.icon):after {
border-color: #d8d8d8 transparent;
}モノローグ用吹き出し
style.css/* ( で始まるタグを吹き出しにする ※アイコン記法は除く */
.line a[href^="/ここにサイト名/("]:not(.icon), .line a[href^="/ここにサイト名/("]:not(.icon):before, .line a[href^="/ここにサイト名/("]:not(.icon):after {
background-color: #a0a0a0;
}
.line a[href^="/ここにサイト名/("]:not(.icon) {
color: #FFF !important;
padding: 6px 7px 6px 7px;
border-radius: 17px;
}
.line a[href^="/ここにサイト名/("]:not(.icon):before {
top: 10px;
left: -6px;
width: 12px;
height: 8px;
border-radius: 8px;
border-style: hidden;
}
.line a[href^="/ここにサイト名/("]:not(.icon):after {
top: 7px;
left: -12px;
width: 6px;
height: 4px;
border-radius: 8px;
border-style: hidden;
}
.line.cursor-line a[href^="/ここにサイト名/("]:not(.icon){
background-color: #a0a0a0;
color: #000 ;
}
.line.cursor-line a[href^="/ここにサイト名/("]:not(.icon):before {
all:initial;
}LINE風吹き出し
style.css/* < で始まるタグを吹き出しにする ※アイコン記法は除く */
.line a[href^="/ここにサイト名/%3C"]:not(.icon) {
color: #FFF ;
background-color: #17ce61;
}
.line a[href^="/ここにサイト名/%3C"]:not(.icon):after {
border-color: #17ce61 transparent;
}scrapboxで脚本を共同執筆しています
とても便利
完成品が上がってきたら別記事で書く
問題点がでてきた
(これは殆どのエディタが持つ問題ではある)
しかもscrapboxなので、どんどん既存行の下にコメントが追加されていく
どうにかセリフの視認性を良くしたい！と考え、こうなった