0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2022-05-17

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

まず、画面上部にあるバーの、赤丸で囲ったボタンをクリックします。
ページ編集1.png

編集したいブロックにカーソルを合わせると緑色の枠が出てくるので、その場所でクリックします。(例えば下の画像で、赤丸で囲った部分のどこかにカーソルを合わせると、ブロック2の周りに緑色の枠が出てくる)
ページ編集2.png

すると、緑色の塗りつぶしとメニューが出てくるので、「ブロック編集」を選択します。
ページ編集3.png

すると次のような画面になるので、ここで文章を編集していきます。例えば、赤丸で囲った部分をクリックして文字を入力すると、文章が追加されます。
ページ編集4.png

ページ編集5.png

次に、下の画像の赤丸で囲った部分について解説します。これらのボタンの多くは文字の装飾に使われます。
ページ編集6.png

まず、右上にあるこれらのボタンは、左から順に、「太字にする(B のボタン)」、「斜体にする(I のボタン)」、「下線を引く(U のボタン)」、「打ち消し線を引く(S のボタン)」、「下付き文字にする(x2 のボタン)」、「上付き文字にする(x2 のボタン)」という意味です。
ページ編集7.png

例えば、文字を選択して「B」のボタンを押すと、選択した文字が太字になります。
ページ編集8.png
ページ編集9.png

次に、この部分では、文字の大きさを変えることができます。見出し1~見出し6はHTMLでいうところのh1~h6タグに対応しています。(HTMLが分からない方はスルーしてください)
見出し1が一番文字サイズが大きくて、見出し2、見出し3、、と数字が小さくなるほど、文字が小さくなっていきます。ちなみに何も設定しないと自動で「標準」(HTMLのpタグに相当)という設定になります。
ページ編集10.png

例えば、文字を選択して「見出し1」を選択すると、選択した文字の文字サイズが大きくなります。
ページ編集11.png
ページ編集12.png

ここからは箇条書きになります。

リストを作成する方法赤丸で囲った部分をクリックすると、リストを作成することができます。左のボタンを選ぶと番号付きリストが、右のボタンを選ぶと番号無しリストが作成されます。 ![ページ編集14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/32504b39-6bd2-944f-fec9-bf096196f479.png)
文章を水平方向の配置を変える方法(左揃え、右揃えなど)赤丸で囲った部分をクリックすると、文章の水平方向の配置を設定できます。左から順に、「左揃え」、「中央揃え」、「右揃え」、「両端揃え」という意味です。 ![ページ編集15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/733566/1c42589a-4745-11b8-bb75-c8009f2c2e06.png)
リンクを挿入する方法リンクにしたい文字を選択して、赤丸で囲ったボタンをクリックします。 ![ページ編集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)
画像を挿入する方法赤丸で囲ったボタンをクリックします。 ![ページ編集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)
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?