簡単カスタマイズ

追加CSSで変更する方法

カスタマイザーで変更しているのは、以下の通り。ヘッダーのカスタマイズ。

#kns-head { /* フロントページのヘッダー背景カラー */
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
}
#kns-header { /* フロントページのヘッダーの高さ */
    height: 400px;
}
.kns-navbar-top { /* フロントページ以外のトップに固定されている状態のナビの背景 */
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e) !important;
}
.kns-navbar-sticky { /* フロントページ以外で、スティッキー状態のナビの背景　*/
    background-color : rgba(48, 43, 99, 0.85) !important;
}
.uk-logo, /* ロゴ部分のリンク */
.uk-logo:hover, /* ロゴ部分のリンクのホバー */
.kns-navbar-top-front, /* フロントページのトップ固定状態のナビ */
.kns-navbar-top-front li>a, /* フロントページのトップ固定状態のナビ内のリンク */
.kns-navbar-top, /* フロントページ以外のトップ固定状態のナビ */
.kns-navbar-top li>a, /* フロントページ以外のトップ固定状態のナビ内のリンク */
.kns-navbar-sticky, /* フロントページ以外で、スティッキー状態のナビ　*/
.kns-navbar-sticky li>a, /* フロントページ以外で、スティッキー状態のナビ内のリンク　*/
#kanso_general_options_htitle, /* フロントページのヘッダーのタイトル　*/
#kanso_general_options_hsubtitle /* フロントページのヘッダーのサブタイトル　*/
{
    color : white;
}

フッターの変更は、以下の通り。

#footer {
    color: #888;
    background-color: #f2f2f2;
}

独自のカラースキームを追加する

kns_set_color_setフィルターフックを用意しています。利用すると、簡単に変更できます。詳しくは、 inc/custom-colors.php をどうぞ。

使い方は、以下のものを参考に、 functions.php などに記載する。

add_filter(
	'kns_set_color_set',
	function( $schema ) {
		$schema['original'] = array(
			'name'    => 'オリジナル',
			'color'   => 'white',
			'nav-bg0' => 'background: linear-gradient(to bottom, #41295a, #2f0743) !important;',
			'nav-bg'  => 'background-color : rgba(65, 41, 90, 0.9) !important;',
			'head-bg' => 'background: linear-gradient(to bottom, #41295a, #2f0743);',
		);

		return $schema;
	}
);

• name : カスタマイザーで選択する名前
• color : ナビの文字色
• nav-bg0 : トップに固定時のナビの設定（トップページは透過）
• nav-bg : スティッキー状態のナビの設定
• head-bg : トップページのヘッダーの背景の設定