ブロックエディターで「html、css」ソースコード記述

WordPress コア機能であるブロックエディター、サイトエディターは、従来のクラッシックエディターのように記事のレイアウト、画像添付や全体的なレイアウト修正等といった面倒が無い。方法は簡単で、ページのレイアウトを決めて配置する文書や画像の補助機能でもOK、だけど、もう少し文書を強調したいとか、画像に動きを追加したいときはブロック内の「HTML（クラッシックエディター）に変換」してから「html、css」などのソースコードを記述して作成することになる。

　

１．文書を書いて強調したい文字や文字列に強調、色付け、点滅させるために「html、css」などのソースコードをHTMLに変換して記述。
２．画像の切り抜き、形状、CSSアニメーション等々を「html、css」などのソースコードをHTMLに変換して記述。

【CSSの例】
a. 強調した文字列に影
  <o>～文字列～</o>
   o{text-shadow: 1px 2px 3px #808080;}
b. 画像の気に抜き＊長方形
  <div class="clip-o"><img 画像></div>
   clip-o {clip-path : polygon(0px 0px ,0px 130px ,200px 130px ,200px 0px);}
c. 文字の点滅
  <span class="blinkmoji">～文字～</span>
   blinkmoji {animation: blinkAnime 1s infinite alternate;}
  @keyframes blinkmojiAnime{
     0% { color: #000000 }
   100% { color: #66ff66 }}
d. タイトルや文字列を囲んで浮き上がる隙間に影("clip-path-shadow")
　<div class="clip-path-shadow">～タイトル～</div>
   clip-path-shadow {
   filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));}
＊文字や文字列に色を加えるには<span style="color: #------;">～文字～</span>の（#------）に赤色であれば#FF0000を入れればOK、当サイトでは基本的に「赤、青、緑」を文書内で使用してる。

ブロックエディターのブロック内で臨機応変にHTMLに変換してソースコードを書き込むことが出来ので、文字や画像を好きに表現できるのが楽しみだね。