ブロックサンプル：ボタン（1/2）

ボタン（1/2）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-04301 / core/button　基本形

sample-04302 / core/button　tagName：tagName="a"

sample-04303 / core/button　tagName：tagName="button"

sample-04304 / core/button　url：url="#gallery-top"

sample-04305 / core/button　url：url="https://wordpress.org/"

sample-04306 / core/button　title：title="短いサンプル"

sample-04307 / core/button　title：title="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-04308 / core/button　text：text="短いサンプル"

sample-04309 / core/button　text：text="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-04310 / core/button　linkTarget：linkTarget="_self"

sample-04311 / core/button　linkTarget：linkTarget="_blank"

sample-04312 / core/button　rel：rel="nofollow"

sample-04313 / core/button　rel：rel="noopener noreferrer"

sample-04314 / core/button　placeholder：placeholder="短いサンプル"

sample-04315 / core/button　placeholder：placeholder="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-04316 / core/button　backgroundColor：backgroundColor="key-color"

sample-04317 / core/button　backgroundColor：backgroundColor="red"

sample-04318 / core/button　backgroundColor：backgroundColor="pink"

sample-04319 / core/button　backgroundColor：backgroundColor="purple"

sample-04320 / core/button　backgroundColor：backgroundColor="deep"

sample-04321 / core/button　backgroundColor：backgroundColor="indigo"

sample-04322 / core/button　backgroundColor：backgroundColor="blue"

sample-04323 / core/button　backgroundColor：backgroundColor="light-blue"

sample-04324 / core/button　backgroundColor：backgroundColor="cyan"

sample-04325 / core/button　backgroundColor：backgroundColor="teal"

sample-04326 / core/button　backgroundColor：backgroundColor="green"

sample-04327 / core/button　backgroundColor：backgroundColor="light-green"

sample-04328 / core/button　backgroundColor：backgroundColor="lime"

sample-04329 / core/button　backgroundColor：backgroundColor="yellow"

sample-04330 / core/button　backgroundColor：backgroundColor="amber"

sample-04331 / core/button　backgroundColor：backgroundColor="orange"

sample-04332 / core/button　backgroundColor：backgroundColor="deep-orange"

sample-04333 / core/button　backgroundColor：backgroundColor="brown"

sample-04334 / core/button　backgroundColor：backgroundColor="light-grey"

sample-04335 / core/button　backgroundColor：backgroundColor="grey"

sample-04336 / core/button　backgroundColor：backgroundColor="dark-grey"

sample-04337 / core/button　backgroundColor：backgroundColor="cocoon-black"

sample-04338 / core/button　backgroundColor：backgroundColor="cocoon-white"

sample-04339 / core/button　backgroundColor：backgroundColor="watery-blue"

sample-04340 / core/button　backgroundColor：backgroundColor="watery-yellow"

sample-04341 / core/button　backgroundColor：backgroundColor="watery-red"

sample-04342 / core/button　backgroundColor：backgroundColor="watery-green"

sample-04343 / core/button　backgroundColor：backgroundColor="ex-a"

sample-04344 / core/button　backgroundColor：backgroundColor="ex-b"

sample-04345 / core/button　backgroundColor：backgroundColor="ex-c"

sample-04346 / core/button　backgroundColor：backgroundColor="ex-d"

sample-04347 / core/button　backgroundColor：backgroundColor="ex-e"

sample-04348 / core/button　backgroundColor：backgroundColor="ex-f"

sample-04349 / core/button　プリセットの前景色：textColor="key-color" / borderColor="key-color"

sample-04350 / core/button　プリセットの前景色：textColor="red" / borderColor="red"

sample-04351 / core/button　プリセットの前景色：textColor="pink" / borderColor="pink"

sample-04352 / core/button　プリセットの前景色：textColor="purple" / borderColor="purple"

sample-04353 / core/button　プリセットの前景色：textColor="deep" / borderColor="deep"

sample-04354 / core/button　プリセットの前景色：textColor="indigo" / borderColor="indigo"

sample-04355 / core/button　プリセットの前景色：textColor="blue" / borderColor="blue"

sample-04356 / core/button　プリセットの前景色：textColor="light-blue" / borderColor="light-blue"

sample-04357 / core/button　プリセットの前景色：textColor="cyan" / borderColor="cyan"

sample-04358 / core/button　プリセットの前景色：textColor="teal" / borderColor="teal"

sample-04359 / core/button　プリセットの前景色：textColor="green" / borderColor="green"

sample-04360 / core/button　プリセットの前景色：textColor="light-green" / borderColor="light-green"

sample-04361 / core/button　プリセットの前景色：textColor="lime" / borderColor="lime"

sample-04362 / core/button　プリセットの前景色：textColor="yellow" / borderColor="yellow"

sample-04363 / core/button　プリセットの前景色：textColor="amber" / borderColor="amber"

sample-04364 / core/button　プリセットの前景色：textColor="orange" / borderColor="orange"

sample-04365 / core/button　プリセットの前景色：textColor="deep-orange" / borderColor="deep-orange"