Cocoonの検索ボックスのカスタマイズ

Cocoon

今回は、WordPressテーマであるCocoonの検索ボックスのデザインをカスタマイズする方法を紹介したい。

また、サイト内検索機能はWordPressに標準で付いているので、他のテーマにも流用することができる。

スポンサーリンク

検索ボックスの使い道とは

いきなり「使い道」なんてマイナスな書き方になってしまうが、WordPressにはサイト内検索を行う機能が標準機能として備わっている

それを検索ボックス(検索フォームとも)と言う。

これを使うことで、閲覧しているWebサイトの他の記事を調べることができるのだ。

だが、検索の結果が結構アバウトな作りになっているので、使用していない人もいる。私も、現状では特に必要なさそうだと思っているので設置していない。

しかし、もしあなたが辞書やWikiのようなWebサイトを運営しているのであれば使ったほうがよいだろう。閲覧者が膨大な量のコンテンツを探すときに役に立つからだ。

Cocoonの検索ボックスのCSSコードの確認

「スタイルシート (style.css)」を弄ってカスタマイズを行う前に、まずCocoonがデフォルトで設定している検索ボックスのデザインの仕組みを理解する必要がある

検索ボックスを形作っているコードは少しクセがあるので、カスタマイズを行う前にざっと見ておきたいからだ。

それでは、どのようにして上の画像のようなデザインになっているのかを説明したい。

まず、検索ボックスには「.widget_search」という要素がある。これは検索ボックスの土台となるもので、デフォルトではCSSコードが書き込まれていない。もちろん、ここをCSSで弄るのは控えたほうがよい。

そして、その1層下にform要素である「.search-boxが存在する。ここが検索ボックスの入力欄と検索ボタンをひとまとめにしている部分である。デフォルトでは上下のmarginと「position: relative;」が設定されている。カスタマイズはこの要素から手を付けていこう。

そして「.search-box」の中を見ていくと、input要素の「.search-editbutton要素の「.search-submitが存在している。このふたつがそれぞれキーワード入力欄と検索ボタンだ。入力欄の内部の間隔はpaddingにより調節され、検索ボタンは「position: absolute;」の絶対位置で入力欄に重なるように配置されている。

また、入力欄は「font-size」プロパティと「padding」プロパティによって内側から押し広げられている

最後に、虫眼鏡アイコンはspan要素の「.fas .fa-search」で設定されている。なおかつ、虫眼鏡のアイコンは疑似要素beforeを使いFont-Awesomeのものを「content」プロパティに入れて表示している。


以上をまとめてカスタマイズの方向性を再確認しよう。

まず、検索ボタンは絶対位置指定でキーワード入力欄の上に重ねて右側に配置している。

そのため、キーワード入力欄はpadding-right」プロパティを使って検索ボタンと上下左ぶんを足した間隔を空けなければならない。でなければ入力したキーワードの文字がボタンの下に隠れてしまう。

そして、検索ボックスの縦の幅は入力欄の文字の大きさと内側の間隔に依存している

つまり、この3点を利用してカスタマイズを行う場合は「.search-box」をあまり弄る必要はない。せいぜい検索ボックスの上下の間隔を調節するくらいだ。

ただし、キーワード入力欄と検索ボタンを別々にしたい場合はすこし複雑なコードを組むことになるのでそこは理解しておこう。

上記のことを頭の片隅に入れておきつつカスタマイズを行っていこう。

CSSで外観をカスタマイズしよう

カスタマイズを行う前に少々確認する事項がある。

今回紹介するカスタマイズはCocoonのスキンの利用を考慮していない。

もし使用している場合は各自で対応するよう書き換えてほしい。

子テーマの「スタイルシート (style.css)」の場所も手短に説明しておく。

まず管理者画面を開き、左側のサイドバーから「外観」にカーソルを合わせて「テーマエディター」をクリックしよう。

そして「テーマの編集」画面に入ると、あらかじめ「Cocoon Child: スタイルシート (style.css)」が表示されているはずだ。もし表示されていなければ右側のテーマファイルバーから「スタイルシート (style.css)」をクリックしよう。

画面に上の画像のページが表示されているのなら正しい場所にいる。

また、ちゃんと子テーマのファイルかどうかも確認しよう。編集しようとしているファイルが子テーマのものであることを示すダイアログが表示されていたらOK。

上記のふたつを確認したら、さっそくカスタマイズにとりかかろう。

入力欄・検索ボタン一体型

Cocoonがデフォルトで設定しているデザインを応用する。最低限のコードで簡単にデザインを変更できる。

オーソドックス

縁の色やボタンの大きさ・色を再調節したカスタマイズ。

CSSコード
/*検索ボックスのカスタマイズ(一体型・オーソドックス)*/
/*ここから*/
/*入力欄*/
.search-box .search-edit {
	padding: 8px;
	padding-right: 68px;
	border-color: #999;
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #999;
	border-radius: 0 4px 4px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*ここまで*/

上のCSSコードをコピペしてファイルを更新すると、検索ボックスの外観はこのようになる。

カスタマイズ解説
  • まず、「.search-box」は弄らない弄ってはいけない
    この要素が検索ボックスの高さの基準になっているので、デフォルトのままでよい。
    ただし、検索ボックスとその前後のブロックの間隔が狭いと感じたら、場合に応じてmarginを使おう。
  • CSSのクラスの強さを強めるために、必ず「.search-box」を前に付けよう。
    デフォルトで設定されているCSSコードに順番で負けてしまう。
  • 入力欄のカスタマイズをやっていこう。
    ここが検索ボックスの高さを決めている。
  • まず、少々太って見えたのでpaddingを調節。
    そして、検索ボタンの横幅を60pxにしているので、入力欄の右側の間隔を「padding-right: 68px;」に設定する。
    これは入力欄の8pxと検索ボタンの横幅の60pxを足した数字になる。
  • 枠の色を少し変える。
    枠の設定自体はデフォルトで決まっているので再設定する必要は無い。
    あなたの好みの色に変えても構わない。
  • 次に、検索ボタンの設定だ。
  • まず、検索ボタンの高さを検索ボックスにピッタリ合わせたい。
    なので、「height: 100%;」を使う必要がある。
    それから、「width: 60px;」で横幅を違和感のない広さにする。
  • 虫眼鏡アイコンは目立つ白に、ボタンは枠の色と同じ色にした。
    ここら辺も個人個人の好みでやってほしい。
  • 枠の丸みを合わせたいので右上と右下だけを丸める必要がある。
    border-radiusで角をひとつひとつ指定することでこれを行える。
  • 最後に、検索アイコンの高さを微調整する。
    まず、デフォルトでは「display: inline-block;」が設定されておりmarginもpaddingも受け付けない
    このため、「display: block;」を設定する必要がある。
    そして「margin-top」で上からの位置を微調整する。
  • 最後に、入力欄とボタンを押したときに強調する設定を無効化して完成。

コンパクトなCSSコードに収めつつ、どんなWebサイトにも合うオーソドックスな仕上がりになった。

また、検索ボックスのカスタマイズの基本を示すカスタマイズにもなったと思う。

オーソドックス(丸縁)

先ほどのカスタマイズの角を丸くしたデザイン。縦長の楕円形。

CSSコード
/*検索ボックスのカスタマイズ(一体型・丸縁)*/
/*ここから*/
/*入力欄*/
.search-box .search-edit {
	padding: 8px 16px;
	padding-right: 68px;
	border-color: #999;
	border-radius: 20px;
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #999;
	border-radius: 0 20px 20px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
	margin-right: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*ここまで*/

上のCSSコードをコピペしてファイルを更新すると、検索ボックスの外観はこのようになる。

カスタマイズ解説
  • 先ほどのカスタマイズから、入力欄のpaddingと入力欄・検索ボタンのborder-radiusを調節しただけである。
  • まず角を完全に落とすため、入力欄のborde-radiusを20pxにする
  • これだけだと検索ボタンが相変わらず角張ったままなので、こちらも先ほどと同じく右上と右下だけ20px丸める。
  • そして、入力欄の左側のpaddingを再調節して余裕を持たせる。
    右側のpaddingは後から個別に設定するので、「padding: 8px 16px;」として完成。

先ほどのデザインを少し変えてやるだけで、このようにポップな印象を与えることができた。

堅い印象が和らぐので、ブログ向きになったと思う。

入力欄・検索ボタン分離型

キーワード入力欄と検索ボタンを別々にしたデザイン。検索ボタンの位置を自由に配置可能。

検索ボタン右側

検索ボタンを入力欄の右側に配置する。

CSSコード
/*検索ボックスのカスタマイズ(分離型・検索ボタン右側)*/
/*ここから*/
/*検索ボックス全体*/
.search-box {
	display: flex;
	justify-content: space-between;
	height: 46px;
	width: 100%;
}

/*入力欄*/
.search-box .search-edit {
	width: calc(100% - 60px - 12px);
}

/*検索ボタン*/
.search-box .search-submit {
	position: relative;
	width: 60px;
	color: #fff;
	background-color: #ccc;
	border: 2px solid #ccc;
	border-radius: 4px;
}

.search-box .search-submit:hover {
	color: #ccc;
	background-color: #fff;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
	margin-left: 3px;
}
/*ここまで*/

上のCSSコードをコピペしてファイルを更新すると、検索ボックスの外観はこのようになる。

カスタマイズ解説
  • キーワード入力欄と検索ボタンを別々に別けるには、まず検索ボタンにかかっている「position」プロパティを設定し直す必要がある。
    position: relative;」にしよう
  • 次に、入力欄とボタンを横一列に並べる必要がある。
    「.search-box」に「display: flex;」を設定して、検索ボックスをフレックスボックス化しよう
    それから「justify-content: space-between;」を設定して入力欄とボタンの間隔を空けやすくする。
  • フレックスボックスにしてしまうと入力欄の文字の大きさとpaddingで縦の幅を調整できなくなるので、「height」プロパティで好みの高さを設定する。
    また、「width: 100%;」を指定することも忘れないようにしよう。
    検索ボックスを横いっぱいに広げるためだ。
  • 入力欄とボタンを横に並べる場合は、検索ボタンを基準にレイアウトを考えた方が簡単だ。
    ます、検索ボタンの横幅を決めよう。60pxくらいがちょうどよい。
    また、入力欄と同じ大きさで角を丸めよう。
    そして、今回はボタンにカーソルを合わせた時にhoverエフェクトでわかりやすくしたかったので、「border」プロパティで少し太めの枠を作成した。
    これでカーソルを合わせた時にボタンの背景色とアイコンの文字色を反転させてもわかりやすくなった。
  • そして、入力欄の横幅を設定する。
    CSSの「calc」関数を使って、100%からボタンの横幅の60pxと入力欄とボタンの間の間隔の12pxを引いた長さに設定しよう
    こうすることで入力欄は絶対値を引いた相対値となり、たとえ要素の横幅が変わっても柔軟に幅が変わってくれる。
  • あとは検索ボタンのアイコンの位置を調整するだけでよい。

シンプルではあるがまとまったデザインになったと思う。

カラーリングやエフェクトなどはあなたのWebサイトに合うものに変えてみよう。

検索ボタン下側

検索ボタンを入力欄の下側に配置するデザイン。

CSSコード
/*検索ボックスのカスタマイズ(分離型・検索ボタン下側)*/
/*ここから*/
/*検索ボックス全体*/
.search-box {
	display: flex;
	flex-flow: column;
	width: 100%;
}

/*入力欄*/
.search-box .search-edit {
	height: 46px;
	margin-bottom: 10px;
}

/*検索ボタン*/
.search-box .search-submit {
	position: relative;
	height: 32px;
	width: 100%;
	font-size: 16px;
	color: #fff;
	background-color: #ccc;
	border: 2px solid #ccc;
	border-radius: 4px;
}

.search-box .search-submit:hover {
	color: #ccc;
	background-color: #fff;
}

.search-box .fa-search {
	display: block;
	margin-top: 1px;
	margin-left: 3px;
}
/*ここまで*/

上のCSSコードをコピペしてファイルを更新すると、検索ボックスの外観はこのようになる。

カスタマイズ解説
  • 先ほどのカスタマイズと仕組みはさほど変わらない。
    検索ボックスをフレックスボックス化して、キーワード入力欄と検索ボタンをどのように配置するかということである。
  • ますは、検索ボタンの幅を「width: 100%;」に設定しよう。
    入力欄はデフォルトで100%になっているので必要ない。
  • 検索ボックスをフレックスボックス化したら、「flex-flow: column;」を設定しよう。
    これで入力欄と検索ボタンを縦に並べることができる。
  • 入力欄とボタンを縦に並べると検索ボックス全体のheightを指定する方法で検索ボックスの縦の幅を設定することができない
    このため、個別にheightプロパティで設定する必要がある。
    今回は、入力欄の縦の幅を46pxに設定した。
  • また、入力欄とボタンの間隔は、入力欄に「margin-bottom」プロパティを使用する。
  • 最後に、検索ボタンの縦の幅とアイコンの文字サイズ、アイコンの位置を調整して完成。

検索ボタンは横より下にあったほうが自然だと思う人はこのカスタマイズが合うだろう。

最後に

検索ボックスはCocoonだけのものではなく、WordPressに元から存在しているものである。そのため、クラス名がいきなり変わって今回紹介したCSSコードが効かなくなるといったトラブルはほぼ発生しないはずだ。

ただし今回のカスタマイズではAMPに対応するため、Cocoon側がデフォルトで設定しているCSSを利用しコンパクトにまとめた省エネなコードを組み立てた。そのため、Cocoonのアップデートにより親テーマのstyle.cssに変更が入った場合はレイアウトやデザインが崩れてしまうかもしれない。

そのときは各自で対応してほしい。


今回は、検索ボックスの簡単なカスタマイズをいくつか紹介した。

私は今のところ検索ボックスを設置していないが、Cocoonのモバイルボタン上には存在しているため一応形くらいは整えておこうと思ったからだ。

また、このカスタマイズを行っている途中で、いくつかCSSの応用を発見したのでそれも後日紹介しておきたい。

この記事が役に立てば嬉しい。