ワードプレスのブロックエディタ（グーテンベルク）のエディタで挿入できる「ボタン」ブロックをオリジナルデザインにしたい！という方もいるかもしれないですよね。

ワードプレスのブロックエディタの「ボタン」をオリジナルデザインにする方法を紹介していきます。

 

「.wp-block-button__link」にデザインを

ワードプレスのブロックエディタで標準で使えるボタンのデザインをオリジナルのデザインに変えるには、「.wp-block-button__link」というクラス名に対してデザインを追加すればOK。

例えば、

 

css

	.wp-block-button__link{
		color: white;
		background-color: green;
		font-size: 1.125em;
		padding: .667em 1.333em;
		text-decoration: none;
		border-radius: 0;
	}

 

こんな風にすればデフォルトだと角丸で黒色背景に白文字のボタンですが、緑背景の白文字、そして角丸じゃなくて普通のカクカクした角にできちゃいます。

ちなみにブロックエディタではエディタ上で色を変えたり角丸の比率を変えたりできる（「追加設定の表示」より）のですが、もちろんこれも対応OK。

さっきのcssを追加しても、ブロックエディタ上で追加設定できる色や角丸の方が優先されるのでなにも問題ないです。

すっごく簡単でしたね。

 

まとめ

ワードプレスのブロックエディタ（グーテンベルク）のボタンをオリジナルデザインにする方法を紹介しました。

まとめると「.wp-block-button__link」に対してボタンデザインを書けばOK！という話でした。お試しくださいね！

 

ちなみにこの変更は公開ページのボタンには反映されるんですが、エディタ画面のボタンは依然として黒色背景に白文字、角丸になります。

もしエディタ画面のボタンデザインもオリジナルのものに変えるなら下記を参考にしてみてくださいね。