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

ボタン（1/2）

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

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

sample-00830 / cocoon-blocks/button-1　基本形

sample-00831 / cocoon-blocks/button-1　content：content="短いサンプル"

sample-00832 / cocoon-blocks/button-1　content：content="春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。春の朝、窓を開けると柔らかな風が入りました。これは文字の大きさ、行間、色、折り返しを比較するための日本語サンプルです。"

sample-00833 / cocoon-blocks/button-1　url：url="#gallery-top"

sample-00834 / cocoon-blocks/button-1　url：url="https://wordpress.org/"

sample-00835 / cocoon-blocks/button-1　リンクの開き方：target="_self"

sample-00836 / cocoon-blocks/button-1　リンクの開き方：target="_blank"

sample-00837 / cocoon-blocks/button-1　サイズ：size="btn-s"

sample-00838 / cocoon-blocks/button-1　サイズ：size="btn-m"

sample-00839 / cocoon-blocks/button-1　サイズ：size="btn-l"

sample-00840 / cocoon-blocks/button-1　isCircle：isCircle=false

sample-00841 / cocoon-blocks/button-1　isCircle：isCircle=true

sample-00842 / cocoon-blocks/button-1　isShine：isShine=false

sample-00843 / cocoon-blocks/button-1　isShine：isShine=true

sample-00844 / cocoon-blocks/button-1　align：align=""

sample-00845 / cocoon-blocks/button-1　align：align="left"

sample-00846 / cocoon-blocks/button-1　align：align="center"

sample-00847 / cocoon-blocks/button-1　align：align="right"

sample-00848 / cocoon-blocks/button-1　backgroundColor：backgroundColor="key-color"

sample-00849 / cocoon-blocks/button-1　backgroundColor：backgroundColor="red"

sample-00850 / cocoon-blocks/button-1　backgroundColor：backgroundColor="pink"

sample-00851 / cocoon-blocks/button-1　backgroundColor：backgroundColor="purple"

sample-00852 / cocoon-blocks/button-1　backgroundColor：backgroundColor="deep"

sample-00853 / cocoon-blocks/button-1　backgroundColor：backgroundColor="indigo"

sample-00854 / cocoon-blocks/button-1　backgroundColor：backgroundColor="blue"

sample-00855 / cocoon-blocks/button-1　backgroundColor：backgroundColor="light-blue"

sample-00856 / cocoon-blocks/button-1　backgroundColor：backgroundColor="cyan"

sample-00857 / cocoon-blocks/button-1　backgroundColor：backgroundColor="teal"

sample-00858 / cocoon-blocks/button-1　backgroundColor：backgroundColor="green"

sample-00859 / cocoon-blocks/button-1　backgroundColor：backgroundColor="light-green"

sample-00860 / cocoon-blocks/button-1　backgroundColor：backgroundColor="lime"

sample-00861 / cocoon-blocks/button-1　backgroundColor：backgroundColor="yellow"

sample-00862 / cocoon-blocks/button-1　backgroundColor：backgroundColor="amber"

sample-00863 / cocoon-blocks/button-1　backgroundColor：backgroundColor="orange"

sample-00864 / cocoon-blocks/button-1　backgroundColor：backgroundColor="deep-orange"

sample-00865 / cocoon-blocks/button-1　backgroundColor：backgroundColor="brown"

sample-00866 / cocoon-blocks/button-1　backgroundColor：backgroundColor="light-grey"

sample-00867 / cocoon-blocks/button-1　backgroundColor：backgroundColor="grey"

sample-00868 / cocoon-blocks/button-1　backgroundColor：backgroundColor="dark-grey"

sample-00869 / cocoon-blocks/button-1　backgroundColor：backgroundColor="cocoon-black"

sample-00870 / cocoon-blocks/button-1　backgroundColor：backgroundColor="cocoon-white"

sample-00871 / cocoon-blocks/button-1　backgroundColor：backgroundColor="watery-blue"

sample-00872 / cocoon-blocks/button-1　backgroundColor：backgroundColor="watery-yellow"

sample-00873 / cocoon-blocks/button-1　backgroundColor：backgroundColor="watery-red"

sample-00874 / cocoon-blocks/button-1　backgroundColor：backgroundColor="watery-green"

sample-00875 / cocoon-blocks/button-1　backgroundColor：backgroundColor="ex-a"

sample-00876 / cocoon-blocks/button-1　backgroundColor：backgroundColor="ex-b"

sample-00877 / cocoon-blocks/button-1　backgroundColor：backgroundColor="ex-c"

sample-00878 / cocoon-blocks/button-1　backgroundColor：backgroundColor="ex-d"

sample-00879 / cocoon-blocks/button-1　backgroundColor：backgroundColor="ex-e"

sample-00880 / cocoon-blocks/button-1　backgroundColor：backgroundColor="ex-f"

sample-00881 / cocoon-blocks/button-1　プリセットの前景色：textColor="key-color" / borderColor="key-color"

sample-00882 / cocoon-blocks/button-1　プリセットの前景色：textColor="red" / borderColor="red"

sample-00883 / cocoon-blocks/button-1　プリセットの前景色：textColor="pink" / borderColor="pink"

sample-00884 / cocoon-blocks/button-1　プリセットの前景色：textColor="purple" / borderColor="purple"

sample-00885 / cocoon-blocks/button-1　プリセットの前景色：textColor="deep" / borderColor="deep"

sample-00886 / cocoon-blocks/button-1　プリセットの前景色：textColor="indigo" / borderColor="indigo"

sample-00887 / cocoon-blocks/button-1　プリセットの前景色：textColor="blue" / borderColor="blue"

sample-00888 / cocoon-blocks/button-1　プリセットの前景色：textColor="light-blue" / borderColor="light-blue"

sample-00889 / cocoon-blocks/button-1　プリセットの前景色：textColor="cyan" / borderColor="cyan"

sample-00890 / cocoon-blocks/button-1　プリセットの前景色：textColor="teal" / borderColor="teal"

sample-00891 / cocoon-blocks/button-1　プリセットの前景色：textColor="green" / borderColor="green"

sample-00892 / cocoon-blocks/button-1　プリセットの前景色：textColor="light-green" / borderColor="light-green"

sample-00893 / cocoon-blocks/button-1　プリセットの前景色：textColor="lime" / borderColor="lime"

sample-00894 / cocoon-blocks/button-1　プリセットの前景色：textColor="yellow" / borderColor="yellow"

sample-00895 / cocoon-blocks/button-1　プリセットの前景色：textColor="amber" / borderColor="amber"

sample-00896 / cocoon-blocks/button-1　プリセットの前景色：textColor="orange" / borderColor="orange"

sample-00897 / cocoon-blocks/button-1　プリセットの前景色：textColor="deep-orange" / borderColor="deep-orange"

sample-00898 / cocoon-blocks/button-1　プリセットの前景色：textColor="brown" / borderColor="brown"

sample-00899 / cocoon-blocks/button-1　プリセットの前景色：textColor="light-grey" / borderColor="light-grey"

sample-00900 / cocoon-blocks/button-1　プリセットの前景色：textColor="grey" / borderColor="grey"

sample-00901 / cocoon-blocks/button-1　プリセットの前景色：textColor="dark-grey" / borderColor="dark-grey"

sample-00902 / cocoon-blocks/button-1　プリセットの前景色：textColor="cocoon-black" / borderColor="cocoon-black"

sample-00903 / cocoon-blocks/button-1　プリセットの前景色：textColor="cocoon-white" / borderColor="cocoon-white"

sample-00904 / cocoon-blocks/button-1　プリセットの前景色：textColor="watery-blue" / borderColor="watery-blue"

sample-00905 / cocoon-blocks/button-1　プリセットの前景色：textColor="watery-yellow" / borderColor="watery-yellow"

sample-00906 / cocoon-blocks/button-1　プリセットの前景色：textColor="watery-red" / borderColor="watery-red"

sample-00907 / cocoon-blocks/button-1　プリセットの前景色：textColor="watery-green" / borderColor="watery-green"

sample-00908 / cocoon-blocks/button-1　プリセットの前景色：textColor="ex-a" / borderColor="ex-a"

sample-00909 / cocoon-blocks/button-1　プリセットの前景色：textColor="ex-b" / borderColor="ex-b"