ども！こまお です。今回はMarsEditで記事作成していた人（WordPressテーマはSANGO）が、Gutenbergで記事作成する転換期で苦労したお話ですｗ
GutenbergのブロックエディターでCSS設定ができない！
こまおこれは本当に泣きました！まったくわからん
SANGOというWordPressテーマをしてはや5年。MarsEditというソフトで、効率的？に記事作成の方法を確率していたつもりです。
ただWordPressの進化にともない、Gutenbergというブロックエディターを使わざるをえない状況になりました。
この記事でわかること
- 記事作成をMarsEditからGutenbergに変更した人がするCSS設定方法
それでは始めていきましょ〜
もくじ｜読みたい所へジャンプ
結論：カスタムHTMLから通常通りにHTMLを組んで作成するしかない：あくまで今のところ
この上の見出しはカスタムHTMLというブロックを利用して作成したものです。きちんと見えています。
カスタムHTMLは普通に出てくるブロックの1つです。慣れていないため、こちらの作業の方が一苦労する印象。
参考にしたSANGO記事
参考にさせていただいたSANGO開発者さん（カスタマイズガイド）の記事はこちらです。
こちらの記事を参照してカスタム書式で設定してみたのですがうまくいきませんでした。動画もありもちろんチェック済みです。
こまお見ながらやったのですがなぜかうまくいかず。。。
この下のH2見出しはCSSが崩れています。実際にわたしがカスタム書式で保存したコードです。
記事作成をMarsEditからGutenbergに変更した人がするCSS設定方法
CSSの設定方法が難しすぎてツライ、、、
こまおこれはむずかしいｗ、、、|
カスタム書式で設定したCSSコード
こちらがカスタム書式で新規作成したCSSです。元のMarsEditで記事作成した記事のCSSを少し変更してコピペしたもの。
カスタム書式で設定した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を調整すればよいのかわかりません。
こまおSANGO開発担当者様どうか助けてください！|
