Title: コードブロック
Author: Dion Hulse
Published: 2019年3月7日
Last modified: 2024年10月4日

---

## カテゴリー

 * [はじめに](https://ja.wordpress.org/support/category/getting-started/)
 * [インストール](https://ja.wordpress.org/support/category/installation/)
 * [基本的な使い方](https://ja.wordpress.org/support/category/basic-usage/)
 * [基本的な管理](https://ja.wordpress.org/support/category/basic-administration/)
 * [カスタマイズ](https://ja.wordpress.org/support/category/customizing/)
 * [メンテナンス](https://ja.wordpress.org/support/category/maintenance/)
 * [セキュリティ](https://ja.wordpress.org/support/category/security/)
 * [高度なトピック](https://ja.wordpress.org/support/category/advanced-topics/)
 * [トラブルシューティング](https://ja.wordpress.org/support/category/troubleshooting/)

## 翻訳・改善にご協力ください

 ドキュメンテーションを現在[英語版](https://wordpress.org/support/)から翻訳中です。
どなたでも[ご協力いただけます](https://ja.wordpress.org/team/2019/08/06/359/)。

 誤字や間違った情報にお気づきの方は、各記事の下にあるフィードバックセクションから
お知らせください。

# コードブロック

[**ブロック一覧**へ戻る](https://ja.wordpress.org/support/article/blocks/?output_format=md)

クラシックエディターでソースコード投稿機能を使うのと同様に、**コードブロック**を
使うと、他のユーザーに見せるフォーマット済みコードを追加できます。

**コードブロック**の例:

    ```wp-block-code
    if ( condition ) {
        action1();
        action2();
    } elseif ( condition2 && condition3 ) {
        action3();
        action4();
    } else {
        defaultaction();
    }
    ```

**コードブロック**を追加するには、_ブロックを追加_ボタンをクリックして**コードブロック**
を選びます。

または `/code` (もしくは `/コード`)と入力して Enter キーを押せば素早く追加できます。

![](https://wordpress.org/support/files/2021/02/Screenshot-454535.png)

_ブロック追加の詳しい方法は[こちら](https://ja.wordpress.org/support/article/adding-a-new-block/?output_format=md)
をご覧ください。_

## ブロックツールバー

各ブロックにはそれ固有のツールバーアイコンとコントロールがあり、エディター内でブロック
を操作できます。

コードブロックには標準で3個のボタンがあります:

 * ブロックタイプまたはスタイルを変更
 * 移動用ハンドル
 * 他のオプション

![](https://wordpress.org/support/files/2020/09/Untitled-2.png)

テキスト(コード)の編集中は、テキスト編集オプションの4個のボタンが現れます:

[[

 * 太字
 * イタリック
 * リンク
 * 他のテキスト編集オプション

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

![](https://wordpress.org/support/files/2019/03/Screenshot2323.png)

**コードブロック**は**グループ**、**カラム**、**カスタム HTML ブロック**、**整形
済みテキストブロック**へ変換できます。**グループ**を使うと**コードブロック**の周囲
の背景色を変更できます。

![](https://wordpress.org/support/files/2019/03/Untitled-2676757.png)

グループ化して**色のコントロール**がある**コードブロック**のエディター画面

**移動用ハンドル**

![](https://wordpress.org/support/files/2020/09/Untitled-25654654.png)

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

_エディター内でブロックを移動する詳しい方法は[こちら](https://ja.wordpress.org/support/article/moving-blocks/?output_format=md)
をご覧ください。_

**テキスト編集オプション**

**太字とイタリック**

とても頻繁に使われるので、太字とイタリックの専用ボタンがツールバーにあります。ショートカット
は CTRL+b (または Command+B)が太字、CTRL+i (または Command+i)がイタリックです。

**ハイパーリンク挿入**

選択中のテキストにハイパーリンクを挿入するには「チェーンリンク」アイコンを使います。
キーボードショートカットの CTRL+k (または Command+k)も使えます。

[[

テキストボックスに「検索」とあるのは、サイト内を検索できることを示しています。キーワード
を入力すると、現在のサイト内の投稿や固定ページのリストが表示され、サイト内リンク
を作成できます。

**新しいタブで開く**

トグルスイッチで新しいページをどこに開くかコントロールできます:

 * **オフ**ならブラウザーの同じタブ
 * **オン**ならブラウザーの新しいタブ

デフォルトはオフなので、リンクされたページをどこに表示するかをサイト訪問者に自分
でコントロールしてもらいます。

**ヒント**: _リンクしたいサイトの URL がクリップボードにある場合は、テキストを選択
してから CTRL+v (または Command+v) を使えば、そのテキストにハイパーリンクを追加でき
ます。_

**他のテキスト編集オプション**

[[

**インラインコード**

テキストが短いコンピューターのコードであることを示すには「**インラインコード**」
が使えます。

**インライン画像**

リスト項目に画像を入れるには「**インライン画像**」が使えます。

**キーボード入力**

HTML の `<kbd>` 要素を適用するには「**キーボード入力**」が使えます。

**テキスト色**

テキストの色を指定するには「**テキスト色**」が使えます。

例: **リスト**, **段落**, **画像**

**上付き**

文字を普通より少し上にするには「**上付き**」が使えます。

例: リスト^(ブロック)

**下付き**

文字を普通より少し下にするには「**下付き**」が使えます。

例: リスト_(ブロック)

**打ち消し線**

選択したテキストの真ん中に水平線を引くには「**打ち消し線**」が使えます。

例: ~リストブロック~

**テキスト編集オプション**

[[

**追加設定を非表示**

_追加設定を非表示_オプションを使うと、エディターのサイドバーにある「ブロック設定」
パネルを隠す(または表示する)ことができます。

**コピー**

_コピー_を使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付け
できます。

**複製**

_複製_を使うと、選択したブロックを複製できます。

**前に挿入**

新しいブロックを選択したブロックの前へ挿入します。

**後に挿入**

新しいブロックを選択したブロックの後へ挿入します。

**移動**

_移動_を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動
し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロック
がそこへ移動します。

**HTML として編集**

_HTML として編集_を使うと、選択したブロックの HTML コードを変更できます。

**再利用ブロックに追加**

_再利用ブロックに追加_オプションを使うと、選択したブロックを再利用ブロックのリスト
へ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。 

**グループ化**

ブロックをまとめて一つの単位として扱いたい場合、_グループ化_オプションを選択します。
例えば共通の背景色や他のブロックをグループへ追加できます。 

**ブロックを削除**

_ブロックを削除_オプションを使うと、選択したブロックをコンテンツから削除できます。

## ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディター
のサイドバーにあります。_もしサイドバーが見当たらなければ、公開ボタンの隣にある「
歯車」ボタンをクリックしてください。_

[[

**タイポグラフィ**

![](https://wordpress.org/support/files/2021/02/Screenshot3434.png)

**タイポグラフィ**は**コードブロック**のコンテンツのフォントサイズを定義するオプション
です。フォントサイズとは画面に表示する文字の大きさです。エディターにはデフォルト
で5通りのフォントサイズと、好みのサイズを入力できるカスタムフォントサイズのオプション
があります。

**高度な設定**

**高度な設定**パネルを使うと、HTML アンカーと CSS クラスをブロックへ追加できます。

[[

**HTML アンカー**は特定の**コードブロック**に[ユニークな Web アドレスを作る](https://ja.wordpress.org/support/article/page-jumps/?output_format=md)
ことができます。その後、ページ内の**コードブロック**へ直接リンクできます。

**追加 CSS クラス**はブロックへ CSS クラスを追加できます。その後、カスタム CSS を
書いてブロックに好みのスタイルを付けることができます。

#### **変更履歴 **

 * 更新: 2021-02-27
    - タイポグラフィオプションを追加
 * 更新: 2020-09-13
    - WordPress 5.5 のスクリーンショットと動画
    - ブロックツールバーの機能変更に対応
    - ブロック設定の機能変更に対応
 * 新規作成: 2019-03-07

[原文](https://wordpress.org/documentation/article/code-block/)

## この記事は役に立ちましたか ? どうすればさらに改善できますか ?

フィードバックを送信するには[ログイン](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fja.wordpress.org%2Fsupport%2Farticle%2Fcode-block%2F&locale=ja)
する必要があります。