Cocoonの検索窓を自由にカスタマイズ！設置・デザイン変更・削除の全てを解説

WordPressテーマ「Cocoon（コクーン）」でブログを開設すると、サイドバーに『検索窓』が標準で備わっています。

この検索窓について…

「どこで設定すればいいの？」
「検索窓のデザインを変更したい」
「むしろ検索窓を消したい…」

といった細かい悩みが出てくるものです。

この記事では、Cocoonで検索窓を「正しく設置する方法」や「デザインをカスタマイズする方法」、それから不要な場合の「消す方法」まで、分かりやすく解説します！

Cocoonで検索窓を実装する方法
Cocoonの検索窓を消す方法
まとめ

Cocoonで検索窓を実装する方法

WordPressのテーマが「Cocoon」の場合、実装方法は3つあります。

Cocoonで検索窓を実装する方法

「検索」のウィジェットを使用する←1番カンタン！
「ブロック」のウィジェットを使用する
「カスタムHTML」のウィジェットを使用する

「検索」のウィジェットを使用する

検索窓の設置方法

STEP 1
ウィジェットを開く

「ダッシュボード → 外観 → ウィジェット」で、ウィジェットの設定画面を開く。
STEP 2
ウィジェットを移動させる

利用できるウィジェットより「検索」を選び「サイドバー」を選択する。

設定画面

「ブロック」のウィジェットを使用する

検索窓の設置方法

STEP 1
ウィジェットを開く

「ダッシュボード → 外観 → ウィジェット」で、ウィジェットの設定画面を開く。
STEP 2
ウィジェットを移動させる

利用できるウィジェットより「ブロック」を「サイドバー」に移動させる。

設定画面
STEP 3
コードを入力する
「ブロックHTML」のなかに、以下のコードを入力して保存する。
```

```

「カスタムHTML」のウィジェットを使用する

検索窓の設置方法

STEP 1
ウィジェットを開く

「ダッシュボード → 外観 → ウィジェット」で、ウィジェットの設定画面を開く。
STEP 2
ウィジェットを移動させる

利用できるウィジェットより「カスタムHTML」を「サイドバー」に移動させる。

設定画面

STEP 3

コードを入力する

「内容」のなかに、以下のコードを入力して保存する。

<form class="search-box input-box" method="get" action="ここにサイトURLを入れる">
	<input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value="">
	<button type="submit" class="search-submit" aria-label="button"><span class="fas fa-search" aria-hidden="true"></span></button>
</form>

「ここにサイトURLを入れる」という箇所に、あなたのブログのURLを入れてください。
例えば「https://11neko.com/」なら「action=”https://11neko.com/”」という形です。

設置場所をサイドバーに統一してますが、違う場所にも設置できます。

Cocoonの検索窓を消す方法

検索窓を消す方法は、とても簡単です！

自身で追加していない限り、検索窓は基本的にサイドバーのところにある1個だけ。
この場合、以下の手順で「ウィジェットの削除」をおこなえば、ブログから検索窓を消すことができます。

Cocoonの検索窓を消す方法

STEP 1
ウィジェットを開く

「ダッシュボード → 外観 → ウィジェット」で、ウィジェットの設定画面を開く。
STEP 2
ウィジェットを移動させる
サイドバーのより、以下のコードがと書かれているブロックを探し、削除のボタンを押す。
```

```
設定画面

ちなみに「テーマファイルエディター」を開いて「style.css」に以下のコードを入力しても、検索窓を消すことはできます。

.search-box {
	display: none;
}

ただ、これは見えていないだけで、検索窓のコードは残ったままになります。
これだと、Googleなどの検索エンジンが「中身はあるけど見えない部分」として読み取ることがあるため、あまり好ましくありません。

また、テーマがアップデートされたときに設定が外れてしまうこともあります。
そのため「display:none;」で消すよりは、ウィジェットを削除する方がおすすめです。

まとめ

Cocoonの検索窓は、ブログの見た目や使いやすさに直結する大切な部分です。
「実装・デザイン・削除」の3つをしっかり理解しておけば、読者にとって快適なサイトになります。

紹介したように、検索窓は「設置→見た目の調整→不要なら削除」という流れで扱えばOKです。
難しいコードを編集しなくても、Cocoonの機能だけで十分対応できます。

もし思い通りの表示にならないときは、まずはウィジェットやブロックの設定を見直してみてください。