ブロックエディターのデフォルトのグラデーションカラーを変更

  • BlockEditor

    • 以前のBLOGで、ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更する方法を紹介しました。今回は、ブロックエディターのデフォルトのグラデーションカラーを変更する方法を紹介します。

    今回のDEMOは、グラデーションカバーです。

    GRADATION PALETTE

    GRADATION

    白黒のグラデーション、黒透明のグラデーション、黒透明のツートンの3種のグラデーションカバーです。透明部分に画像を挿入しています。

    コード

    functions.phpに、下記コードを入力します。

    add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'     => '白黒90',
            'gradient' => 'linear-gradient(90deg,rgb(255,255,255) 0%,rgb(0,0,0) 100%)',
            'slug'     => 'white-black-90'
        ),
		array(
            'name'     => '透明黒180',
            'gradient' => 'linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%,rgba(0,0,0,1) 100%)',
            'slug'     => 'black-transparent-180'
        ),
		array(
            'name'     => '透明黒ツートン90',
            'gradient' => 'linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%)',
            'slug'     => 'black-twotone-90'
        ),
        
    )
);

    editor-styles.cssに下記コードを入力します。

    .has-white-black-90-gradient-background {
    background: linear-gradient(
        90deg,
        rgb( 255, 255, 255 ) 0%,
        rgb( 0, 0, 0 ) 100%
    );
}

.has-black-transparent-180-gradient-background {
    background: linear-gradient(
        180deg,
        rgba( 0, 0, 0, 0 ) 0%,
		rgba( 0, 0, 0, 1 ) 80%,
        rgba( 0, 0, 0, 1 ) 100%
    );
}

.has-black-twotone-90-gradient-background {
    background: linear-gradient(
        90deg,
        rgba( 0, 0, 0, 0 ) 0%,
		rgba( 0, 0, 0, 0 ) 50%,
		rgba( 0, 0, 0, 1 ) 50%,
        rgba( 0, 0, 0, 1 ) 100%
    );
}

    ブロックエディター

    実際グラデーションがブロックエディターで反映されているか確認します。

    カバーブロックの背景色をブロック＞色＞オーバーレイ＞グラデーション＞テーマの白黒90を設定します。グラデーションが反映されます。その他のグラデーションも設定し、バックに画像を入れます。

    プレビューを表示し、ブロックエディターの設定が反映されているか確認します。

    グラデーション＞テーマを変更

    グラデーションが反映

    すべてのグラデーションを設定

    プレビューを表示し、ブロックエディターの設定が反映されているか確認

    サーバーによって反映されない

    グラデーション設定は、一部レンタルサーバーではプレビューが反映されませんでした。Xサーバーでは反映されます。反映されない場合、ブロックエディターで一度設定したあと、手動で再度設定し直す必要があります。

    以上で今回の説明は終了です。ブロックエディターで設定したあと、グラデーションの色を変更することもできるので、いろいろな用途で活用できます。

    You may also like