ブロックサンプル：ナビゲーションリンク（1/1）

ナビゲーションリンク（1/1）

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

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

sample-08525 / core/navigation-link　基本形

sample-08526 / core/navigation-link　label：label="短いサンプル"

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

sample-08528 / core/navigation-link　description：description="短いサンプル"

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

sample-08530 / core/navigation-link　rel：rel="nofollow"

sample-08531 / core/navigation-link　rel：rel="noopener noreferrer"

sample-08532 / core/navigation-link　opensInNewTab：opensInNewTab=false

sample-08533 / core/navigation-link　opensInNewTab：opensInNewTab=true

sample-08534 / core/navigation-link　url：url="#gallery-top"

sample-08535 / core/navigation-link　url：url="https://wordpress.org/"

sample-08536 / core/navigation-link　title：title="短いサンプル"

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

sample-08538 / core/navigation-link　fontSize：fontSize="small"

sample-08539 / core/navigation-link　fontSize：fontSize="medium"

sample-08540 / core/navigation-link　fontSize：fontSize="large"

sample-08541 / core/navigation-link　fontSize：fontSize="huge"

sample-08542 / core/navigation-link　lock：lock={"move":false,"remove":false}

sample-08543 / core/navigation-link　lock：lock={"move":true,"remove":false}

sample-08544 / core/navigation-link　lock：lock={"move":false,"remove":true}

sample-08545 / core/navigation-link　lock：lock={"move":true,"remove":true}

sample-08546 / core/navigation-link　anchor：anchor="sample-anchor"

sample-08547 / core/navigation-link　className：className="block-gallery-example"

sample-08548 / core/navigation-link　文字組みの組み合わせ：style.typography.fontSize="14px" / style.typography.lineHeight="1.2" / style.typography.fontWeight="400" / style.typography.fontStyle="normal" / style.typography.letterSpacing="0" / style.typography.textTransform="none" / style.typography.textDecoration="none"

sample-08549 / core/navigation-link　文字組みの組み合わせ：style.typography.fontSize="24px" / style.typography.lineHeight="1.8" / style.typography.fontWeight="700" / style.typography.fontStyle="italic" / style.typography.letterSpacing="0.08em" / style.typography.textTransform="uppercase" / style.typography.textDecoration="underline"

sample-08550 / core/navigation-link　文字組みの組み合わせ：style.typography.fontSize="2rem" / style.typography.lineHeight="2.4" / style.typography.fontWeight="900" / style.typography.fontStyle="normal" / style.typography.letterSpacing="0.2em" / style.typography.textTransform="lowercase" / style.typography.textDecoration="line-through"

sample-08551 / core/navigation-link　文字組みの組み合わせ：style.typography.fontSize="14px" / style.typography.lineHeight="1.2" / style.typography.fontWeight="400" / style.typography.fontStyle="italic" / style.typography.letterSpacing="0" / style.typography.textTransform="capitalize" / style.typography.textDecoration="none"

sample-08552 / core/navigation-link　extraBottomMargin：extraBottomMargin=""

sample-08553 / core/navigation-link　extraBottomMargin：extraBottomMargin="0"

sample-08554 / core/navigation-link　extraBottomMargin：extraBottomMargin="2"

sample-08555 / core/navigation-link　extraBottomMargin：extraBottomMargin="10"

sample-08556 / core/navigation-link　extraBottomMargin：extraBottomMargin="20"

sample-08557 / core/navigation-link　長文と装飾の組み合わせ