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

囲みボタン（1/2）

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

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

sample-00957 / cocoon-blocks/button-wrap-1　基本形

sample-00958 / cocoon-blocks/button-wrap-1　tag：tag="<a href=\"#gallery-top\">案内を見る</a>"

sample-00959 / cocoon-blocks/button-wrap-1　tag：tag="<a href=\"#gallery-top\"><strong>詳しい案内</strong><br>こちらから確認</a>"

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

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

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

sample-00963 / cocoon-blocks/button-wrap-1　isCircle：isCircle=false

sample-00964 / cocoon-blocks/button-wrap-1　isCircle：isCircle=true

sample-00965 / cocoon-blocks/button-wrap-1　isShine：isShine=false

sample-00966 / cocoon-blocks/button-wrap-1　isShine：isShine=true

sample-00967 / cocoon-blocks/button-wrap-1　align：align=""

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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