Luxeritas（ルクセリタス）のサイト内検索ボタン「検索」文字をアイコンへ

2020年1月3日2023年6月12日ルクセリタス

ルクセリタスの「サイト内検索フォーム」のボタンにある「検索」文字をアイコンにしてみました。

ルクセリタスがマテリアルアイコンに標準化されたので、Font Awesome 5 から、マテリアルアイコンに変更しました。

今は、Windows11 の検索アイコンが逆向きになったので、マテリアルアイコンも逆向きにしようとしましたが、少しコミカルにしたかったので、画像にしてます。

クラウド型高速レンタルサーバー【スターサーバー】

レンタルサーバーの【スターサーバー】は、高速・格安のクラウド型レンタルサーバーです。オールSSD＆n ...

 https://www.star.ne.jp/post-4536/?ref=NA62x59m/

「検索」ボタンをアイコンにするには

まず、searchform.php の変更。

２６行目を削除するか、コメントに。
そして、２７行目に次のコードを追記。

<button type="submit" id="kensaku2submit" aria-label="button"><span class="material-icons-outlined">search</span></button>

コメントにすると、このようになります。

</label>
<!--
<input type="submit" class="search-submit" value="<?php echo esc_attr( __( 'Search', 'luxeritas' ) ); ?>" />
-->
<button type="submit" id="kensaku2submit" aria-label="button"><span class="material-icons-outlined">search</span></button>
</form>
</div>

次に style.css に追記。

/* サイト内検索 */
#side #side-fixed .search-form,
#side #side-scroll .search-form {
	border: 1px solid #33cc99;
	border-radius: 5px;
	padding-right: 54px;
}
#side #side-fixed .search-field,
#side #side-scroll .search-field {
	height: 32px;
	border: none;
	border-radius: 5px;
	padding: 0 5px;
	background: none;
}
#kensaku2submit {
	font-size: 20px;
	width: 50px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	position: absolute;
	right: 0;
	top: 0;
	color: #121212;
	background: #33cc99;
}
#kensaku2submit:hover {
	color: #ff0066;
	cursor: pointer;
}

こんな感じになります。

画像を使った時のコード

今は、画像にしています。
そして、ロールオーバーで画像の切り替えをしています。

searchform.php の変更。

２６行目を削除するかコメントアウトする。
そして、２７行目に次のコードを追記。

<input type="image" src="<?php echo esc_url(home_url()); ?>/wp-content/uploads/2023/06/search2-off.png"
onmouseover="this.src='<?php echo esc_url(home_url()); ?>/wp-content/uploads/2023/06/search2-on.png'"
onmouseout="this.src='<?php echo esc_url(home_url()); ?>/wp-content/uploads/2023/06/search2-off.png'"
alt="検索" width="50" height="32" id="kensaku2submit" />

分かりやすく改行していますが、実際には半角スペースで区切って、１行で追記します。

<input type="image" src="<?php echo esc_url(home_url()); ?>/wp-content/uploads/2023/06/search2-off.png" onmouseover="this.src='<?php echo esc_url(home_url()); ?>/wp-content/uploads/2023/06/search2-on.png'" onmouseout="this.src='<?php echo esc_url(home_url()); ?>/wp-content/uploads/2023/06/search2-off.png'" alt="検索" width="50" height="32" id="kensaku2submit" />

style.css へ追記。

/* サイト内検索 png */
#side #side-fixed .search-form,
#side #side-scroll .search-form {
	border:1px solid #33cc99;
	border-radius:5px;
	padding-right:47px;
}
#side #side-fixed .search-field
#side #side-scroll .search-field {
	border:none;
	border-radius:5px;
	padding:0 5px;
}
#kensaku2submit {
	border-radius:5px;
	position:absolute;
	right:0;
	top:1px;
	background-color:#33cc99;
}

こんな感じになります。