このページでは、WordPressテーマ「Arkhe」における「コアブロック」の見た目について解説していきます。
このページを再現する検証用コード
「コアブロック挙動を自分の環境でも確認したい」という方は、自身の編集ページをコードエディターモードにして以下のコードをコピペしてください。
※ 一部、Arkhe Blocks Pro に含まれるブロックを使用しております。
<!-- wp:heading -->
<h2>段落ブロック</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>ここは普通の段落ブロックです。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap">ドロップキャップ設定ONの場合はこんな感じです。ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。クピダタットのつるの痛みになりたい宿題に、批判されてきたら痛み、マグナ逃亡しても結果の喜びを生成しません。</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3,"className":"is-style-article"} -->
<h3 class="is-style-article">書式設定</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p><strong>太字</strong> <em>イタリック</em> <a href="###">テキストリンク</a> <code>インラインコード</code> <kbd>キーボード入力</kbd> <span class="has-inline-color has-vivid-cyan-blue-color">テキスト色</span> <sup>上付き</sup> <sub>下付き</sub> <s>取り消し線</s></p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2>見出しH2</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":3} -->
<h3>見出しH3</h3>
<!-- /wp:heading -->
<!-- wp:heading {"level":4} -->
<h4>見出しH4</h4>
<!-- /wp:heading -->
<!-- wp:heading {"level":5} -->
<h5>見出しH5</h5>
<!-- /wp:heading -->
<!-- wp:heading {"level":6} -->
<h6>見出しH6</h6>
<!-- /wp:heading -->
<!-- wp:heading -->
<h2>リストブロック</h2>
<!-- /wp:heading -->
<!-- wp:list -->
<ul><li>番号なしリスト(<code>ul</code>)</li><li>リスト<ul><li>入れ子の番号なしリスト(<code>ul</code>)</li><li>リスト</li></ul></li></ul>
<!-- /wp:list -->
<!-- wp:list {"ordered":true} -->
<ol><li>番号ありリスト(<code>ol</code>)</li><li>リスト<ol><li>入れ子の番号ありリスト(<code>ol</code>)</li><li>リスト</li></ol></li></ol>
<!-- /wp:list -->
<!-- wp:list -->
<ul><li>番号なしリスト(<code>ul</code>)</li><li>リスト<ol><li>入れ子の番号ありリスト(<code>ol</code>)</li><li>リスト</li></ol></li></ul>
<!-- /wp:list -->
<!-- wp:list {"ordered":true} -->
<ol><li>番号ありリスト(<code>ol</code>)</li><li>リスト<ul><li>入れ子の番号なしリスト(<code>ol</code>)</li><li>リスト</li></ul></li></ol>
<!-- /wp:list -->
<!-- wp:heading -->
<h2>引用ブロック</h2>
<!-- /wp:heading -->
<!-- wp:quote {"align":"left"} -->
<blockquote class="wp-block-quote has-text-align-left"><p>「デフォルト」スタイルの引用ブロック</p><cite>引用元の表記</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:quote {"align":"left","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-left is-style-large"><p>「大」スタイルの引用ブロック</p><cite>引用元の表記</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:quote {"align":"center"} -->
<blockquote class="wp-block-quote has-text-align-center"><p>「デフォルト」: テキスト中央寄せ</p><cite>引用元の表記</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>「大」: テキスト中央寄せ</p><cite>引用元の表記</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:quote {"align":"right"} -->
<blockquote class="wp-block-quote has-text-align-right"><p>「デフォルト」: テキスト右寄せ</p><cite>引用元の表記</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:quote {"align":"right","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-right is-style-large"><p><em>「大」:</em> テキスト右寄せ</p><cite>引用元の表記</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:heading -->
<h2>プルクォートブロック</h2>
<!-- /wp:heading -->
<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>「デフォルト」スタイル</p><cite>引用元の表記</cite></blockquote></figure>
<!-- /wp:pullquote -->
<!-- wp:pullquote {"className":"is-style-solid-color"} -->
<figure class="wp-block-pullquote is-style-solid-color"><blockquote><p>「単色」スタイル</p><cite>引用元の表記</cite></blockquote></figure>
<!-- /wp:pullquote -->
<!-- wp:heading -->
<h2>テーブルブロック</h2>
<!-- /wp:heading -->
<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr></tbody></table><figcaption>「デフォルト」スタイル</figcaption></figure>
<!-- /wp:table -->
<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr></tbody></table><figcaption>「ストライプ」スタイル</figcaption></figure>
<!-- /wp:table -->
<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>ヘッダー</th><th>ヘッダー</th></tr></thead><tbody><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr><tr><td>テーブルだよ</td><td>テーブルだよテーブルだよ</td></tr></tbody></table><figcaption>「デフォルト」スタイル:ヘッダー付き</figcaption></figure>
<!-- /wp:table -->
<!-- wp:heading -->
<h2>コードブロック</h2>
<!-- /wp:heading -->
<!-- wp:code -->
<pre class="wp-block-code"><code><h1>Hello!</h1></code></pre>
<!-- /wp:code -->
<!-- wp:heading -->
<h2>整形済みテキストブロック</h2>
<!-- /wp:heading -->
<!-- wp:preformatted -->
<pre class="wp-block-preformatted">整形済みテキスト
スペースなどがそのまま出力されます。
スペースなどがそのまま出力されます。</pre>
<!-- /wp:preformatted -->
<!-- wp:heading -->
<h2>詩ブロック</h2>
<!-- /wp:heading -->
<!-- wp:verse -->
<pre class="wp-block-verse">詩ブロックです。</pre>
<!-- /wp:verse -->
<!-- wp:heading -->
<h2>画像ブロック</h2>
<!-- /wp:heading -->
<!-- wp:image {"width":375,"height":281,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://s.w.org/images/core/5.3/MtBlanc1.jpg" alt="" width="375" height="281"/><figcaption>「デフォルト」スタイル</figcaption></figure>
<!-- /wp:image -->
<!-- wp:image {"width":375,"height":281,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://s.w.org/images/core/5.3/MtBlanc1.jpg" alt="" width="375" height="281"/><figcaption>「角丸」スタイル</figcaption></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2>動画ブロック</h2>
<!-- /wp:heading -->
<!-- wp:video {"id":948} -->
<figure class="wp-block-video"><video controls src="https://arkhe-theme.com/ja/wp-content/uploads/2020/12/Sky-37697_min.mp4"></video><figcaption>動画キャプション</figcaption></figure>
<!-- /wp:video -->
<!-- wp:heading -->
<h2>ギャラリーブロック</h2>
<!-- /wp:heading -->
<!-- wp:gallery {"ids":[15,14,13],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d-1024x683.jpeg" alt="" data-id="15" data-full-url="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d.jpeg" data-link="https://arkhe-theme.com/ja/photo-1479981280584-037818c1297d/" class="wp-image-15"/><figcaption class="blocks-gallery-item__caption">キャプション</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1459111701074-c0ee7842cccb-1024x683.jpeg" alt="" data-id="14" data-full-url="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1459111701074-c0ee7842cccb.jpeg" data-link="https://arkhe-theme.com/ja/photo-1459111701074-c0ee7842cccb/" class="wp-image-14"/><figcaption class="blocks-gallery-item__caption">キャプション</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/P1020806_s-1024x769.jpg" alt="" data-id="13" data-full-url="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/P1020806_s.jpg" data-link="https://arkhe-theme.com/ja/p1020806_s/" class="wp-image-13"/><figcaption class="blocks-gallery-item__caption">キャプション</figcaption></figure></li></ul><figcaption class="blocks-gallery-caption">ギャラリーブロック全体のキャプション</figcaption></figure>
<!-- /wp:gallery -->
<!-- wp:heading -->
<h2>カバーブロック</h2>
<!-- /wp:heading -->
<!-- wp:cover {"minHeight":200,"gradient":"vivid-cyan-blue-to-vivid-purple"} -->
<div class="wp-block-cover has-background-dim has-background-gradient has-vivid-cyan-blue-to-vivid-purple-gradient-background" style="min-height:200px"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">背景画像なし</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d.jpeg","id":15,"overlayColor":"black","minHeight":200,"minHeightUnit":"px"} -->
<div class="wp-block-cover has-black-background-color has-background-dim" style="background-image:url(https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d.jpeg);min-height:200px"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">背景画像あり</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:heading -->
<h2>メディアと文章ブロック</h2>
<!-- /wp:heading -->
<!-- wp:media-text {"align":"","mediaId":15,"mediaLink":"https://arkhe-theme.com/ja/photo-1479981280584-037818c1297d/","mediaType":"image","imageFill":false} -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://arkhe-theme.com/ja/wp-content/uploads/2020/09/photo-1479981280584-037818c1297d-1024x683.jpeg" alt="" class="wp-image-15 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…","fontSize":"large"} -->
<p class="has-large-font-size">通常幅のメディアと文章ブロック。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>※ コアの使用により、ブロック配置時は「幅広」がデフォルトで設定されます。(WordPress5.6 現在)</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->
<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:media-text {"align":"","mediaPosition":"right","mediaId":948,"mediaLink":"https://arkhe-theme.com/ja/?attachment_id=948","mediaType":"video","imageFill":false} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://arkhe-theme.com/ja/wp-content/uploads/2020/12/Sky-37697_min.mp4"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"コンテンツ…","fontSize":"large"} -->
<p class="has-large-font-size">メディア逆配置 & 動画</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>※ コアの使用により、ブロック配置時は「幅広」がデフォルトで設定されます。(WordPress5.6 現在)</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->
<!-- wp:heading -->
<h2>音声ブロック</h2>
<!-- /wp:heading -->
<!-- wp:audio -->
<figure class="wp-block-audio"><audio controls src="https://classical-sound.up.seesaa.net/image/Beethoven-PianoSonata-No8-2nd-2020-AR.mp3"></audio><figcaption>ベートーヴェン:ピアノソナタ 第8番 ハ短調 Op.13 「悲愴」 第2楽章</figcaption></figure>
<!-- /wp:audio -->
<!-- wp:heading -->
<h2>ファイルブロック</h2>
<!-- /wp:heading -->
<!-- wp:file {"id":605,"href":"https://arkhe-theme.com/ja/wp-content/uploads/2020/11/arkhe-favicon.png","showDownloadButton":false} -->
<div class="wp-block-file"><a href="https://arkhe-theme.com/ja/wp-content/uploads/2020/11/arkhe-favicon.png">arkhe-favicon.png</a></div>
<!-- /wp:file -->
<!-- wp:file {"id":605,"href":"https://arkhe-theme.com/ja/wp-content/uploads/2020/11/arkhe-favicon.png"} -->
<div class="wp-block-file"><a href="https://arkhe-theme.com/ja/wp-content/uploads/2020/11/arkhe-favicon.png">arkhe-favicon.png</a><a href="https://arkhe-theme.com/ja/wp-content/uploads/2020/11/arkhe-favicon.png" class="wp-block-file__button" download>ダウンロード</a></div>
<!-- /wp:file -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background" href="###">ボタンブロック</a></div>
<!-- /wp:button -->
<!-- wp:button {"textColor":"vivid-cyan-blue","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-vivid-cyan-blue-color has-text-color" href="###">アウトライン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background" href="###">中央寄せ</a></div>
<!-- /wp:button -->
<!-- wp:button {"textColor":"vivid-cyan-blue","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-vivid-cyan-blue-color has-text-color" href="###">アウトライン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons {"align":"right"} -->
<div class="wp-block-buttons alignright"><!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background" href="###">右寄せ</a></div>
<!-- /wp:button -->
<!-- wp:button {"textColor":"vivid-cyan-blue","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-vivid-cyan-blue-color has-text-color" href="###">アウトライン</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:heading -->
<h2>カラムブロック</h2>
<!-- /wp:heading -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
<p class="has-pale-cyan-blue-background-color has-background">カラムブロック</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>↑ の色がついている部分は段落です。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
<p class="has-pale-cyan-blue-background-color has-background">カラムブロック</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>↑ の色がついている部分は段落です。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:heading -->
<h2>グループブロック</h2>
<!-- /wp:heading -->
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>ここはグループブロックです。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>ここはグループブロックです。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>ここはグループブロックです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->
<!-- wp:arkhe-blocks/notice {"type":"alert","icon":"arkb-svg-alert","className":"is-style-simple"} -->
<div class="ark-block-notice -alert is-style-simple"><div class="ark-block-notice__head"><svg class="arkb-svg arkb-svg-alert ark-block-notice__icon" viewbox="0 0 40 40" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M38.7,32.8l-17-29.6c-0.8-1.3-2.6-1.3-3.4,0l-17,29.6c-0.8,1.3,0.2,2.9,1.7,2.9h34.1C38.6,35.7,39.5,34.1,38.7,32.8z M22.6,10.8l-0.6,13c0,0.1-0.1,0.2-0.2,0.2h-3.5c-0.1,0-0.2-0.1-0.2-0.2l-0.6-13c0-0.3,0.2-0.5,0.5-0.5h4.2 C22.4,10.3,22.6,10.5,22.6,10.8z M20,32.8c-1.8,0-3.2-1.5-3.2-3.2s1.5-3.2,3.2-3.2s3.2,1.5,3.2,3.2S21.8,32.8,20,32.8z"></path></svg></div><div class="ark-block-notice__body ark-keep-mt--s"><!-- wp:paragraph -->
<p><a href="https://arkhe-theme.com/ja/manual/style-guide/fullwide/">「全幅」かつ「背景色」が設定されている時の挙動 </a>については、少し特殊ですのでご注意ください。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:arkhe-blocks/notice -->
<!-- wp:heading -->
<h2>区切りブロック</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">▼ デフォルト ▼</p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">▼ 幅広線 ▼</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">▼ ドット ▼</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">▼ 色付き ▼</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"color":"vivid-cyan-blue"} -->
<hr class="wp-block-separator has-text-color has-background has-vivid-cyan-blue-background-color has-vivid-cyan-blue-color"/>
<!-- /wp:separator -->
<!-- wp:separator {"color":"vivid-cyan-blue","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-vivid-cyan-blue-background-color has-vivid-cyan-blue-color is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:separator {"color":"vivid-cyan-blue","className":"is-style-dots"} -->
<hr class="wp-block-separator has-text-color has-background has-vivid-cyan-blue-background-color has-vivid-cyan-blue-color is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:arkhe-blocks/notice {"type":"memo","icon":"arkb-svg-pen","className":"is-style-simple"} -->
<div class="ark-block-notice -memo is-style-simple"><div class="ark-block-notice__head"><svg class="arkb-svg arkb-svg-pen ark-block-notice__icon" viewbox="0 0 40 40" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M38,36.2L38,36.2c0,0.6-0.4,1-1,1H15c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h22C37.6,35.2,38,35.6,38,36.2z M24.1,11.2 L15.2,6l1.7-2.9c0.5-0.8,2.8-0.3,5.3,1.1s4.1,3.3,3.6,4.1L24.1,11.2L24.1,11.2z M23.1,12.8L12,32.1l-1,1.7l0,0 c-0.1,0.2-0.2,0.3-0.4,0.4l-4.3,1.9l-2.3,1c-0.3,0.1-0.5,0.1-0.8,0.1C3.1,37.1,3,37,2.9,36.9c0-0.1-0.1-0.3-0.1-0.4l-0.1-0.7L2.5,34 l-0.1-1.1L2,29.3c0-0.2,0-0.3,0.1-0.5l0,0v-0.1l1-1.7L14.2,7.8L23.1,12.8z M9.9,33l0.7-1c-0.6-0.7-1.4-1.4-2.5-2.1L7,29.3 c-1.1-0.6-2.2-1-3-1.1l-0.6,1l0.2,2.7c0.7,0.3,1.3,0.6,2,1c0.6,0.3,1.2,0.8,1.8,1.2L9.9,33L9.9,33z"></path></svg></div><div class="ark-block-notice__body ark-keep-mt--s"><!-- wp:paragraph -->
<p>基本は <code>opacity:.5</code> ですが、色設定がある場合は <code>opacity:1</code> になります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:arkhe-blocks/notice -->
<!-- wp:heading -->
<h2>スペーサーブロック</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">(以下、200pxのスペーサーを配置しています)</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:separator {"className":"is-style-dots"} -->
<hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
段落ブロック
ここは普通の段落ブロックです。
ドロップキャップ設定ONの場合はこんな感じです。ロレム・イプサムの座り雨、トマ好き学習エリット、しかし時と活力、そのような躍動と楽しみ、ブラインド行うにはいくつかの重要な事柄に座ります。長年にわたり、私は学区と長寿であれば、そのような刺激の取り組み、彼女のうち、運動の利点を分注を邪魔されたする人が来ます。クピダタットのつるの痛みになりたい宿題に、批判されてきたら痛み、マグナ逃亡しても結果の喜びを生成しません。
書式設定
太字 イタリック テキストリンク インラインコード
キーボード入力 テキスト色 上付き 下付き 取り消し線
見出しブロック
見出しH2
見出しH3
見出しH4
見出しH5
見出しH6
リストブロック
- 番号なしリスト(
ul
) - リスト
- 入れ子の番号なしリスト(
ul
) - リスト
- 入れ子の番号なしリスト(
- 番号ありリスト(
ol
) - リスト
- 入れ子の番号ありリスト(
ol
) - リスト
- 入れ子の番号ありリスト(
- 番号なしリスト(
ul
) - リスト
- 入れ子の番号ありリスト(
ol
) - リスト
- 入れ子の番号ありリスト(
- 番号ありリスト(
ol
) - リスト
- 入れ子の番号なしリスト(
ol
) - リスト
- 入れ子の番号なしリスト(
引用ブロック
「デフォルト」スタイルの引用ブロック
引用元の表記
「大」スタイルの引用ブロック
引用元の表記
「デフォルト」: テキスト中央寄せ
引用元の表記
「大」: テキスト中央寄せ
引用元の表記
「デフォルト」: テキスト右寄せ
引用元の表記
「大」: テキスト右寄せ
引用元の表記
プルクォートブロック
テーブルブロック
テーブルだよ | テーブルだよテーブルだよ |
テーブルだよ | テーブルだよテーブルだよ |
テーブルだよ | テーブルだよテーブルだよ |
テーブルだよ | テーブルだよテーブルだよ |
テーブルだよ | テーブルだよテーブルだよ |
テーブルだよ | テーブルだよテーブルだよ |
ヘッダー | ヘッダー |
---|---|
テーブルだよ | テーブルだよテーブルだよ |
テーブルだよ | テーブルだよテーブルだよ |
コードブロック
<h1>Hello!</h1>
整形済みテキストブロック
整形済みテキスト スペースなどがそのまま出力されます。 スペースなどがそのまま出力されます。
詩ブロック
詩ブロックです。
画像ブロック
動画ブロック
ギャラリーブロック
カバーブロック
背景画像なし
背景画像あり
メディアと文章ブロック
通常幅のメディアと文章ブロック。
※ コアの使用により、ブロック配置時は「幅広」がデフォルトで設定されます。(WordPress5.6 現在)
メディア逆配置 & 動画
※ コアの使用により、ブロック配置時は「幅広」がデフォルトで設定されます。(WordPress5.6 現在)
音声ブロック
ファイルブロック
ボタンブロック
カラムブロック
カラムブロック
↑ の色がついている部分は段落です。
カラムブロック
↑ の色がついている部分は段落です。
グループブロック
ここはグループブロックです。
ここはグループブロックです。
ここはグループブロックです。
「全幅」かつ「背景色」が設定されている時の挙動 については、少し特殊ですのでご注意ください。
区切りブロック
▼ デフォルト ▼
▼ 幅広線 ▼
▼ ドット ▼
▼ 色付き ▼
基本は opacity:.5
ですが、色設定がある場合は opacity:1
になります。
スペーサーブロック
(以下、200pxのスペーサーを配置しています)