ブロックサンプル：カラム内の列（2/3）

カラム内の列（2/3）

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

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

sample-04941 / core/column　backgroundColor：backgroundColor="indigo"

sample-04942 / core/column　backgroundColor：backgroundColor="blue"

sample-04943 / core/column　backgroundColor：backgroundColor="light-blue"

sample-04944 / core/column　backgroundColor：backgroundColor="cyan"

sample-04945 / core/column　backgroundColor：backgroundColor="teal"

sample-04946 / core/column　backgroundColor：backgroundColor="green"

sample-04947 / core/column　backgroundColor：backgroundColor="light-green"

sample-04948 / core/column　backgroundColor：backgroundColor="lime"

sample-04949 / core/column　backgroundColor：backgroundColor="yellow"

sample-04950 / core/column　backgroundColor：backgroundColor="amber"

sample-04951 / core/column　backgroundColor：backgroundColor="orange"

sample-04952 / core/column　backgroundColor：backgroundColor="deep-orange"

sample-04953 / core/column　backgroundColor：backgroundColor="brown"

sample-04954 / core/column　backgroundColor：backgroundColor="light-grey"

sample-04955 / core/column　backgroundColor：backgroundColor="grey"

sample-04956 / core/column　backgroundColor：backgroundColor="dark-grey"

sample-04957 / core/column　backgroundColor：backgroundColor="cocoon-black"

sample-04958 / core/column　backgroundColor：backgroundColor="cocoon-white"

sample-04959 / core/column　backgroundColor：backgroundColor="watery-blue"

sample-04960 / core/column　backgroundColor：backgroundColor="watery-yellow"

sample-04961 / core/column　backgroundColor：backgroundColor="watery-red"

sample-04962 / core/column　backgroundColor：backgroundColor="watery-green"

sample-04963 / core/column　backgroundColor：backgroundColor="ex-a"

sample-04964 / core/column　backgroundColor：backgroundColor="ex-b"

sample-04965 / core/column　backgroundColor：backgroundColor="ex-c"

sample-04966 / core/column　backgroundColor：backgroundColor="ex-d"

sample-04967 / core/column　backgroundColor：backgroundColor="ex-e"

sample-04968 / core/column　backgroundColor：backgroundColor="ex-f"

sample-04969 / core/column　fontSize：fontSize="small"

sample-04970 / core/column　fontSize：fontSize="medium"

sample-04971 / core/column　fontSize：fontSize="large"

sample-04972 / core/column　fontSize：fontSize="huge"

sample-04973 / core/column　lock：lock={"move":false,"remove":false}

sample-04974 / core/column　lock：lock={"move":true,"remove":false}

sample-04975 / core/column　lock：lock={"move":false,"remove":true}

sample-04976 / core/column　lock：lock={"move":true,"remove":true}

sample-04977 / core/column　allowedBlocks：allowedBlocks=["core/paragraph"]

sample-04978 / core/column　allowedBlocks：allowedBlocks=["core/paragraph","core/heading"]

sample-04979 / core/column　anchor：anchor="sample-anchor"

sample-04980 / core/column　className：className="block-gallery-example"

sample-04981 / core/column　文字色の自由指定：style.color.text="#19448e"

sample-04982 / core/column　文字色の自由指定：style.color.text="#fff3ce"

sample-04983 / core/column　文字色の自由指定：style.color.text="#a82d46"

sample-04984 / core/column　背景色の自由指定：style.color.background="#fff3ce"

sample-04985 / core/column　背景色の自由指定：style.color.background="#e8f0fa"

sample-04986 / core/column　背景色の自由指定：style.color.background="#19448e"

sample-04987 / core/column　グラデーション：style.color.gradient="linear-gradient(135deg,#dcecff 0%,#fff2db 100%)"

sample-04988 / core/column　グラデーション：style.color.gradient="linear-gradient(90deg,#19448e 0%,#9b2d64 100%)"

sample-04989 / core/column　linkの色：style.elements.link.color.text="#19448e"