アメブロの検索ボックスの色を変えるカスタマイズ方法（新CSS）

アメブロの新CSS編集用デザインで、ブログ内検索用の検索ボックスの色をデザインに合わせて好みの色に変更するカスタマイズ方法です。

通常時、入力時、ボタンのマウスホバー時などについて、それぞれ説明します。

CSSを編集しますので、やり方がわからない場合は、先に手順を確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

1 検索ボックスの色を変える(基本)
2 入力中の色を変える
3 虫眼鏡ボタンのマウスホバー時の色を変える
4 入力中の黒くて太い外枠を表示しないようにする
5 まとめ

検索ボックスの色を変える(基本)

まずは、通常時の検索ボックスの色を変えてみます。

例として、次の画像のように色を変更してみることにします。

CSSの末尾に以下のコードを追加して下さい。

/************************************************
  新CSS：検索ボックスの色を変える
 ************************************************/
/* 検索ボックスの色 */
input.js-searchInput {
  color: #006666; /* 入力済みの文字の色 */
  background-color: #fffaf0; /* 文字の背景の色 */
  border-color: #6699cc; /* 検索ボックスの枠線の色 */
}
input.js-searchInput::placeholder {
  color: #ccc6c3; /* プレースホルダーの文字色 */
}
input.js-searchInput ~ .js-searchBtn button {
  color: #6699cc; /* 虫眼鏡ボタンの色 */
}

各所の色を設定している行に、どこの色が変わるかをコメントで書いてありますので、参考にしながら、好みの色に変更してみて下さい。

入力中の色を変える

入力中だけ通常時とは別の色で表示することも可能です。

その場合は、以下のコードも追加して下さい。

/* 検索ボックスの色（入力中） */
input.js-searchInput:focus {
  color: #333333; /* 入力済みの文字の色 */
  background-color: #ffffff; /* 文字の背景の色 */
  border-color: #333333; /* 検索ボックスの枠線の色 */
}
input.js-searchInput:focus::placeholder {
  color: #f0f0f0;  /* プレースホルダーの文字色 */
}
input.js-searchInput:focus ~ .js-searchBtn button {
  color: #333333; /* 虫眼鏡ボタンの色 */
}

こちらも、各所の色を設定している行に、どこの色が変わるかをコメントで書いてありますので、参考にしながら、好みの色に変更してみて下さい。

虫眼鏡ボタンのマウスホバー時の色を変える

もし、虫眼鏡ボタンにマウスカーソルが乗ったときに、そこだけ別の色に変えたい場合は以下のコードも追加します。

/* 虫眼鏡ボタンのマウスホバー時の色 */
input.js-searchInput ~ .js-searchBtn button:hover {
  color: #ff3300; /* 虫眼鏡ボタンの色 */
}

やはり、色はお好みで変更してみて下さい。

入力中の黒くて太い外枠を表示しないようにする

検索ボックスは、入力中に黒くて太い外枠が表示されます。

もし、これを無効にしたい場合は、以下のコードも追加して下さい。

/* 入力中に黒くて太い枠線を表示しない */
input.js-searchInput:focus {
  outline: none;
}

まとめ

以上、アメブロの新CSS編集用デザインで、ブログ内検索用の検索ボックスの色を、デザインに合わせて好みの色に変更するカスタマイズ方法をご紹介しました。

CSSにコードをコピペ＆色コードを設定するだけの簡単な方法なので、よかったら試してみて下さい。