コードブロック

ブロック一覧へ戻る

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

コードブロックの例:

if ( condition ) {
    action1();
    action2();
} elseif ( condition2 && condition3 ) {
    action3();
    action4();
} else {
    defaultaction();
}

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

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

ブロック追加の詳しい方法はこちらをご覧ください。

ブロックツールバー ブロックツールバー

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

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

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

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

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

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

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

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

移動用ハンドル

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

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

テキスト編集オプション

太字とイタリック

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

ハイパーリンク挿入

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

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

新しいタブで開く

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

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

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

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

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

インラインコード

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

インライン画像

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

キーボード入力

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

テキスト色

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

例: リスト段落画像

上付き

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

例: リストブロック

下付き

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

例: リストブロック

打ち消し線

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

例: リストブロック

テキスト編集オプション

追加設定を非表示

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

コピー

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

複製

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

前に挿入

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

後に挿入

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

移動

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

HTML として編集

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

再利用ブロックに追加

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

グループ化

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

ブロックを削除

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

トップ ↑

ブロック設定 ブロック設定

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

タイポグラフィ

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

高度な設定

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

HTML アンカーは特定のコードブロックユニークな Web アドレスを作ることができます。その後、ページ内のコードブロックへ直接リンクできます。

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

変更履歴

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

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