凍結
0 むぎ Chrome
下書きの時点では反映されているのですが、本番環境にコピーしてサイトを確認すると疑似要素に指定した一枚の画像のみが反映されませんでした。


いろいろ試してみたところ、
他の場所(backgroundとか)ならば同じ画像URL(独自コード)でも反映した→画像URL(独自コード)自体に問題があるわけではない(?)
backgroundプロパティの値を画像からカラーコードに変更してみたところ、カラーコードは反映した→backgroundプロパティの運用に問題はなさそう(?)
そもそも下書きでは反映されているのになぜ本番環境で反映されないのか?

と、迷宮入りしてしまいました;;


原因がわからないので教えていただきたいです。

必要かどうかはわかりませんが、念のため該当コードを貼っておきます…。
.section::after{
content:"";
display: block;
position: absolute;
bottom: 0;
left: 0;
height:20px;
width:100%;
border-radius:0 0 15px 15px;
background:url("##IMAGE_DATA_3_URL##");
}


よろしくお願い致します。
07/26 23:14
返信
コメント投稿 検索
2 むぎ Chrome
>>1


独自タグをURLに書き換えたら反映されました。

とても助かりました。丁寧な解説でわかりやすく教えていただきありがとうございます!
07/28 00:07
返信
1 しち SOG03
>>0
【トップページ下書き編集】で作成、本番環境へコピーしたら……ということでしょうか?

でしたら>>0のCSSコードのうち、独自タグ部分をURLに書き換えてみてください。

━━━━━━━━━━

background:url("##IMAGE_DATA_3_URL##");

 ⬇️

background:url("/data/サイトID/img/サイトID_upld_3.拡張子");

━━━━━━━━━━

>🔷《サイトID》
貴サイトのURLに入っているのがサイトIDです。
(例:https://alicex.jp/サイトID/)
アカウントIDとは異なるのでご注意ください。

>🔷《拡張子》
ざっくり言うと、画像の種類のことです。
png
jpg
gif
のどれかのはずなので、拡張子が分からなければ総当たりで入れていってください。
なお拡張子の前の『 . (ピリオド)』をうっかり消さないようご注意ください。


*🟢補足:アップロード画像のURLを知る方法

🅰️子ページの【デザイン編集】にでも『画像URL表示』の独自タグを放り込んでプレビューする。
> https://alicex.jp/data/サイトID/img/サイトID_upld_番号.拡張子
という感じに表示されます。

なるべく短いパスで使いたければ上述のように『/data/』以下をコピペすればOKです。
もちろん『https://』からコピペしてもOKです。

🅱️『画像表示』or『画像URL表示』の独自タグで、画像URLの《番号》を確認する。
『画像表示(##IMAGE_DATA_★##)』『画像URL表示(##IMAGE_DATA_★_URL##)』
↑の★部分の数字が、画像URLに入る《番号》です。

画像URLは必ず、
> https://alicex.jp/data/サイトID/img/サイトID_upld_番号.拡張子
という形式になります。
このうち《番号》は独自タグの数字を見ると分かります。
《拡張子》はアップロードした画像の拡張子が入ります。
なお拡張子は『png』『jpg』『gif』のどれかのはずです(それしかアップロードできない仕様なので)。





🔻上記をやって画像が表示できた
何故画像が表示されなかったかというと、
『CSSファイルには独自タグが使えない』という仕様のせいです。

しかしややこしいことに、【トップページ下書き編集】の〔▼CSS編集〕枠内では独自タグが使えてしまうんです。

よって
●下書きでは独自タグが正しく画像URLになる
 →画像が表示される
●しかし本番環境にコピー(=CSSファイルにコードをコピー)すると、CSSファイルでは独自タグが変換されない
 =##IMAGE_...##のタグのままで、画像URLに変換されない
 →URLが入ってないので、画像が表示できない

……とこういうわけで、『下書きのプレビュー』と『本番環境』で表示に差異が生まれてしまうんです。
たぶんこれが原因じゃないかなあと思われます。


🔻独自タグをURLに書き換えてもダメだったら
現在『何の機能の』『どこに』『何を』書いているのか、を再度お教えください。
(例:トップページの【CSSファイル編集】にbody{…;}と書いている、など)

独自タグの使えない場所があったりするので、『どこに何を書いているのか』が明確だと問題箇所の発見が早いかもしれません。
07/27 19:18
返信