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

1. 文字を変更

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

太字にするにはボタン、下線を引くなら、先程の太文字や下線を解除するなら解除したい文字を選択してをクリックします。

フォントの種類を変えたいときHelvetica Neueボタンで変更できます。font-familyにあたる部分です。

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

2. 文字の色を変更

こちらの下矢印ボタンを押すと文字の背景色と文字の色を変更できます。

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

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

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

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

表を入れます。

10✕10マスまで選択できます。

そのページへのリンクを挿入できます。

URLやご自身のファイルから画像を選択でき、選択した画像を挿入できます。

動画のURLを入れると、その動画を入力フォームに挿入できます。

ブラウザからエディターに変更でき、コードとして書いたものがそのまま入力フォームに表示される ### 注意！　大きな画像を入れている状態でエディターを開くと　動作が重くなる可能性がございます！！

入力フォームを拡大させる

よく使うショートカットキーを見ることができる

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

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