リンクを吹き出し化してセリフやモノローグを表現する(安定版)
2017/10/6 19:57
リンクを吹き出し化してセリフやモノローグを表現する(安定版)#59d757e2433fb900000eef95
色々うまく動かない部分や、scrapbox本体のデザインに影響が出てしまっているため、もうしばらく修正します
2017/10/13
scrapboxの他の部分のデザインに影響が出る部分を直しました。
これでひとまず完成です。
2017/10/16
公式の方で記法拡張の機能が追加されました。欲しかったものがピンポイントで実装！
/help-jp/文字装飾記法#59e4608d97c29100003ca283
吹き出しのCSSは、ブラッシュアップされたものがこちらで公開されています
/wakaba-manga/settings#59e44bb197c2910000fd8813
madobeさんの/scrasobox/フキダシになるタグを元に作らせて頂きました
madobeさん、ありがとうございます
/icons/hr.icon
/icons/cube.icon 画像でのサンプル
https://gyazo.com/afae682f79a21e32312fb7b2583bdd40
/icons/ellipsis.icon 2017/10/6 テキストの折り返しに対応
https://gyazo.com/7094d1d7378bddcb0fb89543ef00f78d
/icons/ellipsis.icon 2017/10/6 クリックしても新規ページ作成リンクに飛ばない。スマホ等で編集しやすい。
/icons/hr.icon
/icons/cube.icon 実際の記法
[「通常のセリフ]
liqriq.icon「通常のセリフ
[(何かを考える時]
liqriq.icon(何かを考える時
[<スマホでのやり取り]
liqriq.icon<スマホでのやり取り
見ての通り、アイコン記法と組み合わせるといい感じですliqriq.icon
/icons/hr.icon
/icons/alert.icon 注意:
scrapboxの仕様なのですが
guestから見ると、文中の空リンクは通常のテキストに置き換えられてしまいます
guestに対しても吹き出しを見せたい場合、ページを生成してlinkを確定させる必要があります
以下の文はきちんと吹き出し記法で書いています
しかし、リンク先のページを作っていないため、
scrapboxにログインしてない状態で見ると、
風情も何もないただのテキストになります
liqriq.icon「カムパネルラ、また僕たち二人ふたりきりになったねえ
liqriq.icon(ザネリはどうしてぼくがなんにもしないのにあんなことを言うのだろう
liqriq.icon<大きな望遠鏡で銀河をよっく調べると銀河はだいたい何でしょう
上の記法紹介ではきちんとリンク先のページがあり、リンクが機能しているので第三者からも見える
通常のテキストでもこういうこと出来れば解決するのだが、どうやればいいのかよくわからないliqriq.icon
吹き出しそのものをgyazoるのが早い気がしてきた。うーん。
記法拡張が使えるようになり、解決した
/icons/hr.icon
/icons/cube.icon 導入方法
導入したいプロジェクトのsettingsに、以下のstyle.cssをコピペしただけでは動きません
/icons/alert.icon 「ここにサイト名」の部分を、導入したいプロジェクト名で上書き
このサイトの場合:
https://scrapbox.io/li9ri9/
li9ri9の部分だけ入れる
吹き出し準備用
code:style.css
.line .text { clear: both; overflow: auto }
.line img.icon {
display: inline;
}
吹き出し全体用
code:style.css
.line ahref^="/ここにサイト名/%E3%80%8C":not(.icon),
.line ahref^="/ここにサイト名/(":not(.icon),
.line ahref^="/ここにサイト名/%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 ahref^="/ここにサイト名/%E3%80%8C":not(.icon):after,
.line ahref^="/ここにサイト名/(":not(.icon):before,
.line ahref^="/ここにサイト名/(":not(.icon):after,
.line ahref^="/ここにサイト名/%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 ahref^="/ここにサイト名/%E3%80%8C":not(.icon) span:first-child,
.line ahref^="/ここにサイト名/(":not(.icon) span:first-child,
.line ahref^="/ここにサイト名/%3C":not(.icon) span:first-child { display: none }
.line.cursor-line ahref^="/ここにサイト名/%E3%80%8C":not(.icon) span:first-child,
.line.cursor-line ahref^="/ここにサイト名/(":not(.icon) span:first-child,
.line.cursor-line ahref^="/ここにサイト名/%3C":not(.icon) span:first-child { display: inline }
.line.cursor-line ahref^="/ここにサイト名/%E3%80%8C":not(.icon),
.line.cursor-line ahref^="/ここにサイト名/(":not(.icon),
.line.cursor-line ahref^="/ここにサイト名/%3C":not(.icon){
all:initial;
pointer-events: none;
font-size: 14px;
}
.line.cursor-line ahref^="/ここにサイト名/%E3%80%8C":not(.icon):after,
.line.cursor-line ahref^="/ここにサイト名/(":not(.icon):after,
.line.cursor-line ahref^="/ここにサイト名/%3C":not(.icon):after {
all:initial;
}
セリフ吹き出し
code:style.css
/* 「 で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="/ここにサイト名/%E3%80%8C":not(.icon) {
color: #000 ;
background-color: #d8d8d8;
}
.line ahref^="/ここにサイト名/%E3%80%8C":not(.icon):after {
border-color: #d8d8d8 transparent;
}
モノローグ用吹き出し
code:style.css
/* ( で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="/ここにサイト名/(":not(.icon), .line ahref^="/ここにサイト名/(":not(.icon):before, .line ahref^="/ここにサイト名/(":not(.icon):after {
background-color: #a0a0a0;
}
.line ahref^="/ここにサイト名/(":not(.icon) {
color: #FFF !important;
padding: 6px 7px 6px 7px;
border-radius: 17px;
}
.line ahref^="/ここにサイト名/(":not(.icon):before {
top: 10px;
left: -6px;
width: 12px;
height: 8px;
border-radius: 8px;
border-style: hidden;
}
.line ahref^="/ここにサイト名/(":not(.icon):after {
top: 7px;
left: -12px;
width: 6px;
height: 4px;
border-radius: 8px;
border-style: hidden;
}
.line.cursor-line ahref^="/ここにサイト名/(":not(.icon){
background-color: #a0a0a0;
color: #000 ;
}
.line.cursor-line ahref^="/ここにサイト名/(":not(.icon):before {
all:initial;
}
LINE風吹き出し
code:style.css
/* < で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="/ここにサイト名/%3C":not(.icon) {
color: #FFF ;
background-color: #17ce61;
}
.line ahref^="/ここにサイト名/%3C":not(.icon):after {
border-color: #17ce61 transparent;
}
/icons/hr.icon
/icons/cube.icon 今後の計画
リンクを吹き出し化:flexbox版(未実装)
/icons/cube.icon なんで作ったの
scrapboxで脚本を共同執筆しています
とても便利
完成品が上がってきたら別記事で書く
問題点がでてきた
/icons/alert.iconト書きとセリフが見分けづらい
(これは殆どのエディタが持つ問題ではある)
しかもscrapboxなので、どんどん既存行の下にコメントが追加されていく
どうにかセリフの視認性を良くしたい！と考え、こうなった