カテゴリーリンク　配色のカスタマイズ

tenman

WordPress4.4では、カテゴリーへのフィールドの追加が可能になり、カテゴリー用の画像や色の追加が可能になっています。

このページでは、そういった新しい方法によるものではなく、Raindropsテーマに実装されているカテゴリークラスと、自動配色フィルタを使って、カテゴリーの色分けを行ってみたいと思います。

以下は、カテゴリーID毎にスタイルを指定する関数で、CSS3のhslaカラーを使ってスタイルを出力します。（Raindropsテーマ以外では、動作しません）

Raindropsテーマは、投稿のカテゴリー表示部分も　.cat-item .cat-item-ID　といったクラスを追加してあるため、カテゴリーリンク全域で　スタイルを指定可能にしているため、関数でスタイルを出力するだけで、比較的簡単に色分けが出来るようになっています。

	$raindrops_tag_cloud_widget_presentation= true;
	$raindrops_tag_cloud_widget_threshold_val= 0;
	add_filter( 'raindrops_embed_meta_css', 'raindrops_color_pallet_category' ); 

if ( !function_exists( 'raindrops_color_pallet_category' ) ) {
	
	function raindrops_color_pallet_category( $css ) {

		global $raindrops_tag_cloud_widget_presentation, $raindrops_tag_cloud_widget_threshold_val;

		if ( false== $raindrops_tag_cloud_widget_presentation ) {
			return $css;
		}

		$raindrops_current_style_type= raindrops_warehouse_clone( 'raindrops_style_type' );
		if ( 'dark'== $raindrops_current_style_type ) {

			$saturation_base= 80;
			$lightness_base	= 60;
		} else {
			$saturation_base= 80;
			$lightness_base	= 40;
		}
		$start_angle= 0;
		$result		= '';
		$count_sep	= absint( $raindrops_tag_cloud_widget_threshold_val );
		/** end config */
		$taxonomies	= array( 'category' );
		$args		= array(
			'orderby'	=> 'count',
			'order'		=> 'DESC',
			'hierarchical'=> false,
		);
		$terms		= get_terms( $taxonomies, $args );

		if( empty( $terms ) ) {
			return $css;
		}

		$count_terms= count( $terms );

		$radian= 270 / $count_terms;

		foreach ( $terms as $key=> $term ) {
			$v			= $key + 1;
			$hue		= $start_angle + ( $radian * $v );
			$saturation	= $saturation_base . '%';
			$lightness	= $lightness_base . '%';

			
			if ( $term->count > $count_sep ) {
				
				$result .= '.cat-item.cat-item-' . $term->term_id . ' {background:hsla(' . $hue . ',' . $saturation . ',' . $lightness . ',.3);padding:3px 5px;} ';

			} else {
				
				$result .= '.cat-item.cat-item-' . $term->term_id . ' {display:none;} ';
			}
		}

		return $css . apply_filters( 'raindrops_color_pallet_category', $result );
	}
}

キャプチャ―を確認していただくとわかると思いますが、サイドバーの配色は暗めに、投稿下部の配色は明るく見えます。

これは、スタイルを変更しているわけではなく、配色の面積の違いから生じていると考えられます。

機械的に同じ色をスタイル指定すると、すべてが同じに見えるわけではなく　CSSによる色指定は、人の視覚的な感覚とずれが生じる場合も少なくなさそうです。

カテゴリーの色分けといったカスタマイズは、良く行われるカスタマイズの1種だと思いますが　違和感を生じさせない設計を行おうとすると、結構奥が深いかもしれません。

カラータイプを　ライトに変更すると以下のように見えます。

ライトの場合は、サイドバーのカテゴリー背景と、投稿のカテゴリーの色の違いを大きく感じないのは、私だけでしょうか？

hslaを使って透過色にしているせいかとも思いましたが、カラータイプダークの　posted-inの黒さと、サイドバーの黒さの違いをそれほど大きく感じないのですが、、、

[emulsion_relate_posts]