【WordPress】ブロック記事エディタの使い方

# 前回の記事

前回の記事では、コピーライト=著作権について触れました。Webサイト制作する上では重要な観点ですが、手を動かすというより頭を動かす感じでしたね笑

https://qiita.com/raptony110/private/90b91eb9c43aab73acb9

今回から、また手を動かしていきます。実際に記事を投稿してみましょう。

僕のAdvent Calendarを読み終わった人が、
「へぇ簡単なんだなぁ〜　自分もWordPress使ってサイト作ってみようかな〜」って思うあなたがそこにいたのなら、、、、
読むだけで、頭の中WordPress化しちゃったんだよッ！！！！

https://qiita.com/advent-calendar/2022/wordpress-output

# 記事を投稿する
## 新たしい記事を作成する
投稿>新規追加メニューを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/f54478ad-44c4-ece8-fc95-9b75e96691e3.png)
まっさらな画面が出てきましたね。これが投稿画面です。
ここにタイトルや、本文、画像などを追加していきます。
## タイトルを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/b61d1861-5edb-3fde-72b1-4b7f4dfc2dd8.png)
「タイトルを追加」と書かれているところにカーソルを当てると、タイトルを入力することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/95473eaf-03bb-df53-a22b-42f518a82c17.png)

## 要素を追加する
次に段落を追加したいのですが、すでに一つ要素が追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/d3ddcdbd-7c7b-4cda-9fc7-a2b411f4bb0b.png)
この部分にテキストをいれることで、文章を追加することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/f17c21f3-3f70-a55a-27ea-8c38ee047e2a.png)
こんな具合ですね。
しかし、これだけだと、記事自体のタイトルと、文章だけがある状態です。
見出しも追加しましょう。
Enterを押すか、もしくは、右の＋ボタンを押すと要素の追加をすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/4e4e0eef-0931-4930-0283-74236829e81e.png)
見出しを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/599a1eb7-4e63-2a97-65eb-2d694b9afc8a.png)
見出しを追加することができました。
テキストと見出しの順番が逆なので入れ替えます。
入れ替える要素にカーソルを当てるとメニューが表示されますので、^ボタンを押すとひとつ上に要素が上がります。入れ替えは、ドラッグ＆ドロップでもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/f78f9d31-d9a3-32d5-c9cc-eee8badef327.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/f7bddba0-50e3-4ece-5838-633e6f3a63af.png)
これでOKですね！
このようにして、見出しと段落を追加して記事を作成していきます。

## 画像を追加する
画像を挿入してみましょう。
Enterを押すか、＋ボタンで要素を追加します。メニューから画像を選択すると以下の状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/977c06fe-7173-6a6b-12cc-85439d64045a.png)
アップロード、メディアライブラリ、URLから挿入、の三つの方法で画像を挿入できます。
今回は、先に作成したロゴを挿入してみましょう。
メディアライブラリを選択して追加していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/657f7214-d1de-c368-b39f-773ff656a7f4.png)
できました。簡単ですね。

## カラムを追加して、横並びで段落を並べる
横並びでコンテンツを並べてみます。
左上の＋ボタンを押すと、追加できるすべての要素を一覧で表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/d7fa4111-5bf5-3632-ed6c-0343a982757e.png)
この中からカラムを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/b5597d33-39a7-3404-bdf8-b3a163a1ac61.png)
選択すると、以下のような要素が追加され、幾つに分割するかを選択することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/056931a4-e88a-b784-9901-a6f77cd8e4f7.png)
今回は横に3つ並べてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/40b3f3fe-5bca-f0ae-6d06-73e99be2bec3.png)
それぞれに要素を追加していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/6bb1efe8-316e-f427-94cc-b11d8236f4e0.png)
見出しと画像をそれぞれのカラムに追加しました。
記事のレイアウトを視覚的に調整できるようになっています。

## SNSアイコンを並べよう
同じように左上の＋ボタンを押して、すべてのメニューを表示し、ウィジェット欄を探しましょう。ソーシャルアイコンを利用すると簡単にSNSアイコンを並べることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/e9c4bfc3-d917-970a-05ca-4c73680c2e4c.png)
選択すると以下のような状態になりますので、右の＋ボタンで追加したいSNSを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/983b1b7a-5a3b-2cac-0145-a30bf23096b4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/14c551d1-f35b-1b89-5587-cf4b84e5b6c9.png)
多くのSNSが登録されていますが、日本で普及しているLINEなどはありません。
アイコンの追加ができたら、それぞれのアイコンをクリックして、URLを登録して完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/91c3eee9-0588-bccb-d185-8554914d97bd.png)

# おわりに
いかがでしたでしょうか。一度では、紹介しきれないほどのブロック機能がついています。是非触ってみて、どんな機能があるのか確認してみましょう。
こんなことができるなら、こういう構成にしようとか、イメージが湧くと思いますよ。

それでは、次回は、投稿に付随する設定を見ていきましょう。