ブロックエディター【記事を書く時に必要＆役立つブロックの簡単な操作方法】

2023.09.25

BlockEditor

WordPressの特徴の一つが投稿機能です。管理者が、自由にページを追加、更新できるシステムです。

今回は、その中のブロックエディターの操作方法を簡単に説明します。

タイトル下の部分に記事を入力していきます。

左上のワードプレスのロゴの右側の水色の+マークをクリックするとブロック一覧が表示されます。

今回は、細かい操作方法は説明しません。こういうことができるとういうことを、ビジュアルで見せていきます。ブログなどの記事を書くときに必要＆役立つブロックの簡単な操作方法です。当BLOGでも、今回紹介するものを基本に制作しております。また、デザインはCSSで統一しています。

段落

段落1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

段落2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

デフォルトのブロックです。新規でページを作成したときは、段落が設定されています。シフト＋リターンで改行され、リターンキーを押すと新しい段落が作成されるので、続けて文字を入力していきます。

テキスト＞段落

見出し

H2 : 見出しテキストテキストテキストテキストテキスト

H3 : 見出しテキストテキストテキストテキストテキスト

H4 : 見出しテキストテキストテキストテキストテキスト

実際は、H1からH6までありますが、タイトルでH1を使用しているので、H2から使用していきます。CXG DESIGNのBLOGでは、H5、H6のCSSを使用していません。文字の大きさによって、H2〜H4と小さくなっていきます。当ブログでは大きさ変更だけのシンプルなデザインにしていますが、アンダーバーや黒ベタなどの見出しデザインも設定できます。

テキスト＞見出し

H1からH6まで選べます。

ドットとナンバー両方設定できます。種類や注意事項などを入力するときに便利です。リストを選択し、ドットかナンバーを選択し、項目を入力したらリターンキーをクリック。次の項目に移動するので、入力していきます。これの繰り返しでリストが作成されます。終了したい場合は2度リターンをクリックするか、次のブロックを選択します。

テキスト＞リスト

左がドット、右がナンバーです。

引用

“著作権法では，一定の｢例外的｣な場合に著作権等を制限して，著作権者等に許諾を得ることなく利用できることを定めています（第30条〜第47条の8）。”
引用元 : 文化庁「著作物が自由に使える場合」

他のWebサイトやブログを引用する場合に使用します。上に引用文、下に引用元の名前、リンクを指定します。好き勝手にWeb上の文献を自分のブログに入れていいわけではなく、一定の条件があります。その一つの方法がこの引用になります。本文とは違うことがわかるようなデザインで入れ、読む人にわかりやすいようにしないといけません。

テキスト＞引用

上に引用文、下に引用元を入力。リンク部分にURL指定。

新しいタブで開くを選択

引用とプルクオートの違い。

同じ引用のブロックでプルクオートいうものがあります。デフォルトではレイアウトや文字の大きさが違いますが、利用目的の大きな違いはありません。プルクオートが大きく強調して文字を見せる目的になってはいますが、当サイトでは、デザイン統一のため、引用のみ使用しております。

詳細（アコーディオン）

Q : 右の三角をクリックすると、どうなりますか？

A : 隠れているここが見えます。通称アコーディオンと言います。

詳細は通称アコーディオンという機能で、▼をクリックすると文章が下に出てくる仕組みです。▲を押すと元に戻ります。他のWebサイトではQ&Aなどでよく使用しています。文章を入力するだけでこの仕組みが使えるので大変便利です。デフォルトでは三角の部分が左側にありますが、文字の頭を揃えるため、右に移動したデザインに変更しています。

テキスト＞詳細

上の「 ▼要約を書く… 」のところに、最初から見える文字、下に隠れている文字を入力。

テーブル（表）

項目A	30,000円
項目B	50,000円
項目C	10,000円
項目D	10,000円

※金額は全て、税込みです。

項目A	30,000円
項目B	50,000円
項目C	10,000円
項目D	10,000円

※金額は全て、税込です。

表を簡単に作ることができます。縦横の数を指定してテキストを入力すれば完成です。後からカラム数(横)、行数(縦)の変更もできます。スタイルは、デフォルト(デモ上)とストライプ(デモ下)2種類から選べます。カラムの文字揃えは左揃え、中央揃え、右揃えの内から選べます(デモでは、左は左揃え、右は右揃えにしました)。

テキスト＞テーブル

カラム数(横)、行数(縦)を入力。

カラム(縦)の文字揃えを指定

項目	金額
項目A	30,000円
項目B	50,000円
項目C	10,000円
項目D	10,000円
合計金額	100,000円

※金額は全て、税込金額です。

項目	金額
項目A	30,000円
項目B	50,000円
項目C	10,000円
項目D	10,000円
合計金額	100,000円

※金額は全て、税込金額です。

右側の設定から、ヘッダーやフッターもつけることができるので、色々な表に対応できます。

右のブロック＞設定から、ヘッダーセクション、フッターセクションを選択

整形済みテキスト

整形済みテキストテキストテキスト
テキストテキスト
テキストテキストテキストテキストテキス

整形済みテキストは、リターンを押しても、段落にならず改行になります。文章で改行位置を自由に決めたい場合はこちらを使用します。段落に変換すればbrタグが入ります。段落に変換しても、整形済みテキストに変換すれば、また、自由に改行できます。

テキスト＞整形済みテキスト

整形済みテキストと詩の違い

整形済みテキスト、詩、どちらもpreタグになっています。テーマによっては、詩は文字が小さくなっていたりします。また、段落変換しても、brタグが入りません。当サイトでは、使用していません。

画像

基本の画像です。文字と写真の組み合わせでBLOGを書いていきます。

メディア＞画像

メディアライブラリから写真を選択

ギャラリー

写真を複数枚指定することで、ギャラリーを作ることができます。デバイスに応じてレイアウトが変化する、レスポンシブデザインに対応しています。

メディア＞ギャラリー

メディアライブラリから写真を複数枚選択

右下の「ギャラリーの挿入」ボタンを押す。

メディアとテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

メディアとテキストは写真と文字を左右に配置できるカラムです。デフォルトでは、テキストが上下中央に配置されますが、左、左右中央、右、上、下揃えを選択できます。左右どちらにテキストを置いても、スマホでは、写真の下に配置されます。

メディア＞メディアとテキスト

左のカラムのメディアライブラリをクリック

写真を選択

カラム

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

メディアとテキストに似ていますが、スマホにすると、左側の文字は写真の上にいきます(左から順番に縦並び)。テキストは、デフォルトは、左上揃えですが、メディアとテキストと同じで、左、左右中央、右、上、上下中央下揃えを選択できます。また、カラム数を増やすことができます。幅の%、テキストor写真など、カラムに入れるもの、配置を変えることができます。