CSS Filter「hue-rotate」で、画像を色相変換するWebツール作成。（ChatGPT）

以前に、「CSS Filterを使えば、簡単に色調（明度、彩度、色相、透過度 etc.）加工ができる。」という記事を書いた。

CSS Filter「hue-rotate」を使って、画像（写真）を色相変換するWebページを作成。

（※ 実際は、ChatGPTに作ってもらった。）

画像（写真）ファイルを、アップロードして、任意の「hue-rotate」値を適用できる。hue-rotate値適用後の画像をローカルにダウンロードできる。

違う画像をアップロードすると、現在のhue-rotate値がそのまま適用される。連続して複数画像に対して、同じhue-rotate値を適用できる。

CSS）「mix-blend-mode」の「multiply」で、JPEG画像を半透明（透過）に重ねて表示。

CSSの「mix-blend-mode」の「multiply」のテスト。

以下の3つのJPG画像を「multiply（乗算）」で半透明に重ねて表示。

≪HTMLとCSS≫

<style>
div {
	position: relative;
}
img {
	border: 1px #000 solid;
}
.multiply > img {
	mix-blend-mode: multiply;
	position: absolute;
}
</style>
<div>
	<img src="image/320/red.jpg">
	<img src="image/320/blue.jpg">
	<img src="image/320/yellow.jpg">
</div>
<div class="multiply">
	<img src="image/320/red.jpg">
	<img src="image/320/blue.jpg">
	<img src="image/320/yellow.jpg">
</div>

≪サンプルページ≫

https://ok2nd.github.io/Test/mix-blend-mode/multiply.html

重ねたイメージ画像。

以前に、GIMPでPNG透過画像を使って重ねたものを、JPEGで「mix-blend-mode」を使って重ねてみた。

オリジナル画像そのままだと、濃すぎるので、opacity: 0.8 で少し薄くして使用。

<style>
div {
	position: relative;
}
img {
	border: 1px #000 solid;
	width: 400px;
}
.opacity > img {
	opacity: 0.8;
}
.multiply > img {
	mix-blend-mode: multiply;
	position: absolute;
}
</style>
<div>
	<img src="image/001-g.jpg">
	<img src="image/002-g.jpg">
</div>
<div class="opacity">
	<img src="image/001-g.jpg">
	<img src="image/002-g.jpg">
</div>
<div class="opacity multiply">
	<img src="image/001-g.jpg">
	<img src="image/002-g.jpg">
</div>

https://ok2nd.github.io/Test/mix-blend-mode/multiply2.html

CSS）<pre>で等幅フォントを使う。

はてなブログの<pre> で等幅フォントを使う方法の備忘録。

以下のスタイルを追加。

<style>
pre {
 font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
 font-size: 14px;
 line-height: 1.2;
}
</style>

表示例は以下。

---

---

JavaScript、CSS）「My 野鳥図鑑」ポップアップ画像表示を、別ページや<a>タグ、<div>タグを使わない方式に変更。

以前作成した「My 野鳥図鑑」のポップアップ画像を表示する方式を、別ページや<a>タグ、<div>タグを使わない方式に変更。

≪（新）My 野鳥図鑑≫

≪（旧）My 野鳥図鑑≫

<a>タグ、<div>タグを使わない方式については、以下を利用。

---

WordPress）検索対象に「カテゴリ」を追加し「本文」は含めない。

WordPressのサイト内検索対象に「カテゴリ」を追加し「本文」は含めないようにする。

検索対象は「タイトル」と「カテゴリ」にする。

以下を参考に少しカスタマイズした。

「\wp-content\themes\iconic-one\functions.php」に以下を追加。

function custom_search($search, $wp_query) {
	global $wpdb;
	//サーチページ以外だったら終了
	if (!$wp_query->is_search)
		return $search;
	if (!isset($wp_query->query_vars))
		return $search;
	// カテゴリ名も検索対象に
	$search_words = explode(' ', isset($wp_query->query_vars['s']) ? $wp_query->query_vars['s'] : '');
	if ( count($search_words) > 0 ) {
		$search = '';
		foreach ( $search_words as $word ) {
			if ( !empty($word) ) {
				$search_word = $wpdb->escape("%{$word}%");
				$search .= " AND (
					{$wpdb->posts}.post_title LIKE '{$search_word}'
					OR {$wpdb->posts}.ID IN (
						SELECT distinct r.object_id
						FROM {$wpdb->term_relationships} AS r
						INNER JOIN {$wpdb->term_taxonomy} AS tt ON r.term_taxonomy_id = tt.term_taxonomy_id
						INNER JOIN {$wpdb->terms} AS t ON tt.term_id = t.term_id
						WHERE t.name LIKE '{$search_word}'
					)
				) ";
			}
		}
	}
	return $search;
}
add_filter('posts_search','custom_search', 10, 2);

---