WordPressの投稿の汎用的に使えるscssをメモしとく。
「.btn_more」ってclassつけたボタンを投稿で使うこともあるから、「a」のところで除外設定の記述をしている。
必要なければ「a:not(.btn_more)」を「a」にする。
ul・olは入れ子にしたとき余白が入ったりするから細く設定。もっといい書き方ある気がする。。
.post_area{
* + h2,h3{
margin-top: 40px;
}
* + p,h4,h5,img,blockquote,iframe,table{
margin-top: 30px;
}
ul + p,h2,h3,h4,h5,img,blockquote,iframe,table{
margin-top: 30px;
}
ol + p,h2,h3,h4,h5,img,blockquote,iframe,table{
margin-top: 30px;
}
ul + ul{
margin-top: 30px;
}
ul + ol{
margin-top: 30px;
}
ol + ol{
margin-top: 30px;
}
ol + ul{
margin-top: 30px;
}
h2{
/*お好みの見出し*/
}
h3{
/*お好みの見出し*/
}
h4,h5{
/*お好みの見出し*/
}
ul{
> li{
line-height: 2;
position: relative;
padding-left: 1.3em;
&::before{
position: absolute;
width: 12px;
height: 12px;
background-color: silver;
border-radius: 50%;
content: '';
top: 8px;
left: 0;
}
}
}//ul
ol{
counter-reset: num;
> li{
line-height: 2;
position: relative;
padding-left: 2em;
&::before{
position: absolute;
counter-increment: num;
content: counter(num) ".";
top: 0;
left: 0;
}
}//li
}//ol
a:not(.btn_more){
color: navy;
text-decoration: underline;
&[target=_blank]{
position: relative;
padding-right: 1.1em;
margin-right: .2em;
&::after{
position: absolute;
bottom: 0;
right: 0;
font-size: .8em;
font-family: 'fontawesome';
content: '\f35d';
}
}//&[target=_blank]
transition: .3s;
@media only screen and (min-width:$tbwidth) {
&:hover{
opacity: .8;
}
}//tb
}//a:not(.btn_more)
table{
width: 100%;
tr{
th{
background: silver;
@media only screen and (min-width:$tbwidth) {
width: 200px;
vertical-align: middle;
}//tb
}//th
td{
border-bottom: 2px solid silver;
background-color: white;
@media only screen and (max-width:$spwidth) {
border-left: 2px solid silver;
border-right: 2px solid silver;
}//sp
@media only screen and (min-width:$tbwidth) {
border-top: 2px solid silver;
border-right: 2px solid silver;
}//tb
}//td
th,td{
padding: .5em .8em;
@media only screen and (max-width:$spwidth) {
display: block;
}//sp
}//th,td
@media only screen and (min-width:$tbwidth) {
&:not(:first-child) th{
border-top: 2px solid white;
}
&:first-child th{
border-top: 2px solid silver;
}
&:last-child th{
border-bottom: 2px solid silver;
}
}//tb
}//tr
}//table
strong{
font-weight: bold;
}
blockquote{
background-color: silver;
padding: 15px;
border-radius: 10px;
}//blockquote
iframe{
max-width: 100%;
@media only screen and (max-width:$spwidth) {
width: 100%;
}//sp
}//iframe
}//.post_area
