ブロックサンプル：アバター（1/1）

アバター（1/1）

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

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

sample-08913 / core/avatar　基本形

sample-08914 / core/avatar　size：size=48

sample-08915 / core/avatar　size：size=96

sample-08916 / core/avatar　size：size=192

sample-08917 / core/avatar　isLink：isLink=false

sample-08918 / core/avatar　isLink：isLink=true

sample-08919 / core/avatar　linkTarget：linkTarget="_self"

sample-08920 / core/avatar　linkTarget：linkTarget="_blank"

sample-08921 / core/avatar　borderColor：borderColor="key-color"

sample-08922 / core/avatar　borderColor：borderColor="red"

sample-08923 / core/avatar　borderColor：borderColor="pink"

sample-08924 / core/avatar　borderColor：borderColor="purple"

sample-08925 / core/avatar　borderColor：borderColor="deep"

sample-08926 / core/avatar　borderColor：borderColor="indigo"

sample-08927 / core/avatar　borderColor：borderColor="blue"

sample-08928 / core/avatar　borderColor：borderColor="light-blue"

sample-08929 / core/avatar　borderColor：borderColor="cyan"

sample-08930 / core/avatar　borderColor：borderColor="teal"

sample-08931 / core/avatar　borderColor：borderColor="green"

sample-08932 / core/avatar　borderColor：borderColor="light-green"

sample-08933 / core/avatar　borderColor：borderColor="lime"

sample-08934 / core/avatar　borderColor：borderColor="yellow"

sample-08935 / core/avatar　borderColor：borderColor="amber"

sample-08936 / core/avatar　borderColor：borderColor="orange"

sample-08937 / core/avatar　borderColor：borderColor="deep-orange"

sample-08938 / core/avatar　borderColor：borderColor="brown"

sample-08939 / core/avatar　borderColor：borderColor="light-grey"

sample-08940 / core/avatar　borderColor：borderColor="grey"

sample-08941 / core/avatar　borderColor：borderColor="dark-grey"

sample-08942 / core/avatar　borderColor：borderColor="cocoon-black"

sample-08943 / core/avatar　borderColor：borderColor="cocoon-white"

sample-08944 / core/avatar　borderColor：borderColor="watery-blue"

sample-08945 / core/avatar　borderColor：borderColor="watery-yellow"

sample-08946 / core/avatar　borderColor：borderColor="watery-red"

sample-08947 / core/avatar　borderColor：borderColor="watery-green"

sample-08948 / core/avatar　borderColor：borderColor="ex-a"

sample-08949 / core/avatar　borderColor：borderColor="ex-b"

sample-08950 / core/avatar　borderColor：borderColor="ex-c"

sample-08951 / core/avatar　borderColor：borderColor="ex-d"

sample-08952 / core/avatar　borderColor：borderColor="ex-e"

sample-08953 / core/avatar　borderColor：borderColor="ex-f"

sample-08954 / core/avatar　align：align="left"

sample-08955 / core/avatar　align：align="center"

sample-08956 / core/avatar　align：align="right"

sample-08957 / core/avatar　align：align="wide"

sample-08958 / core/avatar　align：align="full"

sample-08959 / core/avatar　align：align=""

sample-08960 / core/avatar　lock：lock={"move":false,"remove":false}

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

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

sample-08963 / core/avatar　lock：lock={"move":true,"remove":true}

sample-08964 / core/avatar　anchor：anchor="sample-anchor"

sample-08965 / core/avatar　className：className="block-gallery-example"

sample-08966 / core/avatar　余白の組み合わせ：style.spacing.padding={"top":"0","right":"0","bottom":"0","left":"0"} / style.spacing.margin={"top":"0","right":"0","bottom":"0","left":"0"}

sample-08967 / core/avatar　余白の組み合わせ：style.spacing.padding={"top":"1em","right":"1em","bottom":"1em","left":"1em"} / style.spacing.margin={"top":"1em","right":"1em","bottom":"1em","left":"1em"}

sample-08968 / core/avatar　余白の組み合わせ：style.spacing.padding={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"} / style.spacing.margin={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}

sample-08969 / core/avatar　枠線の組み合わせ：style.border.color="#19448e" / style.border.width="1px" / style.border.style="solid" / style.border.radius="0px"

sample-08970 / core/avatar　枠線の組み合わせ：style.border.color="#fff3ce" / style.border.width="3px" / style.border.style="dashed" / style.border.radius="12px"

sample-08971 / core/avatar　枠線の組み合わせ：style.border.color="#a82d46" / style.border.width="6px" / style.border.style="dotted" / style.border.radius="36px"

sample-08972 / core/avatar　デュオトーン：style.color.duotone=["#19448e","#fff3ce"]

sample-08973 / core/avatar　デュオトーン：style.color.duotone=["#222222","#ffffff"]

sample-08974 / core/avatar　extraBottomMargin：extraBottomMargin=""

sample-08975 / core/avatar　extraBottomMargin：extraBottomMargin="0"

sample-08976 / core/avatar　extraBottomMargin：extraBottomMargin="2"

sample-08977 / core/avatar　extraBottomMargin：extraBottomMargin="10"

sample-08978 / core/avatar　extraBottomMargin：extraBottomMargin="20"