目次

【アメブロカスタマイズ】検索ボックスの色を変える方法

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

CSSを編集するカスタマイズになりますので、やり方がわからない場合は先に手順をチェックしておいて下さい。

検索ボックスの色を変える

検索ボックスの色を変えるには、以下のようなコードをCSSの末尾に追加します。

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

入力済みの文字の色文字の背景の色枠線の色プレースホルダーの文字色虫眼鏡ボタンの色をそれぞれ個別に変更できますので、お好みの色コードを設定してみて下さい。

プレースホルダーとは、何も入力していない時に検索ボックス内に表示されている「このブログを検索する」という文字列のことです。

色コードについては、こちらのサイトなどが参考になると思います。

元の色から変更したくない項目がある場合は、その行を削除すれば大丈夫です。

入力中は別の色にする

「検索ボックスにキーワードを入力している時(フォーカス時)は通常時とは別の色で表示したい」という場合は、CSSに以下のようなコードも追加することで可能です。

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

色を変更できる項目については、前項の通常時の色設定と同様です。

なお、デフォルトでは、検索ボックスにキーワードを入力中、検索ボックスの周りに太くて目立つ輪郭線(アウトライン)が表示されて検索ボックスの枠線が見えにくくなることが多いので、もし、入力中に表示される太い輪郭線を非表示にしたいという場合は、CSSに以下のコードも追加してみてください。

/* 検索ボックス入力中の輪郭線を非表示 */
input.js-searchInput:focus {
  outline: none;
}

虫眼鏡ボタンのマウスホバー時の色

虫眼鏡ボタン(検索実行ボタン)にマウスカーソルが当たった時に色を変えたい場合は、さらに以下のようなコードもCSSに追加することで実現可能です。

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

まとめ

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

よろしければ参考にして下さい。