Resource Centerリソースセンター

前回は、ブロックの追加・削除・移動といった、ブロックそのものを操作する基本的な使い方について解説しました。
今回はブロックパネルを使って、ブロックごとの見た目の調整する方法について解説します。
ブロックパネルでは、文字のスタイルや余白、配置などをブロック単位で設定でき、ページ全体のデザインを整えることができます。
設定できる項目はブロックの種類によって異なりますが、基本的な操作方法を理解しておけば、初めて使うブロックでもどのように調整すればよいかイメージしやすくなります。
※画面の表示や利用できる機能、ブロックの見た目は、ご利用のWordPress環境によって異なります。

機能の追加

「上部ツールバー > 設定」から「ブロック」タブを選択すると、選択中のブロックで使用できる機能が表示されるパネルが開きます。以降、このパネルをブロックパネルと呼びます。

各項目名の右にある「オプション」ボタンをクリックすると、利用できる機能一覧が表示されます。チェックを入れた機能のみが設定画面に表示され、チェックを外すと非表示となり、設定できなくなります。

タイポグラフィ

フォントサイズ

文字の大きさを変更する機能です。

「タイポグラフィ > フォントサイズ」から、サイズを選択します。

フォント

文字の書体を変更する機能です。

「タイポグラフィ > フォント」から、書体を選択します。

外観

文字の太さや斜体を変更する機能です。

「タイポグラフィ > 外観」から、文字のスタイルを選択します。

行の高さ

行間を変更する機能です。

「タイポグラフィ > 行の高さ」から、数値を入力、または「＋」「－」ボタンで設定します。値が大きいほど行間が広くなります。

文字間隔

文字同士の間隔を変更する機能です。

「タイポグラフィ > 文字間隔」から、数値を入力します。

行インデント

段落の先頭位置（文字下げ）を変更する機能です。

「タイポグラフィ > 行インデント」から、数値を入力、またはスライダーで調整します。

カラム

テキストを複数の列に分割して表示する機能です。

「タイポグラフィ > カラム」から、分けたい列の数を入力、または「＋」「－」ボタンで設定します。

装飾

テキストに下線や打ち消し線を追加する機能です。

「タイポグラフィ > 装飾」から、テキストの下線や打ち消し線の有無を選択します。

方向

テキストの表示方向を変更し、縦書きや横書きにする機能です。

「タイポグラフィ > 方向」から、縦書きまたは横書きを選択します。

大文字小文字

英字の大文字・小文字の表示形式を変更する機能です。

「タイポグラフィ > 大文字小文字」から、英字の表示形式を選択します。
「-」：入力した通りに表示（変更なし）
「AB」：すべて大文字で表示
「ab」：すべて小文字で表示
「Ab」：先頭の文字のみ大文字で表示

ドロップキャップ

ブロックの先頭の文字を大きくする機能です。

「タイポグラフィ > ドロップキャップ」にチェックを入れます。

テキストを合わせる

ブロックの幅に合わせて文字サイズを自動調整する機能です。

「タイポグラフィ > テキストを合わせる」にチェックを入れます。

色

色はカスタムカラー、テーマカラーから設定できます。

各項目をクリックすると、色設定パネルが表示されます。

カスタムと表示されている上のエリアをクリックすると、好きな色を自由に設定できます。

あらかじめテーマで用意された配色から選択することもできます。テーマカラーが用意されていない場合は、この機能は表示されません。

テキスト

文字色を変更する機能です。

「色 > テキスト」から色を選択します。

リンク

リンク文字の色を設定する機能です。
通通常時やマウスを合わせたときの色を変更することで、リンクであることを視覚的に分かりやすくできます。

「色 > リンク」から色を選択します。

「デフォルト」と「ホバー」タブを切り替えて、それぞれの色を設定します。
デフォルトは通常時の色で、ホバーはマウスをリンクに合わせたときに表示される色です。

背景

ブロックの背景色を変更する機能です。

「色 > 背景」から色を選択します。
背景は、カスタムカラー・テーマカラーに加えて、グラデーションも使用できます。

タブから「グラデーション」を選択すると、2色以上の色を組み合わせて設定できます。

サイズ

サイズは、スライダーから選択、または数値入力で設定できます。

スライダーを動かしてサイズを選択できます。

細かく調整したい場合は、「カスタム値を設定」をクリックすると入力欄が表示されます。

数値を入力します。

パディング

ブロックの内側の余白を変更する機能です。

「サイズ > パディング」から、余白の大きさを設定します。

マージン

ブロックの外側の余白を変更する機能です。

「サイズ > マージン」から、余白の大きさを設定します。

枠線

枠線

枠線の太さ、色、スタイルを変更する機能です。

「枠線 > 枠線」から、数値を入力、またはスライダーで線の太さを設定します。

「枠線色とスタイルピッカー」をクリックすると、設定メニューが開きます。

カラーピッカー、またはテーマカラーから線の色を設定します。

スタイルから線の種類を選択します。

角丸

ブロックの角を丸くする機能です。

「枠線 > 角丸」から、数値を入力、またはスライダーで設定します。値が大きいほど、角が丸くなります。

スタイル

あらかじめテーマで用意されたデザインスタイルをブロックに適用する機能です。色やサイズ、フォントなどを個別に設定しなくても、ワンクリックで統一されたデザインを適用できます。テーマにスタイルが用意されていない場合は表示されません。

「スタイル」から、ブロックスタイルを選択します。

まとめ

今回は、ブロックパネルを使って、ブロック全体の見た目を調整する方法について解説しました。
設定できる項目は、ブロックの種類によって異なります。今回は、テキスト系のブロックを中心に、多くのブロックで共通して利用できる基本的な設定項目を紹介しました。各ブロック固有の設定については、それぞれのブロックの解説記事で詳しく紹介します。
ブロック全体の見た目を調整できるようになると、余白や色、配置などを変更して、記事全体を整えやすくなります。一方で、文章の一部分だけ色を変えたり、強調したりといった細かな調整を行うには、文字単位での編集が必要です。
次回は、ブロック全体ではなく、文章の一部分を装飾・調整する文字単位の編集方法について解説します。