Twenty Seventeen 4, カラーパレットの装飾

Twenty Seventeenのカラーパレットを差し替えました。親テーマにカスタムパレットが見当たらなかったので、置き換えは不要で、自分のカスタムパレットを追記しました。

• 

①子テーマのfunctions.phpにパレットを投入。②CSS追記の2ステップです。

Functions.php追記

サンプルパレットは5つ。nameとslugに書いている’Reference’の部分はご自分の都合の良い名前に変えてください。

「外観 → テーマエディタ → テーマを選択 → functions.php」に下記をコピペ。

<?php
add_theme_support( 'editor-color-palette',
array(
	array(
		'name'  => __( 'Reference', 'generic' ),
		'slug'  => 'reference',
		'color' => '#d1e4dd',
	),
	array(
		'name'  => __( 'Translation', 'generic' ),
		'slug'  => 'translation',
		'color' => '#E47CFF',
	),
	array(
		'name'  => __( 'tips', 'generic' ),
		'slug'  => 'tips',
		'color' => '#E0CB6D',
	),
	array(
		'name'  => __( 'Important', 'generic' ),
		'slug'  => 'important',
		'color' => '#FF7C7C',
		),
	array(
		'name'  => __( 'Notes', 'generic' ),
		'slug'  => 'notes',
		'color' => '#7DDBD5',
	),
)
);
?>

functions.phpの編集には細心の注意を払って、バックアップを取ってから、うんたらかんたら、デス。

CSSの追記

上記で設定したパレットにウェブ描画用の色を付けていきます。「has-パレット名-background-color」が背景色で、「has-パレット名-color」が文字色です。

「外観 → カスタマイズ → 追加CSS」に下記のコードをコピペ。

.has-reference-background-color {
	border: double 7px;
}
.has-reference-color {
	color: #d1e4dd;
}
.has-translation-background-color {
	background: linear-gradient(to right bottom, #E47CFF, #7CFFFC,#CDFF7C);
}
.has-translation-color {
	color: #E47CFF;
}
.has-tips-background-color {
	background-color: #E0CB6D;
	outline: dotted 4px #FFFFFF;
	outline-offset: -8px;
}
.has-tips-color {
	color: #E0CB6D;
}
.has-important-background-color {
	background: linear-gradient(to right, #FF7C7C, #FFCA7C,#FF7C7C);
}
.has-important-color {
	color: #FF7C7C;
}
.has-notes-background-color {
	background-color: #7DDBD5;
	outline: dashed 2px #FFFFFF;
	outline-offset: -5px;
}
.has-notes-color {
	color: #7DDBD5;
}

※背景色の方は「Reference」はパレットなのに色を使わなかったパターン、「Translation」は3色グラデーション斜め方向のテストと言うようにいろいろ試していますので、お好みで。