付箋記法
太字記法との組み合わせで付箋の色が変わるようにしてみたよ。
とりあえず画像でサンプル！
https://gyazo.com/536496b66af9f3dac89b48fd8b10daf2
つかいかた
[~ チルダで修飾すると付箋になるよ]チルダで修飾すると付箋になるよ
行の途中で書いても→OK![~ OK!]
太字にすると→[**~ 重要っぽくなる]重要っぽくなる
もっと太字→[***~ けせらせら [madobe.icon]] けせらせら madobe.icon
もっともっと太字→[****~ らーめん [car.icon]]らーめん car.icon
[**~ 別に行を空けなきゃいけないってことはない]別に行を空けなきゃいけないってことはない
[~ とりあえず伝言したいこととか]とりあえず伝言したいこととか
[~ あとで消す予定のメモとか]あとで消す予定のメモとか
でも長い文章の上に貼るとテキストが隠れちゃうから、読みにくくならないように注意が必要だ。モバイル環境だと尚更なので、一応なんとかしようとした↓
画面が狭いときはこんな感じに、付箋がインライン表示されるようにしてみたよ。
https://gyazo.com/2bfd543d31cae3ae1ae0356e8b6e2f16
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } } /* 太字記法との組み合わせでスタイルを変える場合 */
.line .level-2 .deco-\~ { border-right-color: #009175 } .line .level-3 .deco-\~ { border-right-color: #EFBB33 } .line .level-4 .deco-\~ { border-right-color: #F23E2E } /* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
2017-10-25 印刷時に付箋の右端が切れてたのを修正