ファイル – Block Editor 検証

Contents

デフォルト表示
ブロック設定パネル
スタイル設定
- 標準スタイル
ブロック制御コメント

デフォルト表示

<div class="wp-block-file">
	<a href="example.jpg">拡張子なしでファイル名が入る</a>
	<a href="example.jpg" class="wp-block-file__button" download="">ダウンロード</a>
</div>

テキストリンクやダウンロードの文字は変更可能

ブロック設定パネル

高度な設定

テキストリンク設定
リンク先を選択、メディアファイル / 添付ファイルのページ
新しいタブで開く

ダウンロードボタン設定
表示 / 非表示

スタイル設定

標準スタイル

.wp-block-file {
    margin-bottom:1.5em
}

.wp-block-file.aligncenter {
    text-align:center
}

.wp-block-file.alignright {
    text-align:right
}

.wp-block-file .wp-block-file__button {
    background: #32373c;
    border-radius: 2em;
    color: #fff;
    font-size: 13px;
    padding:.5em 1em
}

.wp-block-file a.wp-block-file__button {
    text-decoration:none
}

.wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited {
    box-shadow: none;
    color: #fff;
    opacity: .85;
    text-decoration:none
}

.wp-block-file * + .wp-block-file__button {
    margin-left:.75em
}

ブロック制御コメント

<!-- wp:file {"id":227,"href":"example.jpg","showDownloadButton":false} -->
<!-- /wp:file -->

<!-- wp:file {"id":227,"href":"example.jpg"} -->
<!-- /wp:file -->