concrete5でページの文章を編集する方法

concrete5でページの文章を編集する方法を解説します。

まず、画面上部にあるバーの、赤丸で囲ったボタンをクリックします。
![ページ編集1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/478db40a-dbac-a783-b7e3-9d34c8588102.png)


編集したいブロックにカーソルを合わせると緑色の枠が出てくるので、その場所でクリックします。（例えば下の画像で、赤丸で囲った部分のどこかにカーソルを合わせると、ブロック2の周りに緑色の枠が出てくる）
![ページ編集2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/aae9addc-4670-c391-46e0-b529ce354ff3.png)

すると、緑色の塗りつぶしとメニューが出てくるので、「ブロック編集」を選択します。
![ページ編集3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/e09640df-2251-1405-a63c-95f7ce8aca88.png)

すると次のような画面になるので、ここで文章を編集していきます。例えば、赤丸で囲った部分をクリックして文字を入力すると、文章が追加されます。
![ページ編集4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/434ee687-45a5-a6b8-d2a7-90937fc4d468.png)

![ページ編集5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/000f1308-b79c-546e-ad88-250091d39536.png)


次に、下の画像の赤丸で囲った部分について解説します。これらのボタンの多くは文字の装飾に使われます。
![ページ編集6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/90c0c3a6-1968-c740-e868-89e01ff80375.png)

まず、右上にあるこれらのボタンは、左から順に、「太字にする（**B** のボタン）」、「斜体にする（*I* のボタン）」、「下線を引く（<ins>U</ins> のボタン）」、「打ち消し線を引く（~~S~~ のボタン）」、「下付き文字にする（x<sub>2</sub> のボタン）」、「上付き文字にする（x<sup>2</sup> のボタン）」という意味です。
![ページ編集7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/0821964f-db32-ea78-5a80-ec0f0b9ed66f.png)

例えば、文字を選択して「B」のボタンを押すと、選択した文字が太字になります。
![ページ編集8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/1a8ab106-2bef-566c-3214-b0bab75ecba3.png)
![ページ編集9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/b89b0017-b892-35fe-bec8-6240180e52dd.png)

次に、この部分では、文字の大きさを変えることができます。見出し1～見出し6はHTMLでいうところのh1～h6タグに対応しています。（HTMLが分からない方はスルーしてください）
見出し1が一番文字サイズが大きくて、見出し2、見出し3、、と数字が小さくなるほど、文字が小さくなっていきます。ちなみに何も設定しないと自動で「標準」（HTMLのpタグに相当）という設定になります。
![ページ編集10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/7b02d324-dd3c-bdca-5ab7-02fca577d037.png)

例えば、文字を選択して「見出し1」を選択すると、選択した文字の文字サイズが大きくなります。
![ページ編集11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/dae82b89-1a2e-be5f-9a7e-3657a1d88c34.png)
![ページ編集12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/68c81ad4-a67a-8daf-915e-38002043f49e.png)

ここからは箇条書きになります。
<details>
<summary>リストを作成する方法</summary>赤丸で囲った部分をクリックすると、リストを作成することができます。左のボタンを選ぶと番号付きリストが、右のボタンを選ぶと番号無しリストが作成されます。
![ページ編集14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/32504b39-6bd2-944f-fec9-bf096196f479.png)
</details><details>
<summary>文章を水平方向の配置を変える方法（左揃え、右揃えなど）</summary>赤丸で囲った部分をクリックすると、文章の水平方向の配置を設定できます。左から順に、「左揃え」、「中央揃え」、「右揃え」、「両端揃え」という意味です。
![ページ編集15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/1c42589a-4745-11b8-bb75-c8009f2c2e06.png)
</details><details>
<summary>リンクを挿入する方法</summary>リンクにしたい文字を選択して、赤丸で囲ったボタンをクリックします。
![ページ編集16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/74cf9415-7e91-1e73-74f2-6e67cada65b9.png)
すると、次のようなメニューが出てくるので、リンク先のURLを赤丸で囲った部分に入力します。
![ページ編集17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/a0629d90-4a97-2ea2-8e40-6fee759b18e3.png)
すると、リンクが挿入できます。
![ページ編集18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/1beb47ad-5b81-944b-a0e9-a8742e827b61.png)
</details><details>
<summary>画像を挿入する方法</summary>赤丸で囲ったボタンをクリックします。
![ページ編集19（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/136ec54b-444e-54da-b998-b8039db4d7c5.png)
すると、次のようなメニューが表示されるので、赤丸で囲ったボタンをクリックします。
![ページ編集20（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/46e27715-8ea1-74e8-1d28-ca380f0e3b62.png)
赤丸で囲った部分をクリックして一覧にある画像を選択します。（一覧に画像が無い場合はもう1個下の画像を参照してください）
![ページ編集21（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/34c45051-9241-8833-e71e-5bc8a0982ed5.png)
一覧に画像が無い場合は、赤丸で囲った部分をクリックすると、自分のパソコンにある画像をアップロードできます。
![ページ編集22（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/1c61723b-43bc-bc92-3b56-3774008e3b68.png)
![ページ編集23（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/fc067017-e2ec-38e6-f5e0-426262270fdf.png)
画像を選択できたら、このような画面になるはずなので、赤丸で囲った部分で画像の幅や高さ、リンクを設定できます。
![ページ編集24（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/13dbeb90-5034-6caa-3e0d-92a61ec84f21.png)
すると画像が挿入できます。
![ページ編集25（画像の挿入）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/4b68ac28-08f2-f6c9-df9b-6ecf2c10a602.png)
</details>