【SANGO】記事作成をMarsEditからGutenbergに変更した人がするCSS設定方法

ども！こまお です。今回はMarsEditで記事作成していた人（WordPressテーマはSANGO）が、Gutenbergで記事作成する転換期で苦労したお話ですｗ

GutenbergのブロックエディターでCSS設定ができない！

SANGOというWordPressテーマをしてはや5年。MarsEditというソフトで、効率的？に記事作成の方法を確率していたつもりです。

ただWordPressの進化にともない、Gutenbergというブロックエディターを使わざるをえない状況になりました。

それでは始めていきましょ〜

結論：カスタムHTMLから通常通りにHTMLを組んで作成するしかない：あくまで今のところ

この上の見出しはカスタムHTMLというブロックを利用して作成したものです。きちんと見えています。

カスタムHTMLは普通に出てくるブロックの1つです。慣れていないため、こちらの作業の方が一苦労する印象。

参考にしたSANGO記事

参考にさせていただいたSANGO開発者さん（カスタマイズガイド）の記事はこちらです。

参考

ブロックエディターの装飾にオリジナルの装飾を増やすためのカスタム書式機能について

SANGOカスタマイズガイド

こちらの記事を参照してカスタム書式で設定してみたのですがうまくいきませんでした。動画もありもちろんチェック済みです。

この下のH2見出しはCSSが崩れています。実際にわたしがカスタム書式で保存したコードです。

記事作成をMarsEditからGutenbergに変更した人がするCSS設定方法

CSSの設定方法が難しすぎてツライ、、、

カスタム書式で設定したCSSコード

こちらがカスタム書式で新規作成したCSSです。元のMarsEditで記事作成した記事のCSSを少し変更してコピペしたもの。

.hh2 {
position: relative;
padding: 1em;
background: #3c3c3c;
color:#ffffff!important;
margin:30px -1.0em;
font-size: 1.4em;
line-height: 1.6;
}
.hh2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #3c3c3c;
width: 0;
height: 0;
}

自分のレベルだとこれで限界のようです。Chromeの開発者モードで見ていますが、どこのCSSを調整すればよいのかわかりません。