ふきだし記法
いいアイデアなら、とにかくやってしまいなさい。許可を得るより謝る方がずっと簡単よ。
style.css/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #000000;
background-color: #d8d8d8;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
margin-bottom: 1px;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.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: #d8d8d8 transparent;
}
/* 右吹き出しの角 */
.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: #d8d8d8 transparent;
}
/* 強調吹き出しの角 */
.deco-\!:before, .deco-\!:after { border-color: #ee6666 transparent; }
/* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #000000; }
/*.deco-\{ a.empty-page-link, .deco-\} a { color: #F00; }*/
style.css/*body{background:url(https://source.unsplash.com/random);background-size:cover}.grid /*li.page-list-item a{background-color:rgba(255,255,255,.7)}./*page{background-color:rgba(255,255,255,.9);filter:blur(0)}.navbar-default{background-color:rgba(255,255,255,.2);filter:blur(3px);opacity:.05;transition:.5s;z-index:100}.status-bar,.navbar-default:hover,.page-menu:hover,.status-bar:hover{filter:blur(0);opacity:.88}*/