投稿エリアのcssメモ

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

ABOUT US

yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。