【クリエイターモード】テンプレートManabitoで検索窓をロゴの横に並べて常に表示させたいです。方法を教えてください。 – makeshop よくある質問

【Manabito】テンプレートでは、デフォルトでヘッダーメニュー内に配置されている検索窓を、
HTMLとCSSを編集することでロゴの横に並べて常に表示させることができます。

変更後の表示例）

スマホ

作業の前にバックアップを保管し、元の状態に戻せるように準備したうえで編集をおこなってください。
参考：【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。

手順1：HTMLの移動

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「ヘッダー」のHTML編集画面を開きます。

ソース入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に
header-nav-search
と入力してEnterキーを押し、以下の記述を見つけてください。

<div class="header-nav-search">
    <div class="header-nav-search-input"><input id="header-search" type="search" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="キーワードから探す"></div>
    <div class="header-nav-search-btn"><a id="header-search-link" href="<{$search_form.search_url}>"></a></div>
</div>

上記をコピーしてメモ帳などに控えた後、元の位置からは削除してください。

次に、再度CtrlとFキーで
header-menu
と入力してEnterキーを押し、以下の記述を見つけてください。

</div>
<nav id="header-menu" class="header-menu">

この「</div>」と「<nav id="header-menu"...>」の間の位置に、先ほどコピーしたソースをペーストして保存します。

【移動後のイメージ】

</div>
<div class="header-nav-search">
    <div class="header-nav-search-input"><input id="header-search" type="search" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="キーワードから探す"></div>
    <div class="header-nav-search-btn"><a id="header-search-link" href="<{$search_form.search_url}>"></a></div>
</div>
<nav id="header-menu" class="header-menu">

手順2：CSSの追記

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」欄の末尾に以下のコードを追記し、検索窓の表示位置を調節してください。

追記例）

/* PC用検索窓位置調節 */
@media (min-width: 769px) {
  .header-nav-search{
    position: absolute;
    top: 20px;
    left: 230px;
    z-index: 99999;
    width: 500px;
    padding: 0;
  }
  .header-nav-search {
    border:0;
  }
}
/* スマホ用検索窓位置調節 */
@media screen and (max-width: 768px) {
  .header-nav-search {
    position: absolute;
    top: 15px;
    z-index: 9999;
    left: 120px;
    width: 160px;
    padding: 0;
  }
  .header-nav-search-btn a{
    width: 30px;
  }
  .header-nav-search-input input {
    font-size: 12px !important;
  }
  /*検索欄確保のためロゴサイズ指定*/
  .header-logo img {
    max-width: 100px;
  }
}

※各数値は調整用の例です。実際のショップのロゴサイズやデザインに合わせて数値を変更してください。

変更後は「保存」ボタンを押して適用してください。

手順1：HTMLの移動

手順2：CSSの追記

関連記事