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色グラデーション斜め方向のテストと言うようにいろいろ試していますので、お好みで。