【ブログデザイン改善】検索フォーム設置

/* 検索フォーム */
add_action( 'lightning_site_header_logo_after', 'my_header_search' );

function my_header_search() {
    ?>
<div class="header-search">

    <button class="search-toggle" aria-label="検索">
            <i class="fas fa-search"></i>
    </button>

    <div class="search-form-wrap">
        <?php get_search_form(); ?>
    </div>

</div>
    <?php
}

/* =========================================
   ヘッダー検索まわりのスタイル
   ========================================= */

/* 全体（検索エリアの位置調整） */
.header-search {
    position: relative; /* 自分の元の位置を基準に移動可能にする */
    top: -15px;         /* 上方向に15px移動して微調整 */
}

/* =========================================
   虫眼鏡ボタン（検索トグル）
   ========================================= */
.search-toggle {
    background: transparent;   /* 背景なし */
    border: none;              /* 枠線なし */
    font-size: 24px;           /* アイコンサイズ */
    cursor: pointer;           /* マウスを乗せた時にポインター表示 */
    padding: 0;                /* 余白なし */
    color: var(--main-color);  /* メインカラー（CSS変数） */
    transition: all 0.3s ease; /* 色や動きの変化を滑らかにする */
}

/* ホバー時（マウスを乗せた時） */
.search-toggle:hover {
    color: var(--accent-color); /* アクセントカラーに変更 */
    transform: translateY(-1px); /* 少し上に動かす */
}

/* =========================================
   ヘッダー全体レイアウト
   ========================================= */
.site-header-container {
    align-items: flex-end; /* 子要素（ロゴ・検索など）を下揃えにする */
}

/* =========================================
   検索フォーム（テキスト入力）
   ========================================= */
.header-search input[type="text"] {
    width: 240px;              /* 横幅 */
    height: 40px;              /* 高さ */

    padding: 0 15px;          /* 左右の内側余白 */

    border: 2px solid var(--main-color); /* 枠線 */
    border-radius: 999px;     /* 丸い（ピル型）デザイン */

    background: #fff;         /* 背景色 */
    color: var(--text-color); /* 文字色 */

    transition: border-color 0.3s ease,
                box-shadow 0.3s ease; /* フォーカス時の変化を滑らかに */
}

/* フォーカス時（入力欄をクリックした状態） */
.header-search input[type="text"]:focus {
    outline: none; /* デフォルトの青い枠を消す */
    border-color: #ffaa00; /* 枠線色を変更 */
    box-shadow: 0 0 0 4px rgba(255,143,179,.15); /* 外側に光るような影 */
}

/* =========================================
   検索ボタン（送信ボタン）
   ========================================= */
.header-search input[type="submit"] {
    padding: 0 18px;          /* 横の余白 */
    border: none;             /* 枠線なし */
    border-radius: 999px;     /* 丸ボタン */
    background: var(--main-color); /* 背景色 */
    height: 40px;             /* 高さ統一 */
}

/* ホバー時 */
.header-search input[type="submit"]:hover {
    background: #ffaa00;      /* 色変更 */
    transform: translateY(-1px); /* 少し浮かせる */
}

/* =========================================
   レスポンシブ（スマホ対応）
   ========================================= */
@media (max-width: 991px) {
    .header-search {
        display: none; /* スマホでは検索エリアを非表示にする */
    }
}

/*
 * HTMLの読み込みが完了した後に処理を実行する
 */
document.addEventListener('DOMContentLoaded', function() {

    const button = document.querySelector('.search-toggle');
    const form = document.querySelector('.search-form-wrap');

    if (!button || !form) return;

    button.addEventListener('click', function() {
        form.classList.toggle('active');
    });

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.header-search')) {
            form.classList.remove('active');
        }
    });

});

/* =========================================
   虫眼鏡ボタン（検索トグル）
   ========================================= */
.search-toggle {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    color: var(--main-color);
    transition: all 0.3s ease;
}

/* ホバー時（マウスを乗せた時） */
.search-toggle:hover {
    color: var(--accent-color);
    transform: translateY(-1px);
}

/* =========================================
   検索欄 検索ボタン
   ========================================= */
/* 検索欄 検索ボタン 初期は非表示 */
.search-form-wrap {
    position: absolute; /* 親要素を基準に絶対配置 */
    right: 0; /* 親要素の右端に配置 */
    top: 40px; /* 上から40px下に配置 */

    background: #fff; /* 背景色を白にする */
    padding: 10px; /* 内側の余白 */

    border: 1px solid var(--border-color); /* 枠線 */
    border-radius: 12px; /* 角を丸くする */

    box-shadow: 0 4px 12px rgba(0,0,0,.08); /* 影を付ける */

    opacity: 0; /* 完全に透明 */
    visibility: hidden; /* 非表示にする */

    transform: translateY(-10px); /* 上へ10px移動 */

    transition:
        opacity .3s ease,     /* 透明度を0.3秒で変化 */
        transform .3s ease,   /* 移動を0.3秒で変化 */
        visibility .3s;       /* 表示状態を0.3秒で切替 */
}		

/* 検索欄 検索ボタン 表示時 */
.search-form-wrap.active {
    opacity: 1; /* 不透明にして表示 */
    visibility: visible; /* 表示状態にする */

    transform: translateY(0); /* 元の位置へ戻す */
}

/* =========================================
   ヘッダー全体レイアウト
   ========================================= */
.site-header-container {
    align-items: flex-end;
}