ブロックエディタを使ってみる
ブログのリニューアルに伴い、ブロックエディタに変更してみる。
もし使い勝手がよかったら、今後も使っていく予定。
まずはお試し。
見出しについて
見出しの設定は簡単。
ブロックメニューの『/』を押して、見出しを選ぶだけ。
初期設定では『H2』になっている。
キーボードだけでH3に変更する方法がわからない。
段落
人によって違うだろうけど、ボクは行頭を字下げしたい。
字下げの方法がわからない。
探したら字下げの方法がこちらのサイトで紹介されていました。
CSSをカスタマイズに、以下のクラスを設定。
.indent{
text-indent: 1em;
}右のメニューかの高度な設定から、追加CSSクラスに『indent』を入力。
無事字下げできました。
しかし、これだと毎回高度な設定にクラスを入力しないといけないのが、ちょっと面倒。
ということで、結局Pタグにインデントを書き足しました。
p {
text-indent: 1em;
padding: 0 0 0 1em; //上0 右0 下0 左1em の余白
}段落のスタイル
Pタグにインデントを入れると、スタイル適用したときにも、字下げされてしまうんですよね。
許容範囲ではあるけれど、何かいい解決方法はないものか。
スタイルを変更することで、いろいろな装飾ができるのは面白い。
段落ごとに装飾できるので、こんなこともできる。
これは面白い。使い方を考えてみよう。
ボーダーもある。
2種類の改行
ブロックエディタの改行は2種類ある。
まずは『Shift + Enter』を押すとできる改行。
内容がひとつのテーマで変わらないけれど、改行したいときに使う。
この改行だと、字下げが起きない。
そして『Enter』を押すとできる改行。
内容のテーマかわる場合につかう。
こちらは本当は段落といって、ブロックも変わる。
ブロックは本来、ひとつのテーマをまとめた段落として使うもの。
朝の通学の話から、学校内の話にかわるときなどはこっちかな？
改行の場合、下に余白はつかないが、段落が変わった場合余白がつく。
どこまできちっと使う必要があるかは考え方次第でいいと思う。
横書きだと改行の場合ちょっと読みづらい気もする。
改行と段落
改行と段落の違いについては、もっと詳しい人が書いた記事があるので、興味があれば参考にしてほしい。
この多様性の時代、統一されずきちっとした書き方のWEBサイトも合った方がいいと僕は思う。
空のブロック
空のブロックを入れても、とくに余白にはならないみたい。右のメニューからブロック下余白から余白を入れて対応する。
上の行との間には何のブロックはないが、ちゃんと余白ができている。
スペーサー（見えない、ピクセル単位でスペースを配置できる）
ヘアライン（デフォルト、幅広、ドット）
スペーサーもヘアラインも用途が近いと思うのでまとめておく。
配置
ブロック内でテキストの配置を変えられる。
メニューの三本線から変更できる。
左よせ
中央
右寄せ
文の移動
赤枠で囲ったところをドラッグすることでブロックの移動もできる。
右にある上下の矢印でも移動できる。
文の並びを変えたいときに便利……かな？ 以前はキーボードで必要業を切り取って、貼り付けできたので、マウス必須なのはちょっと不便かも。
雑感
とりあえず、ざっくりブロックエディタを触ってみて思うのは、マウスを使うことが増える気がする。
今までほぼキーボードだけでできた作業ができない。もしくはわからない。
調べてみたら、ショートカットを表示するショートカットがあった。
Shift+Alt+H
見出しもShift+Alt+数字で変更できた。
とりあえず、これで使えそうかな？