グーテンベルグ操作【レイアウト3】

カバーブロックの活用例

グーテンベルグの機能を最大限に活かす

グーテンベルグはブロックを応用して、操作を覚えていくと、コンテンツに応じて、様々な表現が可能になります。

これまでは、HTMLとCSSの知識を必要としたレイアウトやデザインがグーテンベルグによってさまざまな表現が可能になりました。

使用するブロック

  1. カラムブロック
  2. 画像ブロック
  3. 見出しブロック
  4. 段落ブロック

カラムブロック

  1. カラムブロックを選択
  2. レイアウトに応じて、カラムの設定をする

今回のように、作成したレイアウトの項目がない場合は後から変更します。

  1. とりあえず、設定画面に移行したいので、どのパターンでも良いので、選択するか、スキップをクリックします
  1. 表示のカラムブロックの親ブロックのアイコンを選択します
  1. 右側のサイドメニューの「カラム」の値を変更、後からレイアウトを変更することもできます

画像ブロック

  1. ブロックを選択。
  2. 画像ブロックを選択して画像を配置します。
  1. 画像の挿入方法を選択します。メディアライブラリの方法を説明致します。
  1. 挿入する画像を選択する。
  2. 選択をクリック

見出しブロック

  1. 見出しブロックを選択

段落ブロック

  1. 段落ブロックを選択

グーテンベルグ操作【レイアウト2】

カバーブロックの活用例

グーテンベルグの機能を最大限に活かす

グーテンベルグはブロックを応用して、操作を覚えていくと、コンテンツに応じて、様々な表現が可能になります。

写真を全面に表示して写真の上にテキストを載せて、ボタンを配置するレイアウトを作成したいと思います。

使用するブロック

  1. 見出しブロック
  2. 段落ブロック
  3. カバーブロック
  4. カラムブロック
  5. ボタンブロック

作成イメージです。

まず、カバーブロックでレイアウトを作成します。
カバーブロックは写真の上にテキストを載せたい時に使用するブロックです。

  1. ブロックのメニューを展開します。
  2. カバーブロックは、デザインのグループの中にあります。
  3. カバーブロックは選択または、編集スペースにドラッグします
  4. 使用する写真やサイトの配色に合わせて、色を選択します。
    ※色の選択は後半に説明いたします。

次に、カバーブロックに写真を適用します。

カバーブロックで写真をアップする方法は(アップロード・メディアライブラリ)2種類あります。

ドラッグしてアップロードか、一度WordPressに保存された写真素材を再び呼び出す方法になります。

「アップロード」を選んだ場合

使用しているパソコン上からファイル選択することが可能です。

「メディアライブラリ」を選んだ場合

アップしたい写真を選択して、右下の「選択」をクリック

ファイルを選択する前の画面に戻り、写真をマウスでドラッグして直接アップすることも可能です。

写真を追加すると、写真の上にテキストが入力できます。
写真の上にカーソルを合わせて、「タイトルを入力…」の部分をクリックしてください。

写真の上にカーソルを合わせて、「タイトルを入力…」の部分をクリック
テキストを入力

次に入力したテキストの下にカラムブロックを追加します。
カラムブロックは「33/33/33」のレイアウトを選択してください。

  1. ブロックのメニューを展開します。
  2. カバーブロックは、デザインのグループの中にあります。
  3. カラムブロックは選択または、編集スペースにドラッグします
  4. レイアウトは、両サイドに余白を作りたいので、「33/33/33」のレイアウトを選択してください。

次に、ボタンを横並びに2つ配置したいので、中央のブロックにさらにカラムブロック「50/50」のレイアウトを追加します。

  1. ブロックのメニューを展開します。
  2. カバーブロックは、デザインのグループの中にあります。
  3. カラムブロックは選択または、編集スペースにドラッグします
  4. レイアウトは、「50/50」のレイアウトを選択してください。

次に、ボタンを横並びに2つ配置したいので、中央のブロックにさらにカラムブロック「50/50」のレイアウトを追加します。

  1. ブロックのメニューを展開します。
  2. カバーブロックは、デザインのグループの中にあります。
  3. カラムブロックは選択または、編集スペースにドラッグします
  4. レイアウトは、「50/50」のレイアウトを選択してください。

次に「50/50」で作成したカラムブロックにボタンブロックを2つ追加します

  1. ブロックのメニューを展開します。
  2. ボタンブロックは、デザインのグループの中にあります。
  3. ボタンブロックは選択または、編集スペースにドラッグします。

次にボタンの設定とデザインを調整します。

  1. サイドメニューが表示されない場合は、③の歯車のマークをクリックしてください。
  2. 該当ブロックをクリックするとメニューバーが表示されます。

まずは、ブロックの上部に表示されているメニューバーから設定していきます。

  1. 水平方向のレイアウトで、下記の4種類配置が可能です。今回は「中央揃え」を選択してください。
    • 左揃え
    • 中央揃え
    • 右揃え
    • 項目の間隔
  2. 垂直方向のレイアウトで、下記の3つの中から設定ができます。「中央揃え」を選択してください。
    • 上揃え
    • 中央揃え
    • 下揃え
  3. ボタンの表記を入力してください。

ボタンにリンク先を追加する

  1. メニューバーの①をクリック
  2. サイトのリンク先「https://〜」をコピーして②に貼り付ける
  3. 送信のアイコンをクリック
  4. 外部サイトなど、新たに別ウィンドウで開きたい場合は、新しいタブを開くを切り替える

ボタンをウェブサイト配色に合わせて装飾をする

  1. サイドメニューが表示されていない方は、歯車のマークをクリックするとメニューが表示されます。
  2. スタイルとはボタンのデザインのことで、2パターンあります。
    • 塗りつぶし(左側のボタン)
    • 輪郭(右側のボタン
  3. ②で選択したスタイルの色を指定します。
  4. 色の指定をカラーコードで指定できます。
  5. 予め用意されている色で指定します。
  6. 色指定をカラーコードで指定する場合、形式を選択できます。
    • RGB
    • HSL
    • Hex
  7. カラーコードで入力する際にクリックします。
  8. カラーコードの形式に応じて入力フォームが変わります。

下記の設定で装飾を指定しました。

  • 左側のボタン
    • スタイル:塗りつぶし
  • 色(背景)ダークグレー
  • 右側のボタン
    • スタイル:輪郭

次にカバーブロックの装飾を設定をしたいと思います。

  1. 配置を変更します。
    • なし
    • 左寄せ
    • 中央揃え
    • 右寄せ
    • 幅広
    • 全幅

今回のレイアウトでは全幅を選択してください。
カバーブロックで写真を全面に表示させたい時によく使う配置です。

次にカバーブロックのテキストの装飾を設定していきます。

  1. サイドメニューの「色」の項目から「テキスト」を選択
  2. 先ほどのボタンのカラーと同じ「ダークバイオレット」を指定します。
  3. 文字の大きさが少し大きすぎるので「20」を選択します。

今回の見本のレイアウトでは全幅を選択してください。
カバーブロックでは写真を全面に表示させたい時によく使う配置です。

次にカバーブロックの全体の調整をしていきます

  1. 画像の表示調整を「焦点ピッカー」で行います。
    画像の上に表示されている「○」にマウスを合わせるとカーソルが手の形に変わりますので、そのままドラッグして移動させると直感的に表示箇所の調整できます。
    今回の画像では、中心の女性の顔が見切れてしまったので、少し上に調整しました。
  2. オーバーレイの項目では、画像の表面に色を指定できます。
    色の指定をすることで、写真の上のテキストが読みやすくなります。
    次に、不透明度の説明になります。不透明度は、表面の色の濃さを調整することができます。使用する画像やテキストの色によって調整してください。色や不透明度を変えることで、雰囲気のあるデザインにすることができます。
    見本では、不透明度を「30」に指定しました。
  3. オーバーレイのを指定します。
    見本では、白を指定しました。
  4. 寸法という項目で、カバーブロックの高さ高さを指定します。
    使用する素材によって、調整してください。
    見本では、「500px」で指定してあります。

今回の見本のレイアウトでは全幅を選択してください。
カバーブロックでは写真を全面に表示させたい時によく使う配置です。

最後にプレビューで確認してください。
下の表示がPCとスマホ表示です。

スマホ表示
PC表示

グーテンベルグ基本操作

ブロックエディタの使い方ガイド

ブロックエディタとは、投稿ページや固定ページを編集するための機能です。WordPress5.0から標準搭載となった新しいエディタのことで、文章や画像などをブロックという単位で管理します。 

目次

  1. 概要
  2. ブロックエディタの利点とは?
  3. 記事公開までの全体の流れ
    1. 記事のタイトルを決める
    2. 記事を作成する
    3. 記事全体の設定・公開
  4. 基本操作・管理画面説明(WordPress 5.9)
    1. 操作画面について
    2. サイドメニューのブロックについて
  5. 覚えておくと便利なショートカット
  6. クラシックエディタで記事を書く

概要

ブロックエディタではブロックという機能を組み合わせて、ページの構成を整えていきます。

ブロックにはさまざまな種類があり、直感的に編集ができるため、HTMLやCSSなどコーディングの知識がない人でもデザインの幅を広げることができるようになりました。
デザインの知識がなくても、設定やブロックの組み合わせで、リッチなコンテンツを作成することができます。

グロックエディタを使用して今回の記事を例にみてみましょう。

管理画面の表示です。↓

ブロックで、わかりやすくするとこんな感じです。↓

項目で分けるすると、上から以下のブロックになります。

  1. 記事のタイトル
  2. 段落ブロック
  3. 画像ブロック
  4. 見出しブロク
  5. リストブロク|箇条書き

ブロック単位で、コンテンツを作成していきます。

ブロックエディタの利点とは?

インタラクティブなエディタである

ブロックエディタは直感的で使いやすく、実際のサイトの表示画面と変わらないのが特徴です。

実際の編集画面↓

表示画面↓

一部ですが、先ほどの編集画面の表示と実際の表示画面を比較すると、そこまで大きく違いはなくコンテンツの作成ができることがわかります。

コーディング不要

基本的に、ブロックエディタは、コードを書くことなくページを作成できます。なので、CSSやHTMLの知識があまりない方でも、一定の範囲内で記事を作成することが可能です。

さらに、ブロックをカスタマイズすることで、テーマのデザインに沿ったデザイン性の高い、サイト構築が可能です。
そうすることで、運用の手間を抑えられるのです。例えば、今までは制作側に修正等の作業を依頼しないと完結しない作業も、更新作業がカスタマイズ次第で、用意に変更が行うことができるのです。

記事公開までの全体の流れ

記事の公開までの流れは、大きく分けて3つになります。

1. 記事のタイトルを決める

投稿ページの最初の画面には、「タイトルを追加」と大きく表示されているフィールドがあります。このフィールドにカーソルを合わせてクリックすると、タイトルの入力ができます。 タイトルはSEOに大きく関係しており、検索エンジンの結果に表示されるため、記事の内容に沿ったものを考えましょう。

2. 記事を作成する

画面構成と基本ブロックの活用法

まず、ブロックエディタの画面構成について説明します。タイトルを入力した直後のセクションは、記事の本文を編集するためのスペースです。ここでは、記事の内容に合わせて様々なブロックを追加していきます。主に使用するブロックは、「見出し」、「段落」、「画像」などがあり、これらは文章を構成する際に使われるブロックの要素です。

ブロックの追加について 一つ目

次に、基本的なブロックの操作方法を追加するための方法をご紹介します。

画面の右側にある「+」ボタンをクリックします。

すると、「検索」「最近使用したブロック」「すべて表示」といったメニューが開きます。ここでブロック名を検索したり、最近使ったブロックから選んだり、必要に応じてブロックを追加することができます。

  • 「検索」セクションでは、特定のブロックを名前で検索することができます。
  • 「最近使用したブロック」のセクションでは、最近使用したブロックが表示されます。
  • 「すべて表示」セクションでは、利用可能なすべてのブロックを見ることができます。

試しに、「最近使用したブロック」「見出しブロック」をクリックしてみましょう。

クリックすると、新たに、見出しブロックが追加されます。

この新規見出しブロック内にテキストを入力することが可能になります。

ブロックの追加について 二つ目

追加したい場所の一つ上のブロックを選択して、 [Enter] キーを押す。

例として「見出し」ブロックを選択したあと最後に位置にカーソルを置き、その後で [Enter] キーを押します。

ブロックの追加について 三つ目

左上の「+」アイコンをクリックする方法です。

ブロックの選択方法

必要なブロックをクリック、またはドラッグ&ドロップして、記事に追加することが可能です。

ブロックを「検索」

ブロックの検索機能を使って特定のブロックを探す際には、ブロック名を入力フォームに打ち込みます。検索を実行すると、結果がフォームの直下にリストアップされ、目的のブロックが見つかったら、そのアイコンをクリックして記事に追加できます。

ブロックの追加から「すべて表示」する場合

「すべて表示」を選択すると、使用できる全てのブロックが画面の左側に一覧表示されます。

クリック、またはドラッグ&ドロップを使って、ブロックを記事に追加することができます。

3つ目の方法として、タイトルのすぐ下「ブロックを選択するには「/」を…」と表示された部分にカーソルを合わせ、マウスで左クリックします。その後、「/〇〇」とブロック名を入力することで、直接検索し、該当するブロックを見つけることができます。

例えば、「/画像」と入力すると、検索結果の最上部に画像ブロックが表示されます。

このブロックをドラッグ&ドロップすることで、記事内の好きな場所に追加することが可能です。

ブロックを移動・削除したい

削除したいブロックをクリックし、ツールバーの詳細設定から、「削除」をクリックするだけで削除できます。

ボタンで移動移動したいブロックを選択し、ドラッグして目的の位置に移動させます。
ドラッグで移動ブロックツールバーの「上へ移動」または「下へ移動」ボタンを使用して、
ブロックを上下に移動させます。
  1. 移動したい対象のブロックをクリックする
  2. ツールバーの矢印のアイコンをクリックして、上下に移動することが出来ます
  1. 任意の場所に移動したい場合は、ツールバーの一個左のアイコンをドラッグ&ドロップすることで、移動することができます

  1. ツールバーの一番右に位置する「オプション」をクリック
  2. オプションのメニュー内の一番下にある「削除」をクリック

また、ブロックを選択した後に「backspace」or「del」で削除することもできます。

 3. 記事全体の設定・公開

右側のサイドメニューから「投稿」という項目を選び、記事全体の設定を進めていきます。

記事の設定には、①〜⑦の項目が存在し、必要に応じて細かく設定していきます。

1.表示状態

  1. ラジオボタンで「公開」「非公開」「パスワード保護」設定を行います。

2.公開

予約投稿の場合

  1. 公開セクションの「今すぐ」をクリック。
  2. 表示されらカレンダーから予約の日時を設定する。
  3. 画面右上の「予約」をクリック。

すぐに公開する場合

  1. 公開セクションの「今すぐ」になっているのを確認。
  2. 画面右上の「公開」をクリック。

3.パーマリンク

  1. 公開後、パーマリンクの設定をする。初期値は、タイトルの値が入ります。
  2. 任意のテキストを入れる。

4.カテゴリー

  1. 開発サイトの分類に応じて、カテゴリーの設定を行います。
  2. 新しくカテゴリーを追加する場合は、まず、「新規カテゴリーを追加」をクリックする。
  3. 次にカテゴリー名を入力
  4. 親カテゴリーの下に子カテゴリーとして、設定する場合、階層構造に応じて設置をする。
  5. 一通り設定が完了したら、「新規カテゴリーを追加」をクリックする。

5.タグの設定

タグとは、より細かな分類をする時に設定します。

記事の内容に沿ったタグを設定します。

  1. フォーム内にタグを入力します。複数タグを設定する場合は、タグの区切りに「,」を入れることで、複数設定できます。

6.アイキャッチ画像

ウェブサイト上のお知らせの一覧などで表示される画像を設定し、SNSでシェアした際にURLと一緒に画像が表示されるようになります。

  1. 「アイキャッチ画像を設定」と表示されたエリアをクリック

メディアライブラリの画面から、

  1. 画像を選択もしくは、アップロードする。
  2. 右下の「アイキャッチ画像の設定」をクリックする。
  1. 選択した画像が設定されます。

7.抜粋

抜粋は、お知らせの一覧ページや検索結果のページタイトル下に表示される説明文です。記事内容に沿った文章を入力してください。

  1. フォーム内にテキストを入力してください。

8.ディスカッション

このセクションは、初期設定時にサイト全体で行われる設定が基本であるため、記事ごとに設定は通常不要であり、ここでは省略します。

基本操作・管理画面説明(WordPress 5.9)

操作画面について

①のツールバーでは、ブロックごとの個別の設定をすることができます。

段落ブロックを例に説明いたします。

  1. 選択中のブロックのアイコン
  2. 文字列の配置(左揃え・右揃え・中央揃え)
  3. 太字(ボールド)の指定
    ※太字にしたい文字列をドラッグしてからクリック
  4. 斜体(イタリック)の指定
    ※斜体にしたい文字列をドラッグしてからクリック
  5. リンク先の指定
    ※別ページへリンク先の指定をしたい時に選択します

ツールバーは、選択するブロックに応じて設定が異なるので、メニューの内容も異なります。
また、インストールしているプラグインに応じて管理画面も異なります。

サイドメニューのブロックについて

次に②のサイドメニューについてです。
サイドメニューでは、大きく「ブロック」と「投稿」に分かれていて、クリックすると選択画面が切り替わります。

ブロックでは先ほどのツールバーでは設定できなかった装飾が可能になります。

段落ブロックを例に説明いたします。

テキストの色変更

  1. ブロックをクリック
  2. 右メニューの 「色」 >  「テキスト」をクリックする。 
  1. カラーピッカーからRGB、HEX、HSLに数値を入力して色を探すこともできます。
  2. 用意されている色から選択する場合は、ここから選ぶ。

背景の色変更

  1. ブロックをクリック
  2. 右メニューの 「色」 >  「背景」をクリックする。 
  1. カラーピッカーからRGB、HEX、HSLに数値を入力して色を探すこともできます。
  2. 用意されている色から選択する場合は、ここから選ぶ。
  1. グラデーションを指定する場合は、グラデーションのメニューに切り替えて、設定していきます。
  2. 色を変更したいポイントをクリックして選択します。
  3. 次に、グラデーションの種類を選択します。

タイプについて↓

線型線形は、開始点と終了点の2つの点と色を指定し、
開始点から終了点に向けて次第に色が変化していくグラデーションです。
放射型放射型は、中心点から放射状に広がるグラデーションです。

角度について↓

角度角度は、角度を調整して、グラデーションの方向を調整します。
  1. 用意されている色から選択する場合は、ここから選ぶ。

各ブロックについての細かい設定は下記に記事をご覧ください。

覚えておくと便利なショートカット

戻る、進む、コピー、貼り付け、保存などのショートカットキーを紹介。

一つ前に戻るMac  「command」+「Z」
Windows  「control」+「Z」
戻りすぎちゃった場合(進む)Mac  「Shift」+「command」+「Z」
Windows  「control」+「Shift」+「Z」
コピー
※1 ブロックを選択して、複製できます。
Mac  「command」+「C」
Windows 
「control」+「C」
貼り付け
※2 コピーしたブロックを貼り付けます。
Mac  「command」+「V」
Windows 
「control」+「V」
記事の保存( 下書き or 公開 )Mac  「command」+「S」
Windows 
「control」+「S」

クラシックエディタで記事を書く

ブロックエディタに不慣れな場合、旧エディター(クラシックエディター)のブロックでも更新可能です。

クラシックというブロックが存在し、クラシックブロックを選択すると、ブロックエディタ上に、クラシックエディタの編集画面が表示されます。

テキストグループ内に「クラシック」というブロックがあります。

グーテンベルグ操作【レイアウト1】

カラムブロックの活用例

グーテンベルグはブロックを応用して、操作を覚えていくと、コンテンツに応じて、様々な表現が可能になります。

よくある画像とテキストが横並びのレイアウトを作成していきたいと思います。

使用するブロックについて

下記のブロックを使用して、構成していきますが、使用しているテーマによって異なります。

  1. 見出しブロック
  2. 段落ブロック
  3. カラム
  4. 画像ブロック

まず、カラムブロックで2列のレイアウトを作成します。(カラムとは列のことです。)

  1. ブロックのメニューを展開します。
  2. カラムブロックは、デザインのグループの中にあります。
  3. カラムブロックは選択または、編集スペースにドラッグします
  4. レイアウトを選択します。
    今回は、左から2番目の「50/50」のカラムを選択します。

次に画像ブロックを追加します。

  1. 左側にブロックを追加
  2. ブロックのメニューを展開する
  3. 画像ブロックは「メディア」というグループ内です
    検索に「画像」と入れるとすぐに見つかります
  4. 「画像」ブロックを選択

画像ブロックの写真をアップする方法は(アップロード・メディアライブラリ・URLから挿入)3種類ありますが、基本的には「アップロード」「メディアライブラリ」を使用するのがほとんどです。

ドラッグしてアップロードか、一度WordPressに保存された写真素材を再び呼び出す方法になります。

「アップロード」を選んだ場合

使用しているパソコン上からファイル選択することが可能です。

「メディアライブラリ」を選んだ場合

アップしたい写真を選択して、右下の「選択」をクリック

使用した画像は、750×1125px(2:3)の画像を使用しています。
スマホの画面の横幅の大きさ×2倍の横幅750px以上の画像を使用すると綺麗に画像が表示されます。今回のレイアウトの場合は、PCでもスマホでも綺麗に表示されますが、PC環境でも全面に表示させる場合は、横幅1000px以上の画像データを使用してください。

また、ファイルを選択する前の画面に戻り、写真をマウスでドラッグして直接アップすることも可能です。

次に右側のブロックに段落追加します。

  1. 右側にブロックを追加
  2. ブロックのメニューを展開する
  3. 段落ブロックは「テキスト」というグループ内です
    検索に「段落」と入れるとすぐに見つかります
  4. 「段落」ブロックを選択
  1. テキストを入力して、文字を入力したら、メニューバーから「テキスト中央寄せ」を選択してください。
  1. 段落ブロックの下に新しいブロックを追加
  2. ブロックのメニューを展開する
  3. 見出しブロックは「テキスト」というグループ内です
    検索に「見出し」と入れるとすぐに見つかります
  4. 「見出し」ブロックを選択して、テキストを入力してください
  1. 見出しのレベルは「H2」を選択(デフォルトのまま)
    大きすぎる場合は、レベルを「H3」以降に調整してください
  2. メニューバーのテキストのレイアウトを「テキスト中央寄せ」選択してください
  1. 見出しブロックで「Enter」をクリックして、新しいブロックを追加し、そのままテキストを入力してください。今回は、左揃えのままなので、デフォルトのままで大丈夫です

次に段落ブロックの下にスペースを追加します。

  1. 段落ブロックの下に新しいブロックを追加
  2. ブロックのメニューを展開する
  3. スペーサーブロックは「デザイン」というグループ内です
    検索に「スペーサー」と入れるとすぐに見つかります
  4. 「スペーサー」ブロックを選択
  1. 段落の下にスペースが追加され、余白が生まれました。
    「○」部分をドラッグして下に引っ張ると直感的に広さを変えることができます。
  2. 数値指定の場合は、px単位で調整ができます。

最後に段落を追加すると、最初のレイアウトに沿った構成で、コンテンツを作成することができます。

メニューバーのカラムを選択
中央揃えを選択

コンテンツごとの機能

ブロックの種類について

ブロックエディタのブロックの中でも使用頻度の高いブロックについて解説いたします。

ブロックの種類と機能は、WordPressのバージョンやインストールされたプラグインによって異なり、全部で数十種類に登りますが、実際使用するのは数個程度です。
「多すぎてどれを使ったら良いかわからない」という方に、頻繁に使用する機能を紹介したいと思います。

目次

WordPressのGutenbergブロックエディターを用いたブログでは、ブロックが用途に応じてグループ分けされています。ここでは、主に使用頻度の高いグループ内のブロックについて解説したいと思います。

  1. テキスト
  2. メディア
  3. デザイン
  4. ウィジェット

テキスト

テキストブロックは「段落」「見出し」など文字に関する基本となるブロックの機能の分類になります。

特に使用頻度の高いブロック

  • 見出し
  • 段落
  • リスト
  • テーブル
段落文章を作成するときの基本となる要素のブロックになります。
見出し文章のタイトル見出しを挿入できます。
リスト箇条書きリストまたは番号付きリストを挿入できます。
テーブル表を挿入できます。

各ブロックの解説をしていきます。↓

段落ブロック

段落ブロックは、本文を作成する際に使用するブロックです。

ブロックには「テキスト」グループの中に「段落」というブロックがあり、これがデフォルトで選択されています。そのため、ブロックを選択せずにテキストを入力すると自動的に段落ブロックになります。新しい段落を追加するには「Enter」を押すと、新たなブロック(段落ブロック)が生成されます。

本文の途中で改行をしたい場合のショートカットキー

ブロックの改行ショートカットキー
Mac「shift」+「enter」
Windows「control」+「enter」

ツールバーの機能について

ツールバーとは、WordPressのGutenbergエディターにおける各ブロックに存在する固有の操作パネルです。このツールバーを使用することで、選択したブロックに対するさまざまな個別の設定を行うことができます。

1.太文・イタリック

太字・イタリックの装飾は、ブロックのすぐ上にあるツールバーから変更することができます。

2.リンクの設定

外部サイトへのリンクを挿入する方法です。

まず、段落内の文章で、リンクを挿入したいテキストを選択します。

次に、ツールバーの「リンク」のアイコンをクリックします。

すると、ブロック直下に、入力欄が表示されます。「検索またはURLを入力」に「https://〜」または「http://〜」から始まるURLをコピー&ペーストで挿入します。

URLを挿入後 は「Link」という部分をクリックします。

3.テキストの配置

ツールバーの「テキストの配置」のアイコンをクリックし、すると、ブロック直下に、
選択メニューが表示されます。必要に応じて、「テキスト左寄せ」、「テキスト中央寄せ」、「テキスト右寄せ」など、ページ内でのテキストの位置を調整します。

サイドメニューの機能について

ツールバーとは、WordPressのGutenbergエディターにおける各ブロックに存在する固有の操作パネルです。このツールバーを使用することで、選択したブロックに対するさまざまな個別の設定を行うことができます。

1.テキストの色変更

  1. ブロックをクリック
  2. 右メニューの 「色」 >  「テキスト」をクリックする。 
  1. カラーピッカーからRGB、HEX、HSLに数値を入力して色を探すこともできます。
  2. 用意されている色から選択する場合は、ここから選ぶ。

2.背景の色変更

  1. ブロックをクリック
  2. 右メニューの 「色」 >  「背景」をクリックする。
  1. カラーピッカーからRGB、HEX、HSLに数値を入力して色を探すこともできます。
  2. 用意されている色から選択する場合は、ここから選ぶ。
  1. グラデーションを指定する場合は、グラデーションのメニューに切り替えて、設定していきます。
  2. 色を変更したいポイントをクリックして選択します。
  3. 次に、グラデーションの種類を選択します。

タイプについて↓

線型線形は、開始点と終了点の2つの点と色を指定し、
開始点から終了点に向けて次第に色が変化していくグラデーションです。
放射型放射型は、中心点から放射状に広がるグラデーションです。

角度について↓

角度角度は、角度を調整して、グラデーションの方向を調整します。
  1. 用意されている色から選択する場合は、ここから選ぶ。

タイポグラフィ

文字のサイズ変更

  1. 文字サイズは、S〜XLから選択することができます。もしくはサイズ指定ができます。
  1. 任意のサイズを指定する場合は、矢印の部分のアイコンをクリック
  1. サイズカスタマイズ下のフォーム内に具体的な数値を入力します。
  1. 単位を変更したい場合はフォームの右にある「px」をクリック。デフォルトは、「px」ですが、「em」や「rem」に変更可能です。

「em」や「rem」の違いについて

単位使用例
em元のフォントサイズを元に相対的に変わります。
【例】親要素のフォントサイズが20pxの場合、
その子要素で1emは20pxに、0.5emは10pxに相当します。
remページ全体のフォントサイズを一括で調整できます。
例えば、ルート要素のフォントサイズを変更するだけで、remを使用しているすべての要素のサイズが比例して変わります。
【例】もしルート要素のフォントサイズが16pxであれば、
1remは16pxに相当し、2remは32pxに相当します。

タイポグラフィの設定

タイポグラフィとは、文字の細かい設定を行うことが出来ます。

  1. 「︙」のアイコンをクリック。
  2. 設定したい項目をクリックしてチェックを入れる。

各項目の詳細について↓

  • 外観:フォント
  • 文字間隔:文字の間隔「〇↔︎〇」を指定
  • テキスト装飾:「なし」「下線」「打ち消し」の文字の指定
  • 大文字小文字:AB→全部大文字 Ab→始めのみ大文字 ab→小文字
  • ドロップキャップ:段落の先頭1文字を大きく表示する機能

外観

  1. 外観は、フォントの微妙なスタイルの設定をすることができます。

文字間隔

  1. 文字間隔は、数値で指定できます。(15pxで指定しています。)

テキスト装飾

  1. テキスト装飾:「なし」の文字の指定で、デフォルトと同じ状態です。
  1. テキスト装飾:「打ち消し線」の文字の指定
  1. テキスト装飾:「下線」の文字の指定

大文字小文字

アルファベットにおける大小の表現の設定です。

  1. 全部大文字の場合は、「AB」を選択
  1. 全部小文字の場合は、「ab」を選択
  1. 始めのみ大文字全部「Ab」を選択

大文字小文字:AB→全部大文字 Ab→始めのみ大文字 ab→小文字

ドロップキャップ

段落の先頭1文字を大きく表示する機能です。

  1. サイドメニューの「ドロップキャップ」の左のアイコンをクリックする。
  2. 選択した段落ブロックの先頭1文字の大きさが変わる。

見出しブロック

「見出し」とは主に本文や記事のタイトルなど、大きく分かりやすく見せたい情報の時に使用します。

見出しブロックは、「H1」〜「H6」の中から選択ができ、デフォルトの設定は、「H2」が設定されていてます。特に使用頻度が高いのが「H1」 〜「H3」です。「H」から後ろの数字が大きくなるほど、文字が小さくなります。文章構造に応じて選択してください。

ツールバーの機能については、段落と同じ機能です。

サイドバーに関しては、ドロップキャップ以外は、同様の機能です。

リストの追加

リストブロックは、番号なしまたは番号付きのリストを作成する機能です。

  1. テキストグループ内にある「リスト」を選択
  2. ブロックをクリックすると、テキストが入力ができるようになります。
  3. 次のリストに移動する際は、「Enter」を押すと、次のリストに移動できます。
  4. 入力し終えた後は「Enter」を2回押すと、新たなブロックに移ります。

リストブロックの親子関係

リストブロックは親ブロック「リストブロック」と子ブロック「リスト項目ブロック」で構成されています。

  1. リストをクリックすると「リスト項目ブロック」という子ブロックが選択されている状態になります。
  2. ツールバーに現在選択しているブロックのアイコンが表示されます。
  3. ツールバーの一番左端の1つ独立しているメニューが親ブロックのアイコンです。
  4. 親ブロックのアイコンをクリックすると、ブロック全体が線で囲われ、選択状態になります。

ツールバーから、ブロックの親子関係に応じ、選択するブロックを操作し、装飾や変更したい箇所を選択することができます。

番号なしまたは番号付きのリストを作成

  1. ツールバーから親ブロックのアイコンをクリックする
  1. ツールバーの表示が変わるので、リストなしのブロックを選択

※デフォルトは、番号なしブロックです。

  1. 番号ありリストブロックのアイコンをクリック

インデントの方法

次にリストの項目をインデントする方法を紹介したいと思います。

インデントとは、字下げです。インデントをすることで、各要素の階層を表現できます。

  1. インデントしたい項目をクリックする。
  2. ツールバーにあるインデントのアイコンをクリックする。
  3. 表示項目が一段インデントされます。

 

メディア

「画像」や「音声」、「動画」等のデータに関するブロックの集まりです。

使用頻度の高いブロック

  • 画像
  • ギャラリー
  • カバー
  • メディアとテキスト
画像画像データを挿入できます。
ギャラリー複数の画像をまとめて挿入できます。
カバー画像を挿入して、その画像の上にテキストを重ねることができます。
メディアとテキスト横並びの画像とテキストを挿入できます。

画像ブロック画像ブロック

画像ブロックは「メディア」グループ内にある「画像」ブロックです。

画像を追加、または変更することができます。

  1. 画像ブロックを選択する。
  2. 画像ブロックの挿入方法を選択する。以下の3つの方法があります。
アップロードPC内のファイルからデータをアップする
メディアライブラリWordPress内のデータから選択する。
URLから挿入URLを指定して挿入する方法

ここから、一つ一つずつ説明致します。

アップロード

  1. アップロードをクリック

PC内のファイルが表示されるので、写真を選択する。

面倒な場合、ドラッグ&ドロップで、編集スペースに直接データをアップすることも出来ます。

メディアライブラリ

メディアライブラリとは、すでにアップロードしたファイルから選択する方法です。

  1. メディアライブラリをクリック
  1. 画像を選択
  2. 選択をクリック

URLから挿入

  1. URLから挿入をクリック
  1. メディアライブラリから添付ファイルの詳細を開き、ファイルのURL「https://〜」をコピーする。
  1. コピーしたURLを貼り付ける
  2. アイコンをクリック

ギャラリーブロック

ギャラリーブロックは「メディア」グループ内にある「ギャラリー」ブロックです。

画像ブロックと異なり、複数枚の写真をまとめて掲載する時に使用するブロックです。

  1. ギャラリーブロックを選択する。
  2. 画像の挿入方法を選択する。以下の2つの方法があります。
アップロードPC内のファイルからデータをアップする
メディアライブラリWordPress内のデータから選択する。

アップロード

  1. アップロードをクリック
  1. 画像を選択

複数選択する方法

Windows・Ctrl を押しながら、マウスクリック
・Shift を押しながら、マウスクリック
Mac・1つずつ選択する場合:Command を押しながら、マウスクリック
・まとめて選択する場合:最初の項目をクリックしてから、
 Shiftキーを押しながら最後の項目をクリックすると、
 間にあるすべての項目が選択範囲に含まれます。
  1. 開くをクリック

管理画面側の表示↓

メディアライブラリ

  1. メディアライブラリを選択
  1. 複数画像を選択する
  2. ギャラリーを作成をクリック

画像の表示順番入れ替える方法

  1. 移動したい画像をクリックする
  2. 移動したい方向の矢印のアイコンをクリックすると画像が移動します。

追加する方法

  1. どれでもいいので画像をクリックする
  2. ツールバーの一番左のアイコンの親ブロックをクリックして、ギャラリーブロック全体を選択します。
  1. ツールバーの「追加」をクリックする。
  2. 画像の挿入方法を選択する。

アップロード」及び「メディアライブラリを開く」から選択する。
※挿入の手順は同じです。

キャプションの追加方法

  1. キャプションを追加したい画像をクリックする
  2. ツールバーの「キャプションを追加」メニューをクリックする

カバーブロックを追加

カバーブロックは写真の上にテキストを載せたい時に使用するブロックです。
写真を使ってインパクトのある表現をしたい時により効果的なブロックです。

  1. カバーブロックを選択する。
  2. 画像の挿入方法を選択する。以下の3つの方法があります。
アップロードPC内のファイルからデータをアップする
メディアライブラリWordPress内のデータから選択する。
アイキャッチ画像を使用記事のアイキャッチ画像と同じ画像を使用するときに選択する。

アップロード

  1. アップロードをクリック
  1. 画像を選択
  2. 開くをクリック
  1. テキストを挿入する。

メディアライブラリ

  1. メディアライブラリを選択
  1. 画像を選択する
  2. 選択をクリック
  1. テキストを挿入する。

その他

画像をアップロードする際のポイント

スマホ用横幅750ピクセル
PC用横幅1000ピクセルくらい

両方同じ画像で表示させる場合は、PC用のサイズを使用

デザイン

コンテンツのレイアウトやボタンを配置してスタイルを設定したりするデザインに関わるブロックです。

使用頻度の高いブロック

  • ボタン
  • カラム
  • グループ
  • 区切り
  • スペーサー
ボタンボタンの挿入できます。
カラム複数の列を挿入できます。
グループ複数のブロックをグループとしてまとめることができます。
区切り途中で区切り線を挿入できます。
スペーサー余白を挿入できます。

ボタンブロック

ボタンブロックは「デザイン」グループ内にある「ボタン」ブロックです。

ボタンブロックを使用すると簡単にボタンを追加できます。

  1. ボタンブロックを選択する。
  2. ブロックをクリックすると、テキストが入力ができるようになります。

ボタンの追加

  1. ボタンブロックを選択する。
  2. ツールバーから親ブロックのアイコンをクリックする
  1. 右下の「+」のアイコンをクリックする
  1. 新たに右側にボタンが追加されます

その他の設定

1.配置の変更

配置の変更は、親ブロックの選択が必要です。
「左揃え」、「中央揃え」、「右揃え」、「項目の間隔」など、ブロックのボタンの位置を設定します。

  1. ボタンブロックをクリック
  2. ツールバーから親ブロックのアイコンをクリックする
  1. サイドメニューの「レイアウト」から配置の設定を行います。
  2. 各配置の項目について
左揃え左端に寄せて配置
中央揃え中央に寄せて配置
右揃え右端に寄せて配置
項目の間隔横幅いっぱいで均等に配置

レイアウトの表示画面

2.並び方向(水平/垂直)の変更

  1. ボタンブロックをクリック
  2. ツールバーから親ブロックのアイコンをクリックする
  1. サイドメニューのレイアウト「方向」の設定を行います。

横並び(デフォルトの設定)↓

  1. 縦並びの場合は、サイドメニューのレイアウト「方向」から「↓」のアイコンをクリックします。
  1. 複数行を折り返すの

背景の色を変える

  1. ボタンブロックを選択
  2. 右側のサイドメニューの「スタイル」タブをクリック
  1. メニューの「色」 > 「背景」をクリックする
  2. 色を探す場合は、カラーピッカーをクリックする
  3. 用意されている色から選択する場合は、ここから選ぶ。

テキストの色を変える

  1. ボタンブロックを選択
  2. 右側のサイドメニューの「スタイル」タブをクリック
  1. メニューの「色」 > 「テキスト」をクリックする
  2. 色を探す場合は、カラーピッカーをクリックする
  3. 用意されている色から選択する場合は、ここから選ぶ。

輪郭の色を変える

輪郭とはボタン周りの線のことで「輪郭」を選択すると、線が追加され、装飾のデザイン変更ができます。

  1. スタイルの「輪郭」をクリックする
  2. 色の「テキスト」をクリックすると、ボタン内のテキストと枠線の色が変わります
  3. 色を探す場合は、カラーピッカーをクリックする
  4. 用意されている色から選択する場合は、ここから選ぶ

次に背景の色を変更していきます

  1. 色の「背景」をクリックする
  2. 色を探す場合は、カラーピッカーをクリックする
  3. 用意されている色から選択する場合は、ここから選ぶ

ツールバーの設定

カラムブロック

カラムとは、列を意味し、画像やテキストを横並びにして、見やすいようにレイアウトを整えることのできるブロックです。

  1. カラムブロックを選択
  2. カラム(列)のパターンを選択します
  1. 選択したパターンに応じて、列が追加されます。
  1. 「+」マークが囲われている枠をクリックすると、カラム内に新たにブロックの追加ができ、画像や見出し、段落を組み合わせて、カラムによってみやすくレイアウトを整えることができます。

列の数を変更する

任意で、カラムを設定したい場合、後から列の設定を変更することもできます。

  1. カラムブロックを選択
  2. 親ブロックをクリック
  1. カラムの値を変更すると、数値に応じて、列が生成されます。

グループブロック

グールプブロックとは、いくつかのブロックをまとめてグループ化できるブロックです。

グループ化することで、まとまって管理できるので、移動する際は、とても便利です。

また、背景色もグループ化を行うことで、ブロック全体の配色を変更することもできます。

  1. 下記の「見出し」、「画像」、「段落」の3つのブロックを例にグループ化してみます
  1. 対象のブロックをドラッグします
  1. ツールバーの「グループ化」のアイコンをクリック
  1. グループ化に加えて、「横並び」や「縦積み」など、レイアウトも調整できます

横並びを選択した場合の表示↓(縦済みは上記のレイアウトと同じ表示です。)

スペーサーブロック

スペーサーブロックは、ブロックとブロックの間に余白を作る時に使用するブロックです。

  1. スペーサーブロックをクリック
  1. スペーサーブロックを選択
  2. 数値指定する場合は、右側のサイドメニューに数値を入力
  3. 直感的に高さを変更したい場合は、丸いアイコンを下へドラッグすると調整できます。

ウィジェット

ウィジェットでは機能プログラムを持ったブロックを配置できます。

使用頻度の高いブロック

  • カスタムHTML
  • ショートコード
  • ソーシャルアイコン
カスタムHTML任意のHTMLコードやJavaScriptのコードを記述することができます。
ショートコードショートコードを挿入できます。
ソーシャルアイコンソーシャルメディアのアイコンを入れて、リンク先を指定できます。

カスタムHTML

独自のHTMLコードやCSSのコードを追加する際には、カスタムHTMLブロックを利用します。

  1. HTMLカスタムブロックを選択
  2. HTML文を記入する

ショートコード

ショートコードとは、WordPressで使用できる機能のことです。定型文やPHPの複雑な処理を、半角の角括弧「[ ]」で囲まれたコードに紐付けることにより、短いコードで置き換えて呼び出すことができるものです。

  1. ショートコードブロックを選択
  2. ショートコードを入力する

ソーシャルアイコン

ソーシャルアイコンとは、さまざまなソーシャルメディアのアイコンを投稿や固定ページに追加し、リンクを貼ることができるブロックです。

  1. ソーシャルアイコンブロックを選択
  2. 「+」アイコンをクリック

次にソーシャルメディアを追加します

  1. 検索する場合は、検索窓にキーワードを入力して検索結果を表示することができます。
  2. すでに表示されているソーシャルメディアのアイコンは、最近使用したアイコンのリストです。アイコンをクリックすると追加することができます。
  3. すべてのソーシャルアイコンを表示する場合は一番下の「すべてを表示」をクリック。
  4. 左側にソーシャルメディアの一覧が表示されます。クリックすると追加できます。
  1. ソーシャルメディアのアイコンをクリック
  2. アドレスバーの「https://〜」または「http://〜」から始まるURLをコピー&ペーストで挿入します。
  3. 適用のアイコンをクリック