コードブロック

広告

WordPress のブロックエディタで利用可能な「コード」ブロックの使い方について解説します。「コード」ブロックはフォーマットブロックの中に含まれており、プログラムのソースコードを記事本文に追加する時に使用します。

コードブロックを追加する

ブロックエディタで「コード」ブロックを追加するには、ブロックタイプを選択する画面で「フォーマット」の中にある「コード」をクリックしてください。

コードブロックを追加する(1)

「コード」ブロックが追加されます。

コードブロックを追加する(2)

ブロックの検索ボックスで「/コード」と検索して表示することもできます。

コードブロックを追加する(3)

「コード」ブロックに記述するプログラムのソースコードを入力します。今回は次のような簡単なソースコードを入力しました。

class Hello{
  public static void main(String[] args){
    System.out.println("Hello");
  }
}

コードブロックを追加する(4)

なお「コード」ブロックを追加したあと、コードエディタに切り替えて確認してみると次のようなコードが入力されています。

<!-- wp:code -->
<pre class="wp-block-code"><code>class Hello{
  public static void main(String[] args){
    System.out.println("Hello");
  }
}</code></pre>
<!-- /wp:code -->

コードブロックのツールバーオプション

「コード」ブロックを選択するとツールバーが上部に表示されます。

コードブロックのツールバーオプション(1)

ツールバー上のボタンについてそれぞれ使い方は次の通りです。

ブロックタイプまたはスタイルを変更

「ブロックタイプまたはスタイルを変更」アイコンをクリックすると「コード」ブロックを別のブロックタイプのブロックに変更することができます。

ブロックタイプまたはスタイルを変更(1)

「コード」ブロックから変更できるブロックタイプは「グループ」「整形済みテキスト」の 2 種類です。

ブロックタイプまたはスタイルを変更(2)

コードブロックのサイドバーオプション

コードブロックを選択するとサイドバーにオプションが表示されます。

コードブロックのサイドバーオプション(1)

サイドバーに表示されているオプションの使い方は次の通りです。

高度な設定

高度な設定では「コード」ブロックに対して適用する CSS クラス名を指定することができます。

高度な設定(1)

例えば mycode と入力してみます。

高度な設定(2)

コードエディタに切り替えて確認してみると class 属性が設定されていることが確認できます。

<!-- wp:code {"className":"mycode"} -->
<pre class="wp-block-code mycode"><code>class Hello{
  public static void main(String[] args){
    System.out.println("Hello");
  }
}</code></pre>
<!-- /wp:code -->

-- --

WordPress のブロックエディタで利用可能な「コード」ブロックの使い方について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。