ブロックエディター簡単な操作方法【テキスト編】

WordPressのブロックエディターの操作方法をコードとともに、簡単に説明します。デザインはCSSで統一してあります。

タイトル下の部分に記事を入力していきます。デフォルトは段落になっていますので、テキストを入力していけます。その他のものは、左上のワードプレスのロゴの右側の水色の+マークをクリックします。

見出し(H2〜H4)

H2 : ブロックレイアウトテスト

H3 : ブロックレイアウトテスト

H4 : ブロックレイアウトテスト

実際は、H1からH6までありますが、タイトルでH1を使用しているので、H2から使用していきます。CXG DESIGNのBLOGでは、H5、H6のCSSを使用していないません。文字の大きさによって、H2〜H4と小さくなっていきます。デザインによっては、黒ベタの見出しや、小見出しなどをするので、H6まで使用します。

リスト(ドット・ナンバー)

• SSSSSS
• KSDODJK
• 立ちつつつ

1. 追加
2. 追加２
3. ３３３

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

引用

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

引用サイトテストテストテスト

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

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

詳細(アコーディオン)

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

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

詳細は通称アコーディオンという機能で、▶︎をクリックすると文章が下に出てくる仕組みです。もう一度▼を押すと元に戻ります。他のWebサイトではQ&Aなどでよく使用しています。文章を入力するだけでこの仕組みが使えるので大変便利です。三角の部分を消して、仕様に合わせてデザインを変更することもできます。

テーブル

項目	料金
デザイン費	300,000円
プログラミング費	500,000円
サーバー取得費	100,000円
撮影費	50,000円
合計金額	1,000,000円

これも簡単に作ることができます。縦横の数を変更して入力すれば完成です。ヘッダーやフッターも設定することができるので、色々な表に対応できます。

<ol>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

整形済みテキスト

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

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

その他

詩は、その名の通り詩を書くとき便利な機能です。改行しても段落にならないので、改行、書き換え、を感覚的に行えます。整形済みテキストと似ていますが、段落変換しても、改行コード(br)が入らないので、改行が消えます。

コードは、この記事でもある、黒ベタのところで、プログラミング言語を表示するときに使用します。

クラシックは、ブロックエディターになる前のクラシック環境で文字入力が行える機能です。通常は、ブロックエディターだけで書けますが、spanタグなどを入れる場合は、こちらの環境で行います。