スマホメニュー（スライド式）

front-page.php
<!--スマホのみ表示-->
<div class="sp">
<img class="sp" src="<?php echo get_template_directory_uri(); ?>/images/meieki.png" alt="名駅"><!--スマホの場合表示-->
   <p>Kawana lab</p>	
<!--スマホメニュー-->
  <div class="cp_cont">
　　	<div class="cp_offcm01">
		　　<input type="checkbox" id="cp_toggle01"> <!--チェックボックスをクリックするとcp_toggle01が起動、次行のfor="cp_toggle01"が呼応して起動  -->
		　　<label for="cp_toggle01"><span></span></label>　
		　　　<div class="cp_menu">
		　　　　<ul>
		　　　　<li><a href="<?php echo esc_url( home_url('/') ); ?>information/">コンテンツ一覧</a></li>
		　　　　<li><a href="<?php echo esc_url( home_url('/') ); ?>information/category/zhongwenlab/">中文LAB</a></li>
		　　　　<li><a href="<?php echo esc_url( home_url('/') ); ?>information/category/zhongwenlab/xuexiao">中文学校</a></li>
		　　　　<li><a href="<?php echo esc_url( home_url('/') ); ?>information/category/it-technique">IT technique</a></li>
		　　　　<li><a href="#">menu5</a></li>
		　　　　</ul>
		　　　</div>
	　　</div>
	　<!--<div class="cp_contents">
		　<h1>contents</h1>
		</div>-->
	</div>
</div><!--class="sp"ここまで-->

CSS
/*PCの場合は表示しない*/
@media screen and (min-width: 768px) {
 .sp { display: none !important; } /*fr-pageの背景選択 PCの場合は表示しない*/
}

/* スマホmenu */
.cp_offcm01 .cp_menu {
  padding-top:40px;
	position: fixed; /*元はposition:fixed; そのためメニューはスクロールに追従する*/
	top: 0;
	right: -100vw; /*右に隠す-100vw*/
	width: 200px;/*元は250px*/
	height: 50%; /*元は100%*/
	cursor: pointer;　/*カーソルの種類*/
	-webkit-transition: 0.53s transform;/*メニューの右側からの移動時間元は0.53s*/
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);/*移動量を定義*/
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99); 
  opacity: 0.8; /*要素の透明度の指定*/
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw); /* クリックした際のメニューの移動量 */
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0.5em;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #333333;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-200px); /* チェックボックスの移動量、元は-250px */
	        transform: translateX(-200px); /* 元は-250px */
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}
/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
}