llminatoll
https://lh6.googleusercontent.com/-mbWDbpqEFas/AAAAAAAAAAI/AAAAAAAABBk/3n-kIuehfnA/photo.jpg
湊川（みなとがわ）あい
フリーランスWebデザイナー・マンガ家・イラストレーター・技術書執筆
著書
わかばちゃんと学ぶWebサイト制作の基本 https://goo.gl/wEZLEY 　著：湊川あい
https://gyazo.com/126e9f1ca7a6b3bd745e07866e0a118a
わかばちゃんと学ぶGit使い方入門 https://goo.gl/XFoWyJ 　著：湊川あい / 監修：DQNEO
https://gyazo.com/936b08717df2eec6c22fca00601b94de
わかばちゃんと学ぶGoogleアナリティクス https://goo.gl/wU26Pp 　著：湊川あい
https://gyazo.com/ea1c0aaeeb787405a7e5b032c51d09e8
リンク
Schoo授業ページ https://schoo.jp/class/4228
Schoo教員名簿 https://schoo.jp/teacher/1985
アマゾン著者ページ https://www.amazon.co.jp/%E6%B9%8A%E5%B7%9D-%E3%81%82%E3%81%84/e/B01N8OK2UW
ツイッター https://twitter.com/llminatoll
#湊川あい
以下、/help-jp/文字装飾記法参考
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #b2bcba;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
shokai.icon 左吹き出しの角
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #b2bcba transparent;
}
右吹き出しの角 shokai.icon
code:style.css
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #b2bcba transparent;
}
強調吹き出しの角
code:style.css
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
color: #66F;
}
重要な部分を赤くする
deco-!をUserCSSで赤くする
code:style.css
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
ツイートメニュー
参考：　/shokai/Tweet Menu
code:script.js
scrapbox.PageMenu.addItem({
title: 'Tweet',
image: 'https://twitter.com/favicon.ico',
onClick: () => window.open(https://twitter.com/intent/tweet?url=${encodeURIComponent(location.href)}&text=${encodeURIComponent(document.title)})
})