dreamark

<div class="ads-01"> 親ボックス

<!-- 広告ユニット名 -->　スロット１
<ins class="adsbygoogle ads-slot-01"　ここにクラス名を足しています
     style="display:block"
     data-ad-client="ca-pub-×××"
     data-ad-slot="×××"
     data-ad-format="rectangle"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});

dreamark

.ads-01{
  clear:both;
  overflow:hidden;
  margin:24px 0;
}

.ads-slot-01,.ads-slot-02{
  float:left;
  width:336px;
  height:280px;

dreamark

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

dreamark

.toggle,.close{
  display: none;
}

@media only screen and (max-width: 767px) {
  .menu{
    display: none;
    width: 100%;
  }

dreamark

<!-- トグルを追加する-->
  <div class="toggle"><a href="#">MENU</a>
  </div>
  
<!-- class名を追加する-->
  <ul class="menu">
  
<!-- closeボタンを付けるト-->
  <li class="close">
    <a href="#">close</a>

dreamark

<style type="text/css">
/*コラム枠*/
  .point,.column,.attention{
    position: relative;
    border: 1px dashed #1D3557;
    margin: 32px 16px;
    background-color: #e5e5e5;
    padding: 50px 20px 20px;
    font-size: 90%;
  }

dreamark

<div class="navi">
  <div class="toggle"><a href="#">MENU</a></div>
    <ul class="menu">
      <li><a href="リンク先URL">表示名</a></li>
      <li><a href="リンク先URL">表示名</a></li>
      <li><a href="リンク先URL">表示名</a></li>
      <li><a href="リンク先URL">表示名</a></li>
      <li>
      <div class="navi-search">
        <form class="search-form" role="search" action="ブログのURL/search" method="get">

dreamark

<nav id="recomend">
  <div class="navmenu">
    <span class="navmenuInner">
      <span class="image"><a href=""><img src="画像のURL" alt=""></a><br></span>
      <span class="date">日付け</span><br>
      <span class="title"><a href="">おすすめの記事や注目の記事等を表示させる事が出来ます</a></span>
    </span>
    <span class="navmenuInner">
      <span class="image"><a href=""><img src="画像のURL" alt=""></a><br></span>
      <span class="date">日付け</span><br>

dreamark

/*コラム枠*/
  .point,.column,.attention{
    position: relative;
    border: 1px dashed #1D3557;
    margin: 32px 16px;
    background-color: #e5e5e5;
    padding: 50px 20px 20px;
    font-size: 90%;
  }

dreamark

/*マーカー*/
  .markb {
    background: linear-gradient(transparent 30%, #87C8EF 30%);
    background: -moz-linear-gradient(transparent 30%, #87C8EF 30%);      /* Firefox用 */
    background: -webkit-linear-gradient(transparent 30%, #87C8EF 30%);   /* Safari用 */
    background: -ms-linear-gradient(transparent 30%, #87C8EF 30%);       /* IE用 */
    background: -o-linear-gradient(transparent 30%, #87C8EF 30%);        /* Opera用 */
    text-decoration: none;
  }
  strong {