【WordPress】ブロックエディタ(Gutenberg)の「一般ブロック」で出来ること

WEB

WordPressってレンタルブログに比べ、出来ることがとても多いですが、それ故に「こんなことが出来たの!?」という発見が日常茶飯事です。

なのでWordPressをいじくり回して、試したことを記事にまとめて、WordPressを理解していきたいと思います。

この記事ではブロックエディタ(Gutenberg)の「一般ブロック」についてまとめました。

「一般ブロック」はWordPress5.5で廃止されました。

WordPress5.5では「テキストブロック」「メディアブロック」などに移動しています。

  • 記事中の画像と仕様は、WordPressに初期からインストールされている「Twenty Seventeen」のものを掲載しています。
  • 利用しているテーマやカスタマイズによって、見た目や仕様が違う場合があります。

一般ブロックとは

WordPressのブロックエディタ一覧

ブロックエディタで一番上に位置する「一般ブロック」。(「よく使うもの」を除く)

「段落ブロック」や「見出しブロック」など、記事を書くのにメインとなるブロックが入っています。

他にも「画像ブロック」など、メディアライブラリや記事内からアップデートしたファイルを挿入するためのブロックがあります。

一般ブロック内にあるブロック

段落ブロック

段落
WordPressの段落ブロックのアイコン

ブロックを使って、いろいろな物語を組み立ててください。

一番よく使う文章を書くためのブロックです。この文章も段落ブロックです。

改行していくとデフォルトで段落ブロックが挿入されていきます。

文字サイズを段落ごとに小、中、標準、大、特大、カスタムから選べます。(これは『中』)

WordPressの段落ブロックの背景色と文字色の設定画面

段落ごとに、背景色と文字色を設定することも出来ます。

WordPressの背景色と文字色の設定を変えた段落
WordPressの段落の色設定

「段落ブロック」に背景色を濃いグレー、文字色を薄いグレーに設定した場合ものです。

手軽にこんなことが出来たんですね…。

見出しブロック

見出し
WordPressの見出しブロックのアイコン

新しいセクションを紹介しコンテンツを整理することで、ビジター (と検索エンジン) のコンテンツ構造理解の手助けをしましょう。

WordPressの見出しのイメージ

h6まで使えます。

テーマによりますが、当ブログで使用しているCocoonは記事タイトルにh1を使用しているため、記事ではh2からh6を使います。

WordPressのHTMLアンカーの説明

「アンカー」と呼ばれる、この見出し専用の一意の Web アドレスを作成するために、スペースを含まない単語(英数字を使用することをお勧めします)を1つまたは2つ入力します。見出しにアンカーを設定することで、ページのこのセクションに直接リンクできるようになります。

WordPressブロック説明より

見出しにはHTMLアンカーを付けることも出来ます。

HTMLアンカーを付けると、アンカーを付けた見出しへリンクを貼ることが出来ます。

上のボタンをクリックすると、HTMLアンカーをつけた「リストボックス」の見出しへ移動します。

目次をクリックすると、見出しまで移動するのと同じ仕組みです。

利用しているテーマやプラグインによっては、見出しにHTMLアンカーが自動的に付くものもあります。

WordPressの見出しの文字色を変えたイメージ

見出しの文字色を変えることも出来ます。上の画像ではh2を青色に変更しています。

この方法で文字色を変えると、後々テーマやデザインを変更したときに、使った部分の修正が面倒になりそうです。

使う場所はなさそうなのど、一部の記事だけ色を変えたい場合はCSSで設定したほうが良さそう。

リストブロック

リスト
WordPressのリストブロックのアイコン

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

リストの種類は「箇条書きリスト」と「番号付きリスト」の2種類。

  • 箇条書きリスト1
  • 箇条書きリスト2
  • 箇条書きリスト3
  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3

どちらもインデント機能を使うことが出来ます。

番号付きリストは、数字を逆順に表示することも出来ます。

  • インデントリスト1
    • インデントリスト2
      • インデントリスト3
  1. 番号付き逆順リスト1
  2. 番号付き逆順リスト2
    1. インデントリスト3
    2. インデントリスト4
  3. 番号付き逆順リスト5

番号付きリストを逆順にした場合でも、インデントを使っている箇所は逆順にならないようです。

画像ブロック

画像
WordPressの画像ブロックのアイコン

画像を挿入し、視覚に訴えます。

メディアライブラリや、記事内からアップロードした画像ファイルを表示することが出来ます。

WordPressの画像ブロックのスタイル設定画面

画像のスタイルは「デフォルト」と円形に切り取ってくれる「円形マスク」から選べます。

WordPressの画像ブロックの設定画面

画像のalt属性(代替えテキスト)を、画像設定から入力出来ます。

デフォルトでは画像サイズ「大」が選択されています。選べるサイズは「サムネイル」「中」「大」「フルサイズ」です。

「画像の寸法」から、直接数値を入力も出来ます。

カバーブロック

カバー
WordPressのカバーブロックのアイコン

テキストオーバーレイを含む画像または動画を追加します。ヘッダーに最適です。

WordPressのカバーブロックのイメージ

背景に画像を設定し、画像にオーバーレイ効果をかけることが出来ます。

さらに画像の上に、様々なブロックを配置することが出来ます。

この機能は知らなくて今回初めて使いました。

こんなこと出来るんだすげー!と思いましたが、使う場所がぱっと思いつかない…。

ギャラリーブロック

ギャラリー
WordPressのギャラリーブロックのアイコン

リッチギャラリーに複数の画像を表示します。

4枚の画像をギャラリーブロックを使って並べました。このようにタイル状に画像を並べることが出来ます。

リンク先を「メディアファイル」にし、Lightboxなどのプラグインを使うことで、クリックすると画像が拡大できます。

上記の画像もLightboxを使い、拡大表示が出来るようになっています。(Cocoonの機能を使用)

初期設定ではリンク先が「なし」になっているので、ギャラリーブロックを使うときはリンク先に注意。リンク先が設定されていないと、クリックしても拡大されません。

引用ブロック

引用
WordPressの引用ブロックのアイコン

引用テキストを視覚的に強調します。「他者の引用は、我々自身への引用である」—フリオ・コルタサル

引用した文章を入力します。

ここに引用した文章を載せます。

引用元をここに記載。リンクを貼ることもできます
WordPressの引用ブロックの設定画面

スタイルは「デフォルト」と「大」が選べます。

スタイル「大」を選択した場合はこんな感じの表示。

引用元をここに表記

ファイルブロック

ファイル
WordPressのファイルブロックのアイコン

ファイルをダウンロードするリンクを追加します。

ダウンロードさせたいデータにリンクすることで、ダウンロードボタンが作れます。

テストファイルがダウンロード出来るボタンを作りました。

文字リンクのみの表示も出来ます。

ダウンロード出来るファイルはzipファイルで、中身はテキストファイルのみです。テスト用の特に意味のないテキストしか入ってません。

音声ブロック/動画ブロック

音声
WordPressの音声ブロックのアイコン

シンプルな音声プレイヤーを埋め込みます。

動画
WordPressの動画ブロックのアイコン

メディアライブラリから動画を埋め込むか、新しい動画をアップロードしてください。

「音声ブロック」はアップロードした音声ファイルを、「動画ブロック」は動画ファイルを記事内に埋め込むことが出来ます。

こちらは実際ファイルをアップロードすることが出来なくて、どんな風に表示されるのか分かりません…。

音声や動画ファイルは容量が大きいので、個人サイトレベルならyoutubeなどにアップロードしたものを埋め込むほうが容量の節約になりそう。

まとめ

一般ブロックは使う頻度が高いので、知っている機能が多かったですが、これだけ使っていても知らない機能がこれだけあったのか…と思いました。

よく使う一般ブロックでさえ知らないことがいっぱいあって、WordPress全部使いこなせる気がしない…!

一般ブロック以外の他のブロックも試していきたいと思います。

さる子
さる子

WordPress奥が深すぎる…。

コメント

タイトルとURLをコピーしました