bootstrap4.5 "아이네"

머리 へいれるもの

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>

body{font-size:19px !important;}

*{
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif !important;
}

/********************** 見出し **********************/
h1,h2,h3,h4{
  line-height:1.6em;
}

h1{font-weight:bold;

} 

h2{font-weight:bold;

}

h3{font-weight:bold;

}

h4{font-weight:bold;

}
/*********************************************************/


p{
  line-height:1.9;
}


/************* IMG ****************/
img{
  max-width:100%;
  margin:20px 0;
} 

#pankuzu{
  font-size:14px;
} 


.eye-single{
  display:block;
  margin:30px auto;
  max-width:800px;
}   
@media (max-width: 700px){
  img  {
    max-width:100%!important;
  }
}
/*********************************************/

/***********************header****************/ 
.iine-contents-header{
  background:#666;
  padding:12px;
  text-align:center;
  font-size:20px;
  margin-bottom:20px;
}

.iine-contents-header a{
  text-decoration:none;
  color:#fff !important;

}
/************************************************

/***ハンバーガーメニュー****/
#nav-drawer {
  position: fixed;
  top:20px;
  right:20px;
  z-index:999;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #000;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  right:0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  text-align:left;
}

#nav-content ul{margin:0;padding:0;}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-content  img{
  width:90% !important;
  display:block;
  margin:12px auto;

}

#nav-content li {
  background:#666;
  border-top:1px solid white;
  padding:12px;
  color:#fff;
  margin:0;


}
/*******************************************/


</style>

몸에 入れるもの

<header class="iine-contents-header">
<a href="#">サイト名</a>


<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">


<ul>
   <a href="#"><li>テキストテキストテキスト</li></a>
<a href="#"><li>テキスト</li></a>
<a href="#"><li>テキストテキスト</li></a>
<a href="#"><li>テキストテキスト</li></a>

</ul>

</div>
</div>  

</header>   
<div class="container">


<nav id="topicPath"><?php the_breadcrumb() ?></nav>

<h1 class="my-5"><?php echo get_the_title(); ?></h1>
<div class="eye-single">
<?php the_post_thumbnail(); ?>
</div>
<?php echo replace_body($post->post_content); ?>  


<?php get_footer(); ?>
</div>

</body>