WordPressってレンタルブログに比べ、出来ることがとても多いですが、それ故に「こんなことが出来たの！？」という発見が日常茶飯事です。
なのでWordPressをいじくり回して、試したことを記事にまとめて、WordPressを理解していきたいと思います。
この記事ではブロックエディタ（Gutenberg）の「一般ブロック」についてまとめました。
一般ブロックとは
ブロックエディタで一番上に位置する「一般ブロック」。（「よく使うもの」を除く）
「段落ブロック」や「見出しブロック」など、記事を書くのにメインとなるブロックが入っています。
他にも「画像ブロック」など、メディアライブラリや記事内からアップデートしたファイルを挿入するためのブロックがあります。
一般ブロック内にあるブロック
段落ブロック
ブロックを使って、いろいろな物語を組み立ててください。
一番よく使う文章を書くためのブロックです。この文章も段落ブロックです。
改行していくとデフォルトで段落ブロックが挿入されていきます。
文字サイズを段落ごとに小、中、標準、大、特大、カスタムから選べます。（これは『中』）
段落ごとに、背景色と文字色を設定することも出来ます。
「段落ブロック」に背景色を濃いグレー、文字色を薄いグレーに設定した場合ものです。
手軽にこんなことが出来たんですね…。
見出しブロック
新しいセクションを紹介しコンテンツを整理することで、ビジター (と検索エンジン) のコンテンツ構造理解の手助けをしましょう。
h6まで使えます。
テーマによりますが、当ブログで使用しているCocoonは記事タイトルにh1を使用しているため、記事ではh2からh6を使います。
「アンカー」と呼ばれる、この見出し専用の一意の Web アドレスを作成するために、スペースを含まない単語（英数字を使用することをお勧めします）を1つまたは2つ入力します。見出しにアンカーを設定することで、ページのこのセクションに直接リンクできるようになります。
WordPressブロック説明より
見出しにはHTMLアンカーを付けることも出来ます。
HTMLアンカーを付けると、アンカーを付けた見出しへリンクを貼ることが出来ます。
上のボタンをクリックすると、HTMLアンカーをつけた「リストボックス」の見出しへ移動します。
目次をクリックすると、見出しまで移動するのと同じ仕組みです。
利用しているテーマやプラグインによっては、見出しにHTMLアンカーが自動的に付くものもあります。
見出しの文字色を変えることも出来ます。上の画像ではh2を青色に変更しています。
この方法で文字色を変えると、後々テーマやデザインを変更したときに、使った部分の修正が面倒になりそうです。
使う場所はなさそうなのど、一部の記事だけ色を変えたい場合はCSSで設定したほうが良さそう。
リストブロック
番号なし、または番号付きのリストを作成します。
リストの種類は「箇条書きリスト」と「番号付きリスト」の2種類。
- 箇条書きリスト1
- 箇条書きリスト2
- 箇条書きリスト3
- 番号付きリスト1
- 番号付きリスト2
- 番号付きリスト3
どちらもインデント機能を使うことが出来ます。
番号付きリストは、数字を逆順に表示することも出来ます。
- インデントリスト1
- インデントリスト2
- インデントリスト3
- インデントリスト2
- 番号付き逆順リスト1
- 番号付き逆順リスト2
- インデントリスト3
- インデントリスト4
- 番号付き逆順リスト5
番号付きリストを逆順にした場合でも、インデントを使っている箇所は逆順にならないようです。
画像ブロック
画像を挿入し、視覚に訴えます。
メディアライブラリや、記事内からアップロードした画像ファイルを表示することが出来ます。
画像のスタイルは「デフォルト」と円形に切り取ってくれる「円形マスク」から選べます。
画像のalt属性（代替えテキスト）を、画像設定から入力出来ます。
デフォルトでは画像サイズ「大」が選択されています。選べるサイズは「サムネイル」「中」「大」「フルサイズ」です。
「画像の寸法」から、直接数値を入力も出来ます。
カバーブロック
テキストオーバーレイを含む画像または動画を追加します。ヘッダーに最適です。
背景に画像を設定し、画像にオーバーレイ効果をかけることが出来ます。
さらに画像の上に、様々なブロックを配置することが出来ます。
この機能は知らなくて今回初めて使いました。
こんなこと出来るんだすげー！と思いましたが、使う場所がぱっと思いつかない…。
ギャラリーブロック
リッチギャラリーに複数の画像を表示します。
4枚の画像をギャラリーブロックを使って並べました。このようにタイル状に画像を並べることが出来ます。
リンク先を「メディアファイル」にし、Lightboxなどのプラグインを使うことで、クリックすると画像が拡大できます。
上記の画像もLightboxを使い、拡大表示が出来るようになっています。（Cocoonの機能を使用）
初期設定ではリンク先が「なし」になっているので、ギャラリーブロックを使うときはリンク先に注意。リンク先が設定されていないと、クリックしても拡大されません。
引用ブロック
引用テキストを視覚的に強調します。「他者の引用は、我々自身への引用である」—フリオ・コルタサル
引用した文章を入力します。
ここに引用した文章を載せます。
引用元をここに記載。リンクを貼ることもできます。
スタイルは「デフォルト」と「大」が選べます。
スタイル「大」を選択した場合はこんな感じの表示。
引用元をここに表記
ファイルブロック
ファイルをダウンロードするリンクを追加します。
ダウンロードさせたいデータにリンクすることで、ダウンロードボタンが作れます。
テストファイルがダウンロード出来るボタンを作りました。
文字リンクのみの表示も出来ます。
音声ブロック/動画ブロック
シンプルな音声プレイヤーを埋め込みます。
メディアライブラリから動画を埋め込むか、新しい動画をアップロードしてください。
「音声ブロック」はアップロードした音声ファイルを、「動画ブロック」は動画ファイルを記事内に埋め込むことが出来ます。
こちらは実際ファイルをアップロードすることが出来なくて、どんな風に表示されるのか分かりません…。
音声や動画ファイルは容量が大きいので、個人サイトレベルならyoutubeなどにアップロードしたものを埋め込むほうが容量の節約になりそう。
まとめ
一般ブロックは使う頻度が高いので、知っている機能が多かったですが、これだけ使っていても知らない機能がこれだけあったのか…と思いました。
よく使う一般ブロックでさえ知らないことがいっぱいあって、WordPress全部使いこなせる気がしない…！
一般ブロック以外の他のブロックも試していきたいと思います。
WordPress奥が深すぎる…。
コメント