ほぼほぼ完成です。

ブロック実用例

ブロックエディターをもう少し詳しく紹介します。

ブロック・ビジュアル

※背景画像を設定しているので編集ページに反映されていますが、無視してください。

ページの編集画面

エディターの切り替えは右上のツールでしたね。ビジュアルモードを選択中です。
黄色枠が最初のブロックです。

 

文字色を選択

最初のブロックに文字を入力して「色設定>文字色」で文字色を変えてみました。

 

背景色を選択

次のブロックは「色設定>背景色」で背景色を変えてみました。
更新(または、公開・下書きで保存)してプレビューしてみます。

 

プレビュー例

下のように表示されます。

 

ブロック・コード

エディター切替

コードエディターに切り替えてみます。
水色マーカーの本文エリアが変化しましたね。

 

コードをコピペ

先ほどの本文エリアのコード全文をPCのエディター(メモ帳やCotEditor等)にコピペしてマーカーで色分けしてみました。
黄色マーカーは説明文(注釈)です。<!– 〜〜〜 –>の〜〜〜部分は表示されません。
なので<!– wp:●●● –><!– /wp:●●● –> でくくっているが1つのブロックですね。
<p>から</p>が段落です。
緑マーカー部分が文字色や背景色のお約束事のタグという感じです。

 

コード加工

PCエディターで新規ファイルを開いて、コード原文の2行目をコピペしたのが下の1行目です。
pspan に変えたものが3行目です。
5行目は、<span class="●●●●●●"></span> の位置を変えました。

<p>から</p>が段落でしたね。
<p>段落ですが、その行の文字色を指定します。</p>
<span>から</span>は、<span>文字列</span> だけを指定できます。

 

背景色の加工

コード原文の背景色の行をコピペしたのが下の1行目です。
pspan に変えて<span class="●●●●●●"></span> の位置を変えたものが3行目です。
5行目ピンクアンダーラインが背景色で、緑アンダーラインが文字色です。複合して使用出来ます。
7・8・9行目は、<p></p>の段落に3行入れています。方法は、行末に<br> という改行タグを入れるだけです。
表示例画像を見やすくするために <hr> という仕切り線のタグも入れています。 <br><hr> は単独のタグなので、閉じるタグ </タグ> は不要です。

 

背景色の加工プレビュー

プレビューがこちらです。

 

カスタムカラーピッカー

背景色・文字色ともにパレットから好きな色を選択出来ます。
赤枠のレインボーカラーをクリックすると、赤破線のパレット表示になるのでパレットから選択してもいいですし、カラーコードが分かっている場合は、赤下線に6桁のコードを入力してもOKです。


いつの間にか、いくつかのタグが使えるようになっちゃいましたね^^v