【Vaster2】スマホの時のメニューバーにGoogle カスタム検索を追加

Googleカスタム検索を追加

リスト内に出るようにしました。

元のデザインはこちら

追記：当初のものより少し HTML の構造を変更しました。また、メニューバーを上部に固定するとき用の CSS を追加しました。（コメントアウトしてあります）

<div class="cp_menu">
 <div class="cp_menu-inner">
  <div class="btn-content">
  <label for="cp_menu_bar1"><span id="menu-btn"><i class="fas fa-bars" aria-hidden="true"></i> MENU</span></label>
  </div>
<input type="checkbox" name="radio" id="cp_menu_bar1"/>
<ul id="link1">
 <li><a href="https://sutasutashiki.blogspot.com">ホーム</a></li>
 <li><a href="#Label1">カテゴリー</a></li>
 <li><a href="#PopularPosts1">よく読まれている記事</a></li>
 <li><a href="#related-posts-widget">関連記事</a></li>
 <li class="menu_li">
<script>
 <!-- ここにコードを貼り付け -->
 </li>
</ul>
 </div>
</div>
<style>
@media screen and (min-width:769px){/*PC時に非表示する要素*/
.cp_menu {
    display: none;
}}
@media screen and (max-width:770px){/*スマホ時に表示する要素*/
.cp_menu {
 /* margin: 52px auto; メニュー上部固定用 要数値調節 */
}
.cp_menu-inner {
 max-width: 460px;
 margin: 0 auto;
 padding: 0;
 font-size: 1.2em;
 background: #1b2538;
 /* position: fixed; メニュー上部固定用 */
 /* top: 0; メニュー上部固定用 */
 /* z-index: 2; メニュー上部固定用 */
 /* margin-left:0px; メニュー上部固定用 */
 / *height: auto; メニュー上部固定用 */
}
.btn-content {
 text-align: left;/* ボタン位置 */
}
.cp_menu label {
 width: 25%;
 display: block;
 position: relative;
 margin: 0 0 2px 0;
 padding: 12px;
 line-height: 1.5;
 color: #ffffff;
 background: #1b2538;
 cursor: pointer;
}
#cp_menu_bar1 { /* チェックボックス非表示 */
 display: none;
}
.cp_menu ul {
 margin: 0;
 padding: 0;
 background: #f4f4f4;
 list-style: none;
}
.cp_menu li {
 overflow-y: hidden;
 max-height: 0;
 transition: all 0.5s;
 padding: 0;
 line-height: 1.5em;
}
.cp_menu a {
 display: block;
 padding: 10px;
 text-decoration: none;
 color: #000000;
 line-height: 1.5;
 box-sizing: border-box;
 border-bottom: 1px solid rgba(78,78,78,0.3);
}
li.menu_li {
 line-height: 3;
    padding-left: 5px;
}
/*リストが増えたらULごとに追加してください*/
#cp_menu_bar1:checked ~ #link1 li {
 max-height: 3.0em;
 opacity: 1;
}}
</style>