スタイル - スタイルリファレンス（Styles Reference） - 《WordPress開発者リソース》日本語

ボーダー

ボーダー

border スタイルプロパティを使用する方法は2つあります。最初の方法は、表に示されたプロパティを使用して、ブロックまたは要素のすべての側面をターゲットにすることです：

プロパティ	タイプ	CSSプロパティ
`border.radius`	文字列、オブジェクト	`border-radius`
`border.color`	文字列、オブジェクト	`border-color`
`border.style`	文字列、オブジェクト	`border-style`
`border.width`	文字列、オブジェクト	`border-width`

theme.json での使用例：

bash { "version": 2, "styles": { "border": { "color": "#000000", "style": "solid", "width": "1px" } } } 

2つ目の方法は、top、right、bottom、および left の側面を特定してターゲットにすることです：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| border.<side>.color | 文字列、オブジェクト | border-<side>-color |
| border.<side>.style | 文字列、オブジェクト | border-<side>-style |
| border.<side>.width | 文字列、オブジェクト | border-<side>-width |

theme.json での使用例：

bash { "version": 2, "styles": { "border": { "top": { "color": "#000000", "style": "solid", "width": "1px" } } } } 

## カラー

color スタイルプロパティを使用すると、ブロックまたは要素のデフォルトのテキスト、背景、およびリンクの色を定義できます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| color.text | 文字列、オブジェクト | color |
| color.background-color | 文字列、オブジェクト | background-color |
| color.link | 文字列、オブジェクト | color (ネストされた <a> 要素に適用) |

theme.json での使用例：

bash { "version": 2, "styles": { "blocks": { "core/group": { "color": { "text": "#000000", "background": "#ffffff", "link": "#777777" } } } } } 

## 寸法

dimensions スタイルプロパティを使用すると、ブロックまたは要素の最小高さを定義できます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| dimensions.minHeight | 文字列、オブジェクト | min-height |

theme.json での使用例：

bash { "version": 2, "styles": { "blocks": { "core/cover": { "dimensions": { "minHeight": "50vh" } } } } } 

## フィルター

filter スタイルプロパティを使用すると、ブロックまたは要素のフィルターを定義できます。現在、デフォルトのデュオトーンフィルターを設定できます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| filter.duotone | 文字列、オブジェクト | filter |

theme.json での使用例：

bash { "version": 2, "styles": { "blocks": { "core/image": { "filter": { "duotone": "var(--wp--preset--duotone--default-filter)" } } } } } 

## シャドウ

shadow スタイルプロパティを使用すると、ブロックまたは要素のデフォルトのボックスシャドウスタイルを定義できます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| shadow | 文字列、オブジェクト | box-shadow |

theme.json での使用例：

bash { "version": 2, "styles": { "blocks": { "core/heading": { "shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)" } } } } 

## スペーシング

spacing スタイルプロパティを使用すると、ブロックまたは要素のデフォルトのギャップ、マージン、およびパディングを定義できます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| blockGap | 文字列、オブジェクト | margin-top、 gap |
| margin.<side> | 文字列、オブジェクト | margin-<side> |
| padding.<side> | 文字列、オブジェクト | padding-<side> |

top、right、bottom、left のいずれかまたはすべての側面を margin および padding スタイルプロパティに定義できます。

theme.json での使用例：

bash { "version": 2, "styles": { "spacing": { "blockGap": "2rem", "margin": { "top": "2rem", "bottom": "2rem" }, "padding": { "left": "2rem", "right": "2rem" } } } } 

## タイポグラフィ

typography スタイルプロパティを使用すると、ブロックまたは要素のデフォルトのフォントおよびテキスト関連スタイルを定義できます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| fontFamily | 文字列、オブジェクト | font-family |
| fontSize | 文字列、オブジェクト | font-size |
| fontStyle | 文字列、オブジェクト | font-style |
| fontWeight | 文字列、オブジェクト | font-weight |
| letterSpacing | 文字列、オブジェクト | letter-spacing |
| lineHeight | 文字列、オブジェクト | line-height |
| textColumns | 文字列 | columns |
| textDecoration | 文字列、オブジェクト | text-decoration |
| writingMode | 文字列、オブジェクト | writing-mode |

theme.json での使用例：

bash { "version": 2, "styles": { "blocks": { "core/paragraph": { "typography": { "fontFamily": "Georgia, serif", "fontSize": "1.25rem", "fontStyle": "normal", "fontWeight": "500", "letterSpacing": "0", "lineHeight": "1.6", "textDecoration": "none" } } } } } 

## CSS

css プロパティを使用すると、ブロックまたは要素の theme.json に直接カスタムCSSを書くことができます：

| プロパティ | タイプ | CSSプロパティ |
| —- | —- | —- |
| css | 文字列 | — |

theme.json での使用例：

{
    "version": 2,
    "styles": {
        "blocks": {
            "core/gallery": {
            "css": "--wp--style--gallery-gap-default: 1rem;"
            }
        }
    }
}

css スタイルプロパティの使用方法について詳しくは、WordPress Developer Blog の Per-block CSS with theme.json をお読みください。