summernoteの使い方


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/7898592c-ee96-ec53-e43e-eefcaa2c11d6.png)

前回導入したsummernoteの使い方を紹介します。

summernote導入方法について→https://qiita.com/Shou_/items/a096924d7b0a387862ab

## 目次
[1. 文字を変更](#1-文字を変更)
[2. 文字の色を変更](#2-文字の色を変更)
[3. 箇条書き](#3-箇条書き)
[4. 段落](#4-段落)
[5. table挿入](#5-table挿入)
[6. url挿入](#6-url挿入)
[7. 画像挿入](#7-画像挿入)
[8. 動画挿入](#8-動画挿入)
[9. エディターに変換](#9-エディターに変換)
[10. その他の機能](#10-その他の機能)



##1. 文字を変更


### 見出し
![スクリーンショット 2020-08-14 9.26.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/7f5895aa-c497-48ae-5052-195ac21e1c46.png)

summernoteの右上にあるボタンをクリックすると見出しの文字になります。HTMLだとh1、h2にあたります。Normalを押すと元に戻ります。


### 太字・下線
![スクリーンショット 2020-08-14 17.27.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/8148c89f-a014-21f1-7fb8-900dc91febad.png)

太字にするにはボタン、下線を引くなら、先程の太文字や下線を解除するなら解除したい文字を選択してをクリックします。
### フォントの種類（font-family）
<img width="125" alt="スクリーンショット 2020-08-14 9.46.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/c29749ec-f3df-22fe-4bf5-b7db2afa6c10.png">
フォントの種類を変えたいときHelvetica Neueボタンで変更できます。font-familyにあたる部分です。

※フォントの種類を変更できるのは英数字のみで仮名文字は変更できないのでご注意です！
##2. 文字の色を変更



<img alt="スクリーンショット 2020-08-14 10.24.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/818ff003-890c-1572-db11-a32d57669650.png">
こちらの下矢印ボタンを押すと文字の背景色と文字の色を変更できます。


左が背景色で右が文字色です。

##3. 箇条書き
![スクリーンショット 2020-08-14 17.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/528de3b0-ccdd-3b5d-20b9-ba29f05b4cdd.png)

順不同型は左、番号型は右のボタンをクリックします


##4. 段落

<img width="239" alt="スクリーンショット 2020-08-14 11.18.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/6dc14c16-2ed4-e402-a45e-e1159860a09b.png">

左から　文字を左揃え、中央揃え、右揃え、　変更を戻すボタンとなります。

その右のボタンはインデントをつけるボタンとインデントを消すボタンです。



##5. table挿入

<img　alt="スクリーンショット 2020-08-14 11.30.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/e4afbd04-6471-aea6-a762-d765931e10c4.png">
表を入れます。
<img alt="スクリーンショット 2020-08-14 11.31.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/bb6a5270-04f4-9ffc-f9b2-604656f047d3.png">
10✕10マスまで選択できます。

##6. url挿入

<img alt="スクリーンショット 2020-08-14 11.39.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/25afb031-7855-c82b-8880-9dda9a8b6995.png">
そのページへのリンクを挿入できます。
<img width="589" alt="スクリーンショット 2020-08-14 11.42.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/4fe34e97-6c86-8eb9-b5b3-d8b53afae475.png">




##7. 画像挿入

<img alt="スクリーンショット 2020-08-14 11.35.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/a48228ba-51b0-3507-7b3b-7e620e22bd7b.png">
URLやご自身のファイルから画像を選択でき、選択した画像を挿入できます。
<img width="586" alt="スクリーンショット 2020-08-14 11.37.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/e8998e72-fd28-142b-abe5-2ce8c16308f9.png">


##8. 動画挿入

<img alt="スクリーンショット 2020-08-14 11.44.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/1e2a6ee4-9836-27a5-5263-839ad5a0f7c9.png">
動画のURLを入れると、その動画を入力フォームに挿入できます。

##9. エディターに変換

<img alt="スクリーンショット 2020-08-14 11.57.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/4e795e64-9572-dfff-c498-1583a7b2fc47.png">
ブラウザからエディターに変更でき、コードとして書いたものがそのまま入力フォームに表示される
### 注意！　
大きな画像を入れている状態でエディターを開くと　動作が重くなる可能性がございます！！

<img width="778" alt="スクリーンショット 2020-08-14 12.47.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/bd887f24-a583-259e-fced-cf355aeab1c2.png">

<img width="773" alt="スクリーンショット 2020-08-14 12.49.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/c91ef843-ecc6-2f20-2017-31c9114799eb.png">

##10. その他の機能

<img alt="スクリーンショット 2020-08-14 11.55.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/84b4dfd9-eef2-8511-881f-4abc00dca0d2.png">
入力フォームを拡大させる

<img alt="スクリーンショット 2020-08-14 11.58.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613591/1a5509bf-97d5-7ca6-3911-1c3981e0690e.png">
よく使うショートカットキーを見ることができる

今回はsummernoteの使用方法について説明して致しました。自分はまだまだ使い慣れていませんが、非常に便利な機能なので是非試してみてください。

間違った箇所がございましたらご指摘よろしくお願い致します。