みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS「WordPress」の使い方を、何回かに分けてお伝えいたします。
今回は、「Gutenberg(グーテンベルグ)」というWordPressのエディターでのテキストの編集・装飾方法を解説します。
ブロックツールでのテキスト編集
ここからは、ブロックツールからできるテキストの編集内容を紹介していきます。
配置変更
まずは、配置の変更方法からです。
![テキストの配置を変更する方法](https://kotatsu.info/blog/wp-content/uploads/2021/07/image16.gif)
![テキストの配置を変更ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-btn-text-align.png)
長さがバラバラの三本線アイコン「テキストの配置を変更」をクリックすると、左寄せ・中央揃え・右寄せを選択できます。
デフォルトは左寄せです。
2回選択で解除します。
太字・斜体
![太字と斜体の装飾方法](https://kotatsu.info/blog/wp-content/uploads/2021/07/image3.gif)
![太字と斜体のボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-btn-bold-italic.png)
「B」アイコンで太字に、「I」アイコンで斜体に、選択した文字を装飾します。
もう一度選択すると解除します。
同時装飾もできます。
リンク
挿入する
![リンクの挿入方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/image55.gif)
![リンクの挿入ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-btn-link.png)
- 文字を選択します。
- 🔗アイコンをクリックします。
- アップ済みの記事の中からタイトルを検索するか、URLを記入します。
- 記入したら、選択します。
新しいタブでリンクを開く設定もできます。
外部サイトにリンクするときは、チェックを入れておきましょう。
リンクを変更する
![リンクの変更方法](https://kotatsu.info/blog/wp-content/uploads/2021/07/image13.gif)
![リンクを変更するボタン](https://kotatsu.info/blog/wp-content/uploads/2021/07/link-change.png)
リンク先の変更は、リンクテキストを選択すると表示されるメニューの「編集」ボタンからできます。
リンクの解除
![リンクの解除方法](https://kotatsu.info/blog/wp-content/uploads/2021/07/image9.gif)
![リンクを解除する](https://kotatsu.info/blog/wp-content/uploads/2021/07/link-delete.png)
リンクを解除するときは、斜線つきの🔗マークを選択します。
インライン画像を挿入
テキストの中に、アイコンなどの小さい画像を挿入できます。
![インライン画像ボタンの場所](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-read-rest-inline-img.png)
![メディアライブラリが開く](https://kotatsu.info/blog/wp-content/uploads/2021/08/inline-img-media-library.jpg)
![インライン画像の挿入方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/image28-1024x768.gif)
![インライン画像のサイズ変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/inline-img-width-change.png)
画像を選択すると、横幅サイズの調節ができます。適用もしくはEnterキーで決定です。
文章中ではなく画像単体で挿入したい場合は、下記のページをご覧ください。
文字色
ブロック内にあるテキストの、一部の色を変更できます。
![文字色変更するテキストの選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/text-select.png)
![テキスト色変更ボタンの場所](https://kotatsu.info/blog/wp-content/uploads/2021/08/tool-read-rest-text-color.png)
![テキストの色を選択するパレット](https://kotatsu.info/blog/wp-content/uploads/2021/07/tool-read-rest-text-color-select.png)
パレットの中にない色を作成できます。
色を解除します。
![一部のテキスト色を変更する方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/image57.gif)
![文字色の変更ボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/tool-text-color-icon.png)
ツールバーの「A」と書かれたアイコンをクリックすれば、色を変更できます。
その他の装飾
![上付き・下付き・取り消し線](https://kotatsu.info/blog/wp-content/uploads/2021/08/tool-read-rest-text-deco.png)
他には、上付きや下付きの文字、取り消し線も装飾できます。
- 上付き文字上付き
- 下付き文字下付き
取り消し線
今までご紹介した文字装飾は、ほぼいろんなブロックで使えます。
![画像の下に挿入する説明文(キャプション)](https://kotatsu.info/blog/wp-content/uploads/2021/07/img-caption-text-deco.jpg)
右メニューバーでの段落ブロック編集
文字の装飾ができるなら、フォントサイズや全体の色も変更したいですよね。
それなら、ブロックを選択すると右側に表示されるメニューバーから設定できます。
![右側のメニューバーを表示した画面](https://kotatsu.info/blog/wp-content/uploads/2021/08/right-side-bar-open.png)
もし右側に何も出ない場合は、右上の歯車マークをクリックしてください。
![右上の歯車アイコン(設定)](https://kotatsu.info/blog/wp-content/uploads/2021/08/gear-icon.png)
画面右上の歯車マークで、右側メニューバーの表示・非表示の切り替えができます。
![well well-sm 右側のメニューバーの表示方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/image22.gif)
フォントサイズ変更
![タイポグラフィ(フォントサイズ)](https://kotatsu.info/blog/wp-content/uploads/2021/08/setting-typography.png)
- 「フォントサイズ」からは、文字の大きさを変更できます。
- プルダウンメニューで選択したフォントのサイズは、右側に表示されます。
- 希望のサイズがなければ、手動で入力もできます。
- 「リセット」で元のサイズに戻します。
- テーマによっては、行間(行の高さ)が変更できます。フォントサイズ変更後の行間調整に使いましょう。
![フォントサイズ変更方法](https://kotatsu.info/blog/wp-content/uploads/2021/08/image59.gif)
現状デフォルト(2021年8月現在)では、文字装飾のような文字単体を指定してのフォントサイズ変更はできません。
ブロック全体のフォントサイズのみです。
文字と背景の色
![テキスト色と背景色のパレット](https://kotatsu.info/blog/wp-content/uploads/2021/08/right-side-color-palette.png)
ブロック全体の文字と背景の色を変更できます。
パステルの中にはない色を作成します。
色の変更を外します。
![この色の組み合わせは読みにくいため、より明るい背景色、より暗い文字色を試してください。](https://kotatsu.info/blog/wp-content/uploads/2021/08/color-alert.png)
すでに一部の文字色を設定していた場合は、それ以外の文字色が変わります。
![ブロックツールバーとサイドメニューの色設定の関係](https://kotatsu.info/blog/wp-content/uploads/2021/09/text-block-color-not-change.jpg)
ページ内リンクを付ける方法
![「高度な設定」の「HTMLアンカー」](https://kotatsu.info/blog/wp-content/uploads/2021/08/html-anker.png)
「高度な設定」では、「HTMLアンカー」を利用して、ページ内を移動できるリンクを設置できます。
![移動先のブロックに「text-link」とつける](https://kotatsu.info/blog/wp-content/uploads/2021/07/html-anker-name-1024x361.png)
![移動先ブロックのHTMLアンカーのリンクを付ける](https://kotatsu.info/blog/wp-content/uploads/2021/07/link-anker.png)
それでは、ページ内リンクを付けるところから、実際のページの動きまでを見てみましょう。
![アンカーリンクの付け方からページの動きまで](https://kotatsu.info/blog/wp-content/uploads/2021/08/image14-1023x646.gif)
リンクをクリックすると、HTMLアンカーで「text-link」とつけたブロックへとスクロールしました。
これを利用すれば、下記のような目次や、ページ下部への案内リンクを挿入できます。
以上、テキストの装飾方法を解説しました。
こちらもブロックの移動と同様、ほぼすべてのブロックで調整可能です。
WordPressの設定や導入している拡張機能、テーマやバージョンによっては、画面が記事と違う場合がありますが、基本的には同じ操作となるはずです。不明な部分がありましたら、お気軽にお申し付けください。
次は「見出し」と「リスト」の挿入方法をご紹介いたします。