@yamadanoa さん
こんにちは。
Twenty Twenty Two のテーマフォルダの中にあるsytyle.cssを編集されたのだと思いますが、通常は更新が即時反映されます。
また、フロントエンド・ブロックエディター双方で読み込まれるため、CSSの書き方にはコツが必要です。
よろしければ、どのようなCSSを書かれた方を記載いただけないでしょうか。
@wildworks 様
ご回答ありがとうございます。遅くなって申し訳ありません。
当時の状況はご推察の通りです。
文字色を変える練習をしてたサイトは、更新の加減か開けなくなってしまい、削除してしまいましたので、同じような試みをしていた別のサイトのCSSをご覧いただけますでしょうか。
CSSの中身は以下のようになっています。
/*
Theme Name: twentytwentytwoChild
Theme URI: http://kagotsumablog.local
Author: kago.tuma
Author URI: http://kagotsumablog.local
Template: twentytwentytwo
Version: 1.0
License: GNU General Public License v2 or later
*/
h1{
background-image: url("file:///C:/Users/user/Local%20Sites/kagotsumablog/app/public/wp-content/uploads/2022/01/K_PC_top_image.png")
}
＊H1のサイトタイトルの背景に画像を設置しようとしていました。
最近知ったのですが、イメージ画像のURLは、実際に画像ファイルが格納されているファイルのパスではなく、
<?php echo get_template_directory_uri(); ?>/assets/・・・
のように、PHPコードと一緒に書かなければならないようですね。今回うまくいかなかった原因はそれでしょうか？それにしても、ブロックエディターにはなぜ反映されていたのか不思議です。
実は、こちらのサイトも変な操作をしてしまったのか開かなくなってしまい、対応を教えていただいても試すことはできなくなってしまいました。
ただ、何かわかることがあるのでしたら、今後のために教えていただけると大変うれしいです。
@yamadanoa さん
こんにちは。
最近知ったのですが、イメージ画像のURLは、実際に画像ファイルが格納されているファイルのパスではなく、
<?php echo get_template_directory_uri(); ?>/assets/・・・
のように、PHPコードと一緒に書かなければならないようですね。
→CSSでURLパスを記述する基本となりますが、file:～から始まるURLはローカルパス（自分のパソコンを起点としたパス）になるので、通常使いません。
またCSSファイルなので、PHPも書けません。
さらに、wp-content/uploads/2022/01/K_PC_top_image.pngと記述されている所を見ると、メディア機能でアップロードした画像を指定したいのだと思いますが、メディアからアップロードした画像は削除出来てしまうので、そのパスが存在する事は担保されません。
一般的には、テーマフォルダに画像アセットを同梱して、CSSファイルを起点とした相対パスで指定します。
例えば、子テーマ直下のimagesフォルダの中にK_PC_top_image.pngを配置したのであれば、書き方は以下のようになると思います。
h1{
background-image: url("./images/K_PC_top_image.png")
}
まずは、絶対パス・相対パスの考え方の基本を調べる事をお勧めします。
@wildworks 様
＞一般的には、テーマフォルダに画像アセットを同梱して、CSSファイルを起点とした相対パスで指定します。
そういう方法をとるのですね。
ファイルをどこに格納すべきなのかがよくわかっていなかったので、助かりました。
今回はファイルが壊れてしまって試すことができませんが、また新しいHPで練習してみます。
ありがとうございました。
