Twenty Twenty-One 7, カラーパレットの色の調整

ワードプレスのデフォルトテーマ『Twenty Twenty-One』のカラーパレットを入れ替え、下図のように配色を見直したので、メモ。

カラーパレットの入れ替え

Twenty Twenty-Oneのパレットを外して、独自パレットに差し替えるためのコードをfunctions.phpにコピペ

エディタに入れ替わったパレットが出現します。私の腕ではエディタでグラデーションや枠線を使うことが出来なかったので、代表的な色のベタ塗りになってます。今回使用したコードは下記のとおりです。

色見本を参考に#FFFFFFの部分を入れ替えれば、他の色に変わりますのでお好みで。

<?php 
add_action( 'after_setup_theme', 'replace_parent_palette', 11 );
function replace_parent_palette() {
remove_theme_support( 'editor-color-palette' );
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' => '#7DDBD5',
    ),
    array(
      'name'  => __( 'Important', 'generic' ),
      'slug'  => 'important',
      'color' => '#FF7C7C',
    ),
    array(
      'name'  => __( 'Notes', 'generic' ),
      'slug'  => 'notes',
      'color' => '#E0CB6D',
    )
  )
);
}
?>

カラーパレットのCSS設定

ページに表示されるように「外観→カスタマイズ→追加CSSにコードをコピペ」でCSSを追記します。

今回使用した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;
  position: relative;
}
.has-tips-background-color:before {
  content: "";
  border: dotted 4px #FFFFFF;
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 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;
  border: solid 3px #FFFFFF;
  outline: dashed 2px #FFFFFF;
  outline-offset: -8px;
}
.has-notes-color {
  color: #7DDBD5;
}

※実は、「tips」のような書き方をするとクリックやホバーが出来なくなるので、おすすめではない。「notes」みたいな書き方の方が無難。一応参考までに別の書き方で書いてみただけ。

パレット名について

Reference、Translation、Tips、Important、Notesの部分は、自分の好きなパレット名をつけることが出来ます。

私は毎年テーマを変更するので「機能名」をつけていますが、他の人やテーマでは「配色名」をつけている例が多いようです。

functions.phpは、置き換えとエディタメニューでの色。CSSは表示ページとエディタブロックの色。functions.phpとCSSがペアになるようにパレット名をつけていれば別の名前でも機能します。

追記

テスト用に、下記、私の自分用のブロックを作らせてください。今のバックグラウンドカラーだと、黄色系の方が目を引くので、TipsとNotesのコードは入れ替えました。

Reference: 他のサイトへのリンクに使う

Translation: 翻訳した時に使う

Tips: 操作方法などを書いた時に使う

Important: 重要事項に使う

Notes: それ以外のメモ

配色も、いいかどうか、全然わからぬ。

最後までお読みいただきましてありがとうございました。

作成者: のろのろ

サイト管理者

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です