ALICE+サポート タグ・デザイン掲示板 TOPページ タグ・デザイン掲示板 テンプレート通りの形にならない タグ・デザイン掲示板 『テンプレート通りの形にならない』へのコメント投稿 記事 9 へのレス:>>8 お聞きし忘れてました! #画像が問題かもしれないです。 CSSもHTMLもぱっと見た限り綺麗に整っておりエラーっぽくはないため(単に私が見逃しているのでなければ)、画像のほうに問題があるのでは、と。 どういうことかというと、画像の保存形式によって「透過できる/できない」があるんです。 または、形式は透過できるものだけど、保存するとき透過部分が勝手に白塗り(=不透明)になってしまったりとか。 なので、画像自体が透過できてるか否かの確認をしてみてください。 透過が確認できる画像編集アプリ等があればそれでできます……が、無い場合は以下。 >🔶トップページか子ページの【デザイン編集】に以下を入れる ━━━━━━━━━━ <div style="padding:1em;background:#666;width:100%;height:200px"> <img src="##IMAGE_DATA_数字_URL##" style="max-height:100px;max-width:80%"> </div> ━━━━━━━━━━ ※検証のために一時入れるだけなので、適当に作った子ページでもどこでもいいです。 で、上の画像URLには、そのテンプレのメイン画像を入れてください。 そしたら編集を保存して、【ページ確認】でWeb上の表示を確認してみてください。 濃いグレーの背景の上に、「白地+模様の入った画像」が表示されていませんか? >>もしそうなら、その画像は「透過部分が白塗りに」なってしまった状態です。 透過部分がちゃんと透過されたままなら、グレー背景の上に模様だけが入るはずです。 白塗りの原因は…… 🅰️配布サイトさんから画像をダウンロードする段階で透過部分が白塗りに変換されてしまった 🅱️画像をALICE+にアップロードする段階で透過部分が白塗りに変換されてしまった のどちらかなんじゃないかと。 このデザイン、背景色と模様の入った画像を分けて設定しているんです。 「背景色(var(--lightColor))」の上に「透明な地+白や青でヒビ?繊維?のような模様」の画像を表示し、透明な地の部分から背景色が透け見える形です。 解決策なんですが……iPhone・iPad以外の端末で作業ってできますか? パソコンとか、Androidスマホとか、iPad以外のタブレットとか……。 「画像の透過部分が白塗りになる」問題は、おそらくたぶん、iPhone・iPadでだけ起きる…………っぽいのです。 これまでに画像周りの類似ケースをサポート掲示板類で見てきた、ってだけでこれも確証はないのですが……。 #なので、可能なら「配布サイトさんから画像をダウンロードする」のも「その画像をALICE+にアップロードする」のも、iPhone・iPad以外でやってみてください。(あればパソコンで) >🅰️配布サイトさんから画像をダウンロードする段階で透過部分が白塗りに変換されてしまった…の理由 iPhoneから投稿されてますが、問題のテンプレに使用している画像をダウンロードしたのも、iPhoneででしたか? ▼iPhone ( iOS ) に 透過 PNG ファイルを入れても透過しない問題 解決策 - https://reject.tokyo/png/ 自分はAndroid民なので分からないんですが、これなのでは?と思いました。 ↑要約すると「透過png画像をiPhoneに保存したら、透過部分が白塗りになって、透過しなくなる」です。 参考元に解決策が書いてありますが、実行できそうなのはありますか? または「iPhone 画像 透過できない」とかで検索してみると何か見つかるかも……?です。 >🅱️画像をALICE+にアップロードする段階で透過部分が白塗りに変換されてしまった…の理由(※憶測) アップロードしたのはiPhoneからですか? 過去、こういうこともありました。↓ ▼画像がアップロードできない - ALICE+サポート https://sprt.alicex.jp/support/153/ 今は無き旧掲示板では、iPadからもアップロードできないとの報告例を見かけたことがあります。 これ上スレに書き込んでる>>2が自分なので検証結果を覚えてるんですが、要約すると「iPadから(おそらくiPhoneからも)ALICE+のアップローダーに画像をアップすると、勝手に画像の保存形式が『jpeg』になることがある」……というやつでした。 ただし上スレは、『jpeg(※対応してない形式)』になるから画像がアップロードできない、というケースです。 ので、今回の問題とは違うかな……とは思ったのですが。 念のため、上スレ>>2で紹介している、「メールで画像をアップロード」を試してみるのも手かな、と。 🔻メールで画像をアップロードするには >@[ 画像○に登録 ]または[ 画像○に上書き ](※○のところは数字)というのがアップローダーにあるので、そこをタップ。 >するとメールアプリが開くので、アップロードしたい画像を添付して送信。 >Aメールを送信したら、アップローダーの[ 更新 ]を押す。 ・ ・ ・ 長くなりましたが纏めると、 🔵画像の透過部分が、白塗りに変換されているかも * ➡️透過部分から見えるはずの背景色は、白塗りにされてるせいで見えなくなっているだけかも 🔵透過部分が白塗りになる原因は、 * @iPhoneに保存する段階か、 * AiPhoneからアップロードする段階 ……にあるかも 🔵Aなら、メールで画像をアップロードすると別の結果になる可能性が無きにしもあらず? 🔵正直、iPhone以外(パソコンとか)から、画像のダウンロードからアップロードまでを行ったほうが確実で早い気がする…… です。 ちなみにAの問題は、iPhone側の問題かALICE+側の問題か、原因が全然分からないです。ので解決法も謎という…………。 ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>9 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート