Cocoonユーザーさんに
カスタマイズお疲れ様です＾＾
何か御用があれば、記事下にあるコメント欄よりどうぞ❦
スポンサーリンク

Cocoon検索フォームのカスタマイズ！デザイン変更、入力フォーム文字変更

Cocoon検索フォームのカスタマイズ

WordPressテーマCocoonのデフォルト『検索窓・検索フォーム・検索ボックス』言いかたはさて置き『サイト内検索』のカスタマイズをご紹介します。

  1. 検索フォームの線の色
  2. 検索ボタン『虫めがね』アイコン変更
    • アイコンを別アイコンに
    • 文字列に
    • 画像に
  3. デザインのプチ変更例
  4. フォーム内の（プレースホルダー）文字列を変更

3番目まではCSSだけで編集、4番目はPHPをチョコっと触ります。

※検索フォームの設置について。『外観』－『ウィジェット』より『検索』ウィジェットを任意の場所に設置。ウィジェットタイトルを付けるなどしてください。

スポンサーリンク
スポンサーリンク

検索ボタン（虫眼鏡アイコン）をCSSで変更

Cocoonデフォルト検索フォームのボタン：虫めがねアイコンはFontAwesomeのアイコンを使ってます。アイコンを変更する3つの方法をご紹介❦

  • 別のアイコンに変更
  • 文字に変更
  • 画像に変更

虫眼鏡アイコンを『別のアイコン』に変更

検索ボタンのアイコン・フォント色を変更

虫メガネアイコンはFont Awesomeのアイコンフォントが使わてます。例えば手のマーク『』に変更してみます。

LINKhand-point-up｜Font Awesome

指定方法が不明な場合。目次2章：『アイコンフォントをCSSで指定しブログに表示』あたりをどうぞ。

LINKWordPress・CMSでFont Awesomeアイコンフォントを導入！最新アイコンが表示しないとき、バージョンアップ方法付き

  • Font Awesomeの『アイコン』を探したい場合

LINKFont Awesomeの無料アイコン

/* 検索ボタンのアイコン変更 */
.search-submit::before {
	content: "\f0a6"; /* アイコン変更 */
	color: #ca8eff; /* 色変更 */
	font-size: 1.5em; /* 大きさ変更 */
}

※色は適当です❦色変更が不要ならcolorの項目1行を削除。またはカラーコードで検索して好きな色をどうぞ。

検索ボタンを『文字列』に変えたい

検索ボタンを文字に変更したいとき

検索ボタンの虫めがねアイコンを『検索』と言う文字列に変更した場合。

/* 検索ボタンを文字列に */
.search-submit::before {
	content: "検索"; /* 文字 */
	color: #505050; /* 色変更：不要なら、この1行削除 */
	font-size: 1em; /* 大きさ変更：0.8emで1文字の0.8倍 */
	padding-right: 0.5em; /* 右の余白調整：1emで1文字分あく */
	padding-top: 23px;
}
/* フォントの位置、微調整 */
.search-submit {
	top: 8px; /* 上下に位置調整したい時 */
}
  • content: "検索";の""に囲まれた文字を任意の文字列に
    • 検索・探す・見る・Check!・のぞく?…など？
  • あとはCSSに書いた通り❦

アイコンを『画像』に変更

検索ボタンに画像を入れたver

検索ボタンを画像にするには、画像縦横の比率によってwidth（幅）height（高さ）を調整する必要があります。

  • 画像が四角（正方形）に近ければ、幅・高さは45px位で様子を見てください。
  • 長方形の場合は横長なら幅を大きくし任意の数値を：width: 75px;
    • 要素の検証などでチェックし枠からはみ出さない数値を選ぶのがコツ
  • 上下の位置調整はtop: 1px;の数値を変更してください。
/* 検索ボタンを画像に */
.search-submit:before {
	content: "";
	background: url(画像のパス) no-repeat;
	background-size: contain; /* 指定サイズに合わせたい場合：テキスト参照 */
	position: absolute;
	right: 1px; /*右から1pxの位置で表示、2pxで右余白が広くなる */
	top: 1px; /* 上から1px、2pxで上の余白が開く */
	width: 45px; /* 任意の数値 */
	height: 45px; /* 画像にあわせて任意 */
}
説明ぼうや
説明ぼうや

width・heightを決めたら、right・topで微調整できるよ☆彡

画像のパスを指定する2つの方法

  • 画像のパス指定をする際、おすすめな方法は子テーマ内にimagesフォルダを入れる方法です。
  • 目次1章『画像URL、指定方法』に理由など詳細あり

LINKCocoon！headerロゴ・ヘッダー背景画像をCSSだけでページ毎にスタイル変更するカスタマイズ

  • メディアにアップロードした画像のパス確認する方法：目次1章：1.2あたりを。

LINKWordPress初心者に画像追加時のメディアを説明！画像サイズ変更・画像のURLはどこ

画像の幅・高さを指定サイズに合わせたい場合

width・heightで指定したサイズにしたい場合、上記のCSSbackground-size: contain;をbackground-size: cover;に変更してください。

または領域に合わせたサイズに画像を作成してbackground-size: contain;を削除し、width・heightを画像サイズのとおりに指定すれば、キレイに仕上がります。

検索フォームのデザイン、プチ変更

検索ボックスの背景色

背景色を付けたい：※色は適当だから、カラーコードで検索して選んでね❦

/* 検索ボックスの背景色 */
.search-edit {
	background: #feddff; /* 背景色変更：ピンク */
}

検索ボックスのボーダーを変更

背景・ボーダーの変更：ピンク

/* 検索ボックスの背景色 */
.search-edit {
	background: #ffecfd; /* 背景色変更:淡いピンク */
}
/* ボーダー */
.search-edit {
	border: 1px solid #ddd; /* 太さ 線の種類 色 */
	/* border-radius: 5px; 角丸 */
}

検索ボタンに背景を付けたデザインに変更

Cocoon検索フォームのボタンに背景を付けたデザイン・グレーとピンク

入力フォームは通常で、ボタン部分だけに背景を付けたいとき。

  • デザイン1、背景グレー
  • デザイン2、背景ピンク

ボタン背景を灰色に

ボーダー・ボタン、グレーver

/* 検索ボタンに背景を付ける */
.search-submit {
	border: 1px solid #ddd;
	top: 0;
	background: #dbdbdb;
	color: #333;
	padding-left: 15px;
}
/* ボーダー */
.search-edit {
	border: 1px solid #ddd; /* 太さ 線の種類 色 */
	/* border-radius: 5px; 角丸 */
	/*border-right: none;*/ /* 右ボーダーが気になるとき、コードのコメント（スラッシュ・アスタリスク）を削除 */
}

ピンク色に

ボーダー・ボタンピンクver

/* 検索ボタンに背景を付ける */
.search-submit {
	border: 1px solid #fedafb; /* 色は任意のものに */
	top: 0;
	background: #fcd9f9; /* 色は任意のものに */
	color: #aaa; /* アイコンの色 */
	padding-left: 15px; /* 色は任意のものに */
}
/* ボーダー */
.search-edit {
	border: 1px solid #ffdafb; /* 太さ 線の種類 色；任意の色に */
	/* border-radius: 5px; 角丸 */
	/*border-right: none;*/ /* 右ボーダーが気になるとき、コードのコメント（スラッシュ・アスタリスク）を削除 */
}

検索ボックスの枠線（ボーダーの角）を丸く

検索ボックスを角丸にしたいとき。

border-radiusの値を30px、3pxに指定した時の違いは画像のとおりです。

SearchFoam検索ボックスの角丸、数値の比較。上は3pxで少し角が丸い。下は30pxの指定で角が約半径に見える様子

.search-edit,
.search-box input[type="text"] {
	border-radius: 30px; /* 3px位ならナチュラルかも */
}
追記

2019年6月、Cocoonの仕様変更にて、追記

input[type="text"]を追加しないと反映しなくなったため。

スマホ・PC大画面以外、検索フォームの幅を短く・中央寄せ

スマホ、PC大画面（サイドバーに設置済みのとき）は検索フォームの幅は100%が良いけど、PCでサイドバーが表示されないとき『画面いっぱいに検索フォームはいらない…』ってとき。

サイドバーが下に来て1カラムになった時：幅を狭くするカスタマイズ前後

タブレットサイズ：カスタマイズ前後

サイドバーにウィジェットを設置（PC中画面で1カラム）用スタイル

@media screen and (max-width: 1030px) and (min-width: 481px) {
	.search-box {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

モバイルの幅：480px以下、PCで1030pxまではサイドバーはmainコンテンツ下にあるので、タブレット表示のときは幅80%、中央寄せとしてます。

1カラムに設定済み・サイドバーに設置してないとき用スタイル

@media screen and (min-width: 481px) {
	.search-box {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}
  • モバイルの幅：480px以下では幅100％で表示。
  • それ以外は80％で表示。

検索入力フォームの『文字列』を変更したい

入力フォームの文字列変更：前・後

入力フォームにあるプレースホルダーの文字列を変えたい場合。

親テーマにあるsearchform.phpをFTPソフトなどでPC（ローカル）側子テーマにダウンロード。

LINKFTPって何？初心者に説明！ファイルの中身とアップロードなどWordPressでの基本

  • 親テーマのパス

/domain.com/public_html/wp-content/themes/cocoon-master/searchform.php

  • 子テーマのパス

/domain.com/public_html/wp-content/themes/cocoon-child-masterフォルダ内にsearchform.phpをアップロード

以下を変更すればOKです。14行目

入力フォームの文字列placeholderの変更する場所、cocoonテーマの編集よりsearchform.php14行目、ビフォーアフター

<input type="text" placeholder="<?php _e( 'サイト内を検索', THEME_NAME ) ?>" name="s" class="search-edit">

プレースホルダー内『赤字の部分』を削除して、任意の文字に。内容は『サイト内を検索』とその翻訳を表示

任意の文字を例えると

  • Search within the site
  • 『ビバ★りずむ』内検索
  • 検索キーワードをどうぞ
  • サイト内検索する？

管理画面上で編集ができない場合は、TeraPadなど文字コードUTF-8bomなしが使えるテキストエディタで編集・上書きを。

またはサーバーのWEB上にあるFTPを使って編集してくださいね。

説明ぼうや
説明ぼうや

『サーバー名　FTP』で検索でヒットするサーバーが多いよ！

さいごに

他にも検索フォームのカスタマイズはありますが、色の変更・画像を導入・入力フォームの文字列変更をするだけでサイトの個性が出てきますよね。

AMP対応済みページにもstyleを付けたい場合は、style.cssとは別にamp.cssにもコピペしてください。

  • ページ内容でもし不明点があれば、コメント欄どうぞ
  • スタイルが反映しないとき、リンク先をチェック！

LINKCSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと

それでは、かうたっくでした❦

スポンサーリンク
スポンサーリンク
この記事が気に入ったら
いいね！しよう
最新情報をお届けします。
Cocoonカスタマイズ
カスタマイズ ステータスコード ローカル環境 要素の検証
シェアする
フォローする
スポンサーリンク
スポンサーリンク
かうたっく
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

「ビバ★りずむ」ポリシー
トップへ戻る
タイトルとURLをコピーしました