settings
shiopon01.icon 吹き出しテストです!
参考
タグを可愛くする
code:style.css
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
吹き出し
code:style.css
.deco-\{, .deco-\} {
font-weight: bold;
color:#fdfdfd; /* 吹き出しのテキストカラーを白くしてみたTsujimoto.icon */
padding: 1.2rem;
border-radius: .5rem;
margin: auto 1rem;
display: inline-block;
max-width: calc(100% - 100px); /* 長いセリフの折り返しをいい感じにする */
vertical-align: top;
}
/* 吹き出し内のリンク色 */
.deco-\{ a,
.deco-\} a {
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.deco-\{, .deco-\} {
padding: 1rem;
}
}
左吹き出し
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-200%) translateY(calc(1em - 80%)); /*firefoxで吹き出しの位置がずれるので補正*/
width: 0;
content: "";
border-width: 0 0 .6em .6em;
border-style: solid;
}
右吹き出し
code:style.css
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(100%) translateY(calc(2rem - 80%));
width: 0;
content: "";
border-width: 0 .6em .6em 0;
border-style: solid;
}
赤吹き出し
code:style.css
.deco-\! {
}
.deco-\!:before, .deco-\!:after {
}
img をセンタリングする
code:style.css
/* imgをセンタリング */
.line img.image{
display: block;
margin: 0 auto;
}
[* ]<-強調
code:style.css
.level-1{
background: linear-gradient(transparent 60%, #ffeb36 60%); }
[** ]<-小見出し
code:style.css
.line strong.level-2{
display: block;
position: relative;
padding-left: 16px;
}
.line strong.level-2:before{
content: '';
position: absolute;
width: 5px;
height: 100%;
top: 0;
left: 0;
}
[*** ]<-見出し
code:style.css
.line strong.level-3{
display: block;
position: relative;
font-size: 200%;
line-height: 160%;
text-align: center;
margin: 12px auto 18px;
font-weight: 100;
}
.line strong.level-3:after{
position: absolute;
content: '';
width: 100px;
top: 0;
bottom: -0.5em;
left: 0;
right: 0;
margin: 0 auto;
}