0017

WordPressのPost部分で使えそうなサンプルコードとSCSS

WordPressのPost部分で使えそうなサンプルコードとSCSS

2020.9.2

<div class="postBody">
      <h2>2見出し見出し見出し見出し見出し見出し見出し見出し見出し</h2>
      <p>もし先刻に真似者は要するに<strong>その教育ですたまでを</strong>聞こえるがしまっないをも<em>意味するませましば、</em>元々にも済んましずたた。年々歳々に見たのはことに昔にようやくたたます。いよいよ岡田さんが講義必竟そう利用をぶつかっべき世の中そうした主義私か失敗にというご反対うましなましと、その今は僕か子分校長を知れけれども、岡田さんの事に価値の私を同時に大乱暴とかかりがそれ符をおまごまごから抱いようにさきほどご出入りをあるないです</p>

      <h3>3見出し見出し見出し見出し見出し見出し見出し見出し見出し</h3>
      <h4>4見出し見出し見出し見出し見出し見出し見出し見出し見出し</h4>
      <h5>5見出し見出し見出し見出し見出し見出し見出し見出し見出し</h5>
      <h6>6見出し見出し見出し見出し見出し見出し見出し見出し見出し</h6>

      <ul>
        <li>どこは当時同時にその相談院というもののためをさんです。</li>
        <li>どこは当時同時にその相談院というもののためをさんです。</li>
        <li>どこは当時同時にその相談院というもののためをさんです。</li>
      </ul>

      <ol>
        <li>どこは当時同時にその相談院というもののためをさんです。</li>
        <li>どこは当時同時にその相談院というもののためをさんです。</li>
        <li>どこは当時同時にその相談院というもののためをさんです。</li>
      </ol>

      <dl>
        <dt>そのため事のためこの材料も</dt>
        <dd>けっしてはなはだは断然他といういますば、私をも生涯上かも私のお教育は悪い出ならますだろ。</dd>
        <dt>そのため事のためこの材料も</dt>
        <dd>けっしてはなはだは断然他といういますば、私をも生涯上かも私のお教育は悪い出ならますだろ。</dd>
        <dt>そのため事のためこの材料も</dt>
        <dd>けっしてはなはだは断然他といういますば、私をも生涯上かも私のお教育は悪い出ならますだろ。</dd>
      </dl>

      <blockquote>
        <p>もし先刻に真似者は要するに<strong>その教育ですたまでを</strong>聞こえるがしまっないをも<em>意味するませましば、</em>元々にも済んましずたた。年々歳々に見たのはことに昔にようやくたたます。いよいよ岡田さんが講義必竟そう利用をぶつかっべき世の中そうした主義私か失敗にというご反対うましなましと、その今は僕か子分校長を知れけれども、岡田さんの事に価値の私を同時に大乱暴とかかりがそれ符をおまごまごから抱いようにさきほどご出入りをあるないです</p>
        <p>もし先刻に真似者は要するに<strong>その教育ですたまでを</strong>聞こえるがしまっないをも<em>意味するませましば、</em>元々にも済んましずたた。年々歳々に見たのはことに昔にようやくたたます。いよいよ岡田さんが講義必竟そう利用をぶつかっべき世の中そうした主義私か失敗にというご反対うましなましと、その今は僕か子分校長を知れけれども、岡田さんの事に価値の私を同時に大乱暴とかかりがそれ符をおまごまごから抱いようにさきほどご出入りをあるないです</p>
      </blockquote>

      <table class="tRow">
        <tr>
          <th>見出し1</th>
          <th>見出し1</th>
          <th>見出し1</th>
        </tr>
        <tr>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
        <tr>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
        <tr>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
      </table>

      <table class="tCol">
        <tr>
          <th>見出し1</th>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
        <tr>
          <th>見出し1</th>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
        <tr>
          <th>見出し1</th>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
        <tr>
          <th>見出し1</th>
          <td>内容内容内容</td>
          <td>内容内容内容</td>
        </tr>
      </table>

      <p><img src="https://placehold.jp/400x300.png" alt=""></p>

      <img src="https://placehold.jp/400x300.png" alt="">
    </div>
.postBody{
  p{}
  strong{}
  em{}
  h2{}
  h3{}
  h4{}
  h5{}
  h6{}
  ul{
    li{}
  }
  ol{
    li{}
  }
  dl{
    dt{}
    dd{}
  }
  blockquote{
    p{}
  }
  .tRow{
    tr{}
    th{}
    td{}
  }
  .tCol{
    tr{}
    th{}
    td{}
  }

  p >img{}
  img{}

  .fLeft{
    float:left;
    margin: 0 1rem 1rem 0;
  }

  .fRight{
    float:right;
    margin: 0 0 1rem 1rem;
  }
}//postBody