WordPressテーマSANGOの質問

ブロックのカスタムCSSにCSSを記述するやり方について

アバター
としま

お世話になります。これまでBOXや見出しなどの装飾はネットなどで検索し、自分なりに試行錯誤しながらCSSに追加カスタマイズしてきました。
先日SANGOオンライン勉強会#3をユーチューブのほうで観させて頂いた中に、今後のカスタマイズ方法は子テーマのCSSや追加CSSに記述するのではなく、ブロック自体にCSSを記述したほうが良いという事でしたが、子テーマに記述したCSSをどのようにブロックのカスタムCSSに記述していけば良いのか?
初心者なものでなかなか飲み込めないというか、理解に苦しみます。ただCSS自体はすでにカスタマイズしたものを使えているので、何処に記述すれば良いのかなど、もしお時間があれば教えていただけないでしょうか。よろしくお願い致します。

SANGO 3.0をリリースしました
コメントへの回答
サルワカくん
サルワカくん
2022/07/30

お世話になっております。
少し大変な作業になるのですが以下のような流れになります。
あくまで推奨のカスタマイズなので、必須というわけではありません。

1. 今まで子テーマのCSSに書いていた内容を各ブロックのカスタムCSSに保存し、プリセット登録する
https://saruwakakun.com/sango/sango-gutenberg-preset

2. 新しく記事などを書く際は、プリセットの中からお気に入りのデザインを呼び出す。

3. 今までの記事を全てプリセットを使ったブロックに置き換える

4. 子テーマに記述したCSSを段階的に削除

よろしくお願いします。

アバター
としま
2022/07/30

まずオリジナルのBOXを作って子テーマに書いていた内容が以下になります。

.mybox6 p{margin:0 0 5px;}
.mybox6{margin:2em 0; padding:0 15px 10px; background:#eafaf7; box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);}
.mybox6 .box-title{margin:0 -15px 15px; padding:8px 4px; background:#2fcdb4; color:#fff; font-size:1.2em; text-align:center; line-height:1.5;}

サルワカさんの言う通り、上のCSSを新規投稿画面からサイドバーにあるカスタムCSS(編集画面・フロント) に貼ったのですが保存などはできず、何か違ってる気がします…

カスタムCSS(編集画面・フロント) ではなく、カスタムHTMLのブロックへ貼ってそれをプリセットとして保存ならできるのですが…

すいませんが宜しくお願いします。

サルワカくん
サルワカくん
2022/07/30

保存ができないとなるとConoHaさんをお使いならWAFの制限に引っかかってる気がします。
もしConoHaさんをお使いならこの記事を見てみてください。
https://support.conoha.jp/w/waf/

アバター
としま
2022/07/30

サーバーはWPXを使ってます。

もしよければCSSを貼って保存しているところの画面キャプチャなどをみせていただけると幸いです、宜しくお願いします。

サルワカくん
サルワカくん
2022/07/30

お世話になっております。
ちなみに保存できないというのはどういう現象なのでしょうか?
カスタムCSSを設定後にプリセット登録ができないということでしょうか?
よろしくお願いします。

アバター
としま
2022/07/30

初めから説明すると
新規投稿画面 → +をクリックして段落を表示 → サイドバーのカスタムCSSにこちらのコメントに書いたCSSを貼り付け → カスタムプリセットを開く → 今の設定をプリセットとして保存

プリセットとして保存は可能なのですが、CSSでかいたBOXはどこにもでてこない状況です。

そもそもやり方が違っているのでしょうか?長々と質問ばかりですみません。

段落を表示が間違っているのでしょうか?以前ならカスタムCSSに貼るだけでBOXができあがってましたが…本当に申し訳ありません。お手数おかけしております。

サルワカくん
サルワカくん
2022/07/30

もしかするとカスタムCSSへの認識が少し違っている可能性がありそうです。
カスタムCSSはそのブロックにだけ限定的にCSSを適用する機能なので、編集しているブロックにまつわるCSSだけしか反映しません。
もし作成するのが難しいのであれば、一度SANGO Landに要望いただければこちらで作るのでそのブロックをプリセットとして保存していただく方が早いかもしれません。
よろしくお願いします。

アバター
としま
2022/07/30

なんとなく理解できてきました。

子テーマに記述して使っていたCSS(オリジナルのBOXデザイン)。そしてそれを呼び出す為に今まで記述していたショートコードをカスタムHTMLというブロックにコピペ

子テーマのCSSはこのカスタムHTMLというブロックにだけ適用するということですね。

お手数おかけしました。有難うございました。

サルワカくん
サルワカくん
2022/07/30

すみません、補足ですが、カスタムHTMLを使うよりも、全くオリジナルのブロックでしたら、カスタマイズブロックを使った方が良いかもしれません。
https://saruwakakun.com/sango/sango-block-custom

よろしくお願いします。