Gutenbergでテキストを編集・装飾しよう【初心者向け/WordPressの使い方】

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS「WordPress」の使い方を、何回かに分けてお伝えいたします。

今回は、「Gutenberg(グーテンベルグ)」というWordPressのエディターでのテキストの編集・装飾方法を解説します。

ブロックツールでのテキスト編集

ここからは、ブロックツールからできるテキストの編集内容を紹介していきます。

配置変更

まずは、配置の変更方法からです。

テキストの配置を変更する方法
テキストの配置を変更ボタン

長さがバラバラの三本線アイコン「テキストの配置を変更」をクリックすると、左寄せ・中央揃え・右寄せを選択できます。

デフォルトは左寄せです。
2回選択で解除します。

太字・斜体

太字と斜体の装飾方法
太字と斜体のボタン

「B」アイコンで太字に、「I」アイコンで斜体に、選択した文字を装飾します。

もう一度選択すると解除します。
同時装飾もできます。

リンク

挿入する

リンクの挿入方法(アニメーション)
リンクの挿入ボタン
  1. 文字を選択します。
  2. 🔗アイコンをクリックします。
  3. アップ済みの記事の中からタイトルを検索するか、URLを記入します。
  4. 記入したら、選択します。

新しいタブでリンクを開く設定もできます。
外部サイトにリンクするときは、チェックを入れておきましょう。

リンクを変更する

リンクの変更方法
リンクを変更するボタン

リンク先の変更は、リンクテキストを選択すると表示されるメニューの「編集」ボタンからできます。

リンクの解除

リンクの解除方法
リンクを解除する

リンクを解除するときは、斜線つきの🔗マークを選択します。

インライン画像を挿入

テキストの中に、アイコンなどの小さい画像を挿入できます。

ブロックメニューの下矢印アイコン(続きを読む)をクリックします。
「インライン画像」を選択します。
インライン画像ボタンの場所
メディアライブラリが開き、WordPressに保存済み(過去にアップロードしたファイル)の中からか、新しくアップロードするかを選択します。
メディアライブラリが開く
挿入されました。
インライン画像の挿入方法(アニメーション)
インライン画像の挿入方法
インライン画像のサイズ変更

画像を選択すると、横幅サイズの調節ができます。適用ボタン適用もしくはEnterキーで決定です。

文章中ではなく画像単体で挿入したい場合は、下記のページをご覧ください。

文字色

ブロック内にあるテキストの、一部の色を変更できます。

文字を選択します。
文字色変更するテキストの選択
ブロックメニューの下矢印アイコン(続きを読む)をクリックします。
「テキスト色」を選択します。
テキスト色変更ボタンの場所
色を選択しましょう。
テキストの色を選択するパレット
カスタムカラー

パレットの中にない色を作成できます。

クリア

色を解除します。

一部のテキスト色を変更する方法(アニメーション)
テキスト色の変更
文字色の変更ボタン

ツールバーの「A」と書かれたアイコンをクリックすれば、色を変更できます。

その他の装飾

上付き・下付き・取り消し線

他には、上付きや下付きの文字、取り消し線も装飾できます。

  • 上付き文字上付き
  • 下付き文字下付き
  • 取り消し線

今までご紹介した文字装飾は、ほぼいろんなブロックで使えます

画像の下に挿入する説明文(キャプション)
画像ブロックなどの下に入力する説明文でも可能です。

文字の装飾ができるなら、フォントサイズや全体の色も変更したいですよね。
それなら、ブロックを選択すると右側に表示されるメニューバーから設定できます。

右側のメニューバーを表示した画面

もし右側に何も出ない場合は、右上の歯車マークをクリックしてください。

右上の歯車アイコン(設定)
右上の「設定」ボタン

画面右上の歯車マークで、右側メニューバーの表示・非表示の切り替えができます。

右側のメニューバーの表示方法(アニメーション)

フォントサイズ変更

タイポグラフィ(フォントサイズ)
  • フォントサイズ」からは、文字の大きさを変更できます。
  • プルダウンメニューで選択したフォントのサイズは、右側に表示されます。
  • 希望のサイズがなければ、手動で入力もできます。
  • リセット」で元のサイズに戻します。
  • テーマによっては、行間(行の高さ)が変更できます。フォントサイズ変更後の行間調整に使いましょう。
フォントサイズ変更方法
実際の動き

現状デフォルト(2021年8月現在)では、文字装飾のような文字単体を指定してのフォントサイズ変更はできません
ブロック全体のフォントサイズのみです。

文字と背景の色

テキスト色と背景色のパレット

ブロック全体の文字と背景の色を変更できます。

カスタムカラー

パステルの中にはない色を作成します。

リセット

色の変更を外します。

この色の組み合わせは読みにくいため、より明るい背景色、より暗い文字色を試してください。
このようなメッセージが出ない組み合わせにしてください。

すでに一部の文字色を設定していた場合は、それ以外の文字色が変わります。

ブロックツールバーとサイドメニューの色設定の関係
ブロックツールバーの「テキスト色」で青、メニューバーの「テキスト色」で赤に設定した場合
「高度な設定」の「HTMLアンカー」

「高度な設定」では、「HTMLアンカー」を利用して、ページ内を移動できるリンクを設置できます。

移動させたい先のブロックに、半角英数字で名前をつけます。何でも構いません。「-」や「_」も使えます。
移動先のブロックに「text-link」とつける
今回は「text-link」とつけました。
リンク先を「#」+「リンク先のHTMLアンカー名」にします。
移動先ブロックのHTMLアンカーのリンクを付ける
先程つけた「text-link」なら「#text-link」がリンク先になります。

それでは、ページ内リンクを付けるところから、実際のページの動きまでを見てみましょう。

アンカーリンクの付け方からページの動きまで
クリックで拡大表示します

リンクをクリックすると、HTMLアンカーで「text-link」とつけたブロックへとスクロールしました。

これを利用すれば、下記のような目次や、ページ下部への案内リンクを挿入できます。


以上、テキストの装飾方法を解説しました。

こちらもブロックの移動と同様、ほぼすべてのブロックで調整可能です。
WordPressの設定や導入している拡張機能、テーマやバージョンによっては、画面が記事と違う場合がありますが、基本的には同じ操作となるはずです。不明な部分がありましたら、お気軽にお申し付けください。

次は「見出し」と「リスト」の挿入方法をご紹介いたします。

関連の事業・サービスの詳細はこちら!
動画を活用した完全成果報酬型のWebコンサルティング
WordPressのログイン画面と投稿管理画面
WordPressの使い方 シリーズ
火燵でも利用しているCMS「WordPress」の使い方です。

ただいま、多くのお問い合わせをいただいております。電話対応スタッフが不在の時は、折り返します。

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス