こんにちは
ブロックテーマではサイト全体に適用される 追加CSS欄の位置がテーマ編集内に移動しています。
そこに記入すれば適用されます。
https://catchthemes.com/fse-faq/how-to-add-custom-css-in-block-themes/
カスタマイズごとに管理しやすいようにしたいとき
WP-Code のようなコードカスタマイズのプラグインを使います。それぞれ命名するとカスタマイズごとに有効・無効を切り替えられます。
https://wordpress.org/plugins/insert-headers-and-footers/
genepine(@genepine) さん、レスありがとうございました。下記の様に設定すれば良いのですよね。
違いがわかるように240pxにしましたが、改善されませんでした。40pxでもダメでした。どこが悪いのでしょうか?
h4 を指定していないからです
開発者ツールを利用
https://developer.chrome.com/docs/devtools/css?hl=ja
その部分のClassを確認、CSS反映を検証後書き写す
h4{
font-size: xxx-large;
}
それとカスタマイズを初めて適用する際には 該当部分のコードのみ記入して ほかのCSSの影響を取り除くのがトラブルの発生を防ぐ方法です。 (WP-Codeを使うのはそのため)
genepine(@genepine) さん、レスありがとうございました。cheomeの開発ツールで調べたところ
赤枠の .has-huge-font-size { の所を修正すると反映されることがわかりました。そこで、VSCodeで調べ
該当するところ、フォントサイズを試しに100 としましたが、反映されませんでした。開発ツールでfont-size: var(–wp–preset–font-size–huge) !important; の行をコメントアウトして font-sizeを指定すると反映されます。と言う状況ですが、どこが悪いのでしょうか?
CSS は !important がついていると最優先されるルールになっています。
以下のように記述すればこっちを優先してもらえると思います。
h4.has-huge-font-size { font-size: 100px !important; }
こういう !important を !important で打ち消すってやり方はなるべくしない方がいいので、見出しブロックに 追加 CSS クラス を指定してそのクラスに対して CSS を記述するのがおすすめです。
Toshihiko Tsushima(@uonumajs) さん、レスありがとうございました。
外観→カスタマイズ→追加CSSの所に
@media (min-width: 760px) {
.wp-block-vk-blocks-slider h4 {
font-size: 80px!important;
}
}
@media (max-width: 759px) {
.wp-block-vk-blocks-slider h4 {
font-size: 20px!important;
}
}
と記述することで、とりあえずは出来ました。しかし、今後のために、そこではなくて
画面右下、追加CSSの所へ記述しろということですよね？
そこには、
is-style-vk-heading-plain vk_block-margin-0–margin-top vk_block-margin-xs–margin-bottom
と記述してあります。
ここにどのように書いたら良いか教えていただけませんか。
よろしくお願いします。
Toshihiko Tsushima(@uonumajs) さん、レスありがとうございました。
まず、外観→カスタマイズ→追加CSSの所に追加した記述はコメントアウトしました。
次に、該当部分のタイポグラフィのサイズはデフォルトに戻しました。
高度な設定の所の追加CSSには次の記述をしました。
h4.slider-h4 has-100-px-font-size is-style-vk-heading-plain vk_block-margin-0–margin-top vk_block-margin-xs–margin-bottom
これでは、ダメでした。どこの記述が悪いのでしょうか?教えていただけませんか。
よろしくお願いします。
以下のやり方を試してみてください。
- H4 のタイポグラフィのサイズをリセットする。
- 追加 CSS クラス の先頭に以下のように slider-h4 と入力し、続けて半角スペースを入力する。
is-style-vk-heading-plain vk_block-margin-0–…
↓
slider-h4 is-style-vk-heading-plain vk_block-margin-0–…
- 外観 → カスタマイズ → 追加 CSS に以下の CSS を記述する。
@media (min-width: 760px) {
h4.slider-h4 {
font-size: 80px;
}
}
@media (max-width: 759px) {
h4.slider-h4 {
font-size: 20px;
}
}
Toshihiko Tsushima(@uonumajs) さん、レスありがとうございました。
無事出来ました。なるほどそうやってやるのですね。
どうもありがとうございました。
