見出しなど文字をデザインする

WordPress新エディターは、ブロックで構成する」では、ページをブロックで構成すること、ブロックの移動方法、削除方法、本文を書き始める位置、下書き保存について説明しました。
それでは、見出しなど文字のデザイン方法について説明します。

まずはページのタイトルを入力!

WordPressの「投稿」→「新規追加」を選ぶと大きく灰色で「タイトルを追加」と書かれている領域がありますね。
ここが投稿記事のタイトルになる大切な部分です。
SEOにも関わってくる大切な部分ですので、記事に沿ったわかりやすいタイトルを付けましょう。

見出しを設定してみる

本文を書く場所はおわかりですね?その左にある「+」をクリックしてみましょう。

「+」と同じ列の右側に出てくるアイコンと、「+」を押したときに一番上に出てくる「よく使うもの」は、あなたが使用したブロック要素に応じて変わります。同じブロック要素を何度も使うときには便利ですので覚えておくと良いでしょう。

「よく使うもの」の下「一般ブロック」の中に「見出し」がありますのでクリックしてみましょう。すると文章を書く場所が見出しの入力画面に変わります。

見出しのレベルを変える

ディフォルトでは「H2」となっていますが、右メニューの「見出し設定」の「レベル」部分で「H2」~「H6」まで設定することが可能です。
記事の重要度に合わせて見出しのサイズを変えていくとよいでしょう。

テキストの配置を変更する

ディフォルトではテキストは「左寄せ」になっていますが、「中央寄せ」「左寄せ」に変更することが可能です。
右メニューにある「見出し設定」の「レベル」の下の「テキストの配置」で変更できます。

文字色・背景色を変えてみよう

テキストや背景の色を変えたい場合、変えたいブロックを選択している状態で→メニュー「ブロック」の「色設定」をクリックします。
そこに「背景色」「文字色」があるのでそれぞれ選びましょう。
ブロック全体に反映されます。

メニュー画面以外の色を選択したいときはそれぞれの一番最後にある虹色の部分をクリックしましょう。
そうすると、カラーパレットが登場し任意の色を選ぶことができます。

細かく設定したいときは…

タイトルや見出し、文章の中の一部だけ色を変えたい場合などは別にCSSでスタイルの指定が必要になります。

「高度な設定」でCSSクラスを指定

CSSが別途指定されている場合、見出しなどブロックの「高度な設定」の「追加CSSクラス」にCSS指定値を入力すると反映されるようになります。
例えば「細かく設定したいときは…」という見出しには

.c0 { 
color:#fb6bc0;
font-weight: 500;
border-bottom: 1px solid #fb6bc0;
border-left: 6px solid #fb6bc0;
padding: 0.5em;
background: #ffd7ee;
}

とCSSで指定しています。
このCSSクラス名は「c0」ですので「追加CSSクラス」には「c0」と入れてあげると反映されます。

画像を使って様々な見せ方をする」に進む
WordPress新エディターは、ブロックで構成する」に戻る