>>12
すぐに気付いていただけてよかったです……！
直リンク、他人事じゃないのもあって勝手にハラハラしてました……(´ω`)

>画像が白いまま
もしかすると画像のキャッシュが残っていて、古い画像（問題の透過が白塗りになった画像）が表示されていたかも……。
▼参考
【修正した画像が変わらない…】ブラウザ別！キャッシュを削除する方法！ - MakeShopサポート


アップロードしたあと、キャッシュクリアしてからサイト確認してみたら、変わる……かも……？

スマホからのアップロードのほうは謎ですね……。
試しにXPERIAから、ブラウザでアップロード（アップロード成功）→同じところにメールで【画像○に上書き】→【更新】を押下……とやってみたんですが、上書きアップロード成功していますね……（ちなみにブラウザはAndroid用のFirefoxです）。

機種もそうなんですが、ブラウザによっても仕様が異なったりして、意図せぬ事象が起きたりすることって……あるんですよね…………。
参考になるか分かりませんが、私はALICE+サイトの編集にはFirefoxを使用しております。

あんまりお力になれなくて無念です……！
キャッシュクリアで解決すると良いのですが……。


（あと実は「こいつ掲示板いすぎじゃ……？」と思われてるのではと震えているので、安心（？）していただけて嬉しいです……！！）

>>11

やっぱり！！！やはり！！そうですよね！！！？！？？！
私も保存してしばらくしてから「あれ？あれってもしかして直リンクってやつになるのでは……？？？？」と考えていましたので……。
すぐに削除いたしました！！ありがとうございます……！

画像リサイズツール、パソコンで使ってみました！
横800×縦576の縦横比固定でリサイズし、透過したままPNGで保存しました。
無事にパソコンでファイルのアップロードが出来たのですが、確認してみると背景が白いままでした。。
Androidではファイル、メールでのアップロードどちらも試したのですがどちらも変わらず。。
メールでのアップロード→ファイルのアップロードと試したのですが、ファイルのアップロードをしたら登録していた画像が消え、画像は登録されていません。と表示されました……謎のバグか何かですかね。。


ブラウザを反復横跳び……！お疲れ様です、、！！
なんとなくそうかな……？と思っていた程度だったのでホッとしたといいますか、謎の安心感に包まれました(笑)
ご忠告ありがとうございました、、！

>>10　(https://テンプレートサイトさんのURL/画像.png)になっていたので、##IMAGE_DATA_〇_URL##の部分にその画像アドレスを差し替えて保存した

おあああああああの残念なのですがそれだと配布サイトさんのほうに迷惑がかかる恐れ大なので、
#至急その画像パス(https://テンプレートサイトさんのURL/画像.png)は一旦消してください！！！

それは「画像の直リンク」にあたり、配布サイトさんの使うサーバーに負荷をかける行為です。
そのため、大抵の場合は素材配布系のサイトだと「直リンク禁止」とあります。

（「直リンクとは　素材　サイト」などのワードで検索すると詳細が出てきます）

おそらく管理人さんはURLを書き換えるのを忘れただけなのではないかと思うんです……（自分がよくやるってだけですが……）。

とにかく、サーバー側が直リンクを禁止事項にしている場合もあり得ますし、至急直リンク状態は解消してください。

もしかしたら配布サイトさんが直リンクをOKとしている場合も……有り得ないとは言い切れないんですが（※サーバーが直リンクを許可している場合のみ）、OKとサイトに明記していない限りは、直リンクはすべきではないです。



#画像が大きすぎてアップロードできない
うーん、ふつうの写真編集アプリでも、縦横比を変えないままサイズ（縦幅・横幅）を変更できるものはあると思うのですが……。そういう編集アプリはありませんでしょうか？

圧縮、ではなくて縦横比を保ったままリサイズ（縮小）はできないですか？
（圧縮だと、おそらく保存形式が変わってしまって透過部分が白塗りになるんだと思います）

画像がどんだけ重いのか分からないんですが、横幅800px以下くらいにしてみてください。
まだ重ければさらに小さく……。
px指定が無理なら50%くらいにリサイズしてみてください。それだけ重いならたぶんそのくらい縮小してもいけるかと。

▼「画像　縮小　透過部分　維持」で出てきたサイト
画像リサイズツール

または、縮小サイトがあるみたいです。使ったことないんですが、これとかで縮小できませんか……？




話はズレるんですが……えっっっテンプレご利用ありがとうございます！！！！！！！！
これまでのレス、名前は……入っていると思ったら入っていなかったです(笑)ブラウザを反復横飛びしすぎました……(´･ヮ･`)
まさか文章で気付いていただけるとは……！！
感謝と喜びをひたすらに綴りたくて綴りたくてしょうがないのですが、至急のご連絡なので乱文にて失礼します！！！誤字等は温かくスルーをお願いいたします！

>>9

パソコンもAndroidも持っていたのでどちらでもファイルのアップロード、メールでのアップロードを試みましたがファイルサイズが大きいとのことで。。。
iPhoneの方では圧縮できたのでメールでのアップロードをやってみたのですが、やはり変わりはなく……。
メールでのアップロードでも白塗りになるっぽいです。。

テンプレートサイトさんの方を再度見てみると、PC用にとzipファイルをおいてくださっていたので、それをダウンロードしました。
その中身を開くと、HEADの##IMAGE_DATA_〇_URL##に当たる部分が画像そのもののアドレス(？)(https://テンプレートサイトさんのURL/画像.png)になっていたので、これは……！！？と思い、##IMAGE_DATA_〇_URL##の部分にその画像アドレスを差し替えて保存したところ、見事にテンプレート通りになりました……！！
iPhoneからもテンプレート通りに見えたので多分無事に解決いたしました！！
この画像アドレスをそのままはめ込む形を初めてしたので、何かの違反になっているのでは、、と一抹の不安はありますが……(笑)
長々とお付き合いさせてしまって申し訳ないと共に感謝の気持ちでいっぱいです、本当にありがとうございます( ᵕ̩̩ㅅᵕ̩̩ )


めっちゃくちゃ話はズレるんですが、やはりしちさんが回答して下さっていたんですね、、！
掲示板でよく見かけてはなるほど〜！となっておりました。
自サイトではしちさんのテンプレートも更新履歴といいねボタンをお借りしてまして、とても重宝しております、、！ありがとうございます(*´ω`*)

重ね重ね、本当にありがとうございました、、！
また何かありましたらご相談させてください〜〜！！

>>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 ファイルを入れても透過しない問題 解決策 -

自分はAndroid民なので分からないんですが、これなのでは？と思いました。
↑要約すると「透過png画像をiPhoneに保存したら、透過部分が白塗りになって、透過しなくなる」です。

参考元に解決策が書いてありますが、実行できそうなのはありますか？
または「iPhone　画像　透過できない」とかで検索してみると何か見つかるかも……？です。


>🅱️画像をALICE+にアップロードする段階で透過部分が白塗りに変換されてしまった…の理由（※憶測）
アップロードしたのはiPhoneからですか？
過去、こういうこともありました。↓
▼画像がアップロードできない - ALICE+サポート

今は無き旧掲示板では、iPadからもアップロードできないとの報告例を見かけたことがあります。

これ上スレに書き込んでる>>2が自分なので検証結果を覚えてるんですが、要約すると「iPadから（おそらくiPhoneからも）ALICE+のアップローダーに画像をアップすると、勝手に画像の保存形式が『jpeg』になることがある」……というやつでした。

ただし上スレは、『jpeg（※対応してない形式）』になるから画像がアップロードできない、というケースです。
ので、今回の問題とは違うかな……とは思ったのですが。

念のため、上スレ>>2で紹介している、「メールで画像をアップロード」を試してみるのも手かな、と。

🔻メールで画像をアップロードするには
>�@［　画像○に登録　］または［　画像○に上書き　］（※○のところは数字）というのがアップローダーにあるので、そこをタップ。
>するとメールアプリが開くので、アップロードしたい画像を添付して送信。

>�Aメールを送信したら、アップローダーの［　更新　］を押す。

・
・
・
長くなりましたが纏めると、
🔵画像の透過部分が、白塗りに変換されているかも
*　➡️透過部分から見えるはずの背景色は、白塗りにされてるせいで見えなくなっているだけかも
🔵透過部分が白塗りになる原因は、
*　�@iPhoneに保存する段階か、
*　�AiPhoneからアップロードする段階
　……にあるかも
🔵�Aなら、メールで画像をアップロードすると別の結果になる可能性が無きにしもあらず？
🔵正直、iPhone以外（パソコンとか）から、画像のダウンロードからアップロードまでを行ったほうが確実で早い気がする……

です。
ちなみに�Aの問題は、iPhone側の問題かALICE+側の問題か、原因が全然分からないです。ので解決法も謎という…………。

>>7
ありがとうございます！

書き換えて保存してみましたが、残念ながら変わらずでした。。。
メイン画像URLを打ち込むと色が白くなってしまうので、やはり不具合ですかね……。
テンプレートの配布元サイトさんにもご相談しようか悩んだのですが、不具合ならばしてもしょうがないですよね。。

>>6
確証は取れなかったんですが……試しに１行だけ、>>1のCSSを書き換えてみてください。

『/* 段落、余白 */』と書いてあるところより少し下にある記述、
> .box::after {
> content: '';
> display: block;
> position: absolute;
> bottom: 0;
> left: 0;
> width: 100%;
> height: 20px;
>♦️ background: url('メイン画像URL') center / cover var(--lightColor);
> }

ここの最後の部分、
> background: url('メイン画像URL') center / cover var(--lightColor);
を、以下のように書き換えてみてください。
━━━━━━━━━━

background: var(--lightColor) url('メイン画像URL') center / cover;

━━━━━━━━━━

背景色を指定する「var(--lightColor)」を、一番初めのところに移動させただけです。
背景色が消える原因は、背景色の指定をスラッシュの後に書いてるせいかな……と思ったのですが。

試しにテストしてみたら、自分の端末（Android＆iPad）からなら、元の>>1-2CSSでも背景色は消えなかったんですよね……。もしかしたらiPhoneでしか観測できない不具合かも……。
（端末によって表示に差が出たりするのは滅茶苦茶よくあります）

解決するか分からないんですが、ちょっと試してみていただければ……。

>>5
分かりやすいご説明ありがとうございます、、！！
こちらはトップページで使用しています。
今気付いたのですが、このCSSをトップページHEAD間ではなく共通HEAD間編集で保存していました。なにか違いがありますかね……？

HTMLを下に記載しておきます。
フッターの欄にテンプレートサイトさんのURLとお名前がありましたので一応伏せさせて頂きますね。


​───────​───────

<div class="pageWrap">

<!-- モバイル用メニュートリガー -->
<div id="navTrigger" class="navTrigger mobile"></div>

<!-- ナビゲーション -->
<div id="mainNavWrap" class="mainNavWrap">
<nav id="mainNav" class="mainNav">
<div class="navInfo">
<h1>サイト名</h1>
<div class="url">https://yoursiteurl.jp/</div>
</div>

<ul>
<li><a href="#link_info">information</a></li>
<li><a href="#link_contents">contents</a></li>
<li><a href="#link_mail">mailform</a></li>
</ul>
</nav>
</div>
<!-- /ナビゲーション -->


<!-- ヘッダー -->
<header id="mainHeader" class="mainHeader">
<div class="headerBox">
<div class="siteTitle">yoursite<br>name</div>
<div class="siteInfo">unofficial <span>xxx</span> site.</div>
</div>
</header>
<!-- /ヘッダー -->


<!-- メイン部分 -->
<div class="contentsWrap">

<section id="link_info" class="box">
<h2>information</h2>
<p>ここは何々を取り扱う何々サイトです。</p>
</section>

<section class="box">
<h2>sample(h2)</h2>
<h3><span>heading3</span></h3>
<h3><span>見出し３</span></h3>
<h4>heading4</h4>
<p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p>
</section>

<!-- 小説部分 -->
<section id="link_contents" class="box novel">
<h2>main contents</h2>
<p>最新→下線付き</p>

<h3><span>name change</span></h3>
<!-- 名前変換フォーム（ダミー） -->
<form class="nameChange space">
<input type="text" placeholder="名字" class="enter"><input type="text" placeholder="名前" class="enter"><input type="submit" value="input" class="button">
</form>
<!-- /名前変換フォーム（ダミー） -->


<h3><span>long1</span></h3>

<!-- 長編リスト（画像なし） -->
<ul class="longList space">
<li><a href="">タイトル</a>
<div class="longInfo">あらすじあらすじ全何話</div>
</li>
<li><a href="">タイトル</a>
<div class="longInfo">あらすじあらすじ</div>
</li>
<li><a href="">タイトル</a>
<div class="longInfo">あらすじあらすじ</div>
</li>
</ul>
<!-- /長編リスト（画像なし） -->


<h3><span>long2</span></h3>

<!-- 長編リスト（画像あり） -->
<ul class="longList2 space">
<li>
<a href="">
<div class="longImage"><img src="画像URL" alt="image"></div>
タイトル
<div class="longInfo">あらすじあらすじ全何話</div>
</a>
</li>

<li>
<a href="">
<div class="longImage long_2 light"><img src="画像URL" alt="image"></div>
タイトル
<div class="longInfo">色が薄い画像のときはclass="light"で枠線の色が変わります。</div>
</a>
</li>

<li class="new">
<a href="">
<div class="longImage"><img src="画像URL" alt="image"></div>
タイトル
<div class="longInfo">あらすじあらすじ</div>
</a>
</li>
</ul>
<!-- /長編リスト（画像あり） -->


<h3><span>short</span></h3>

<!-- 短編リスト -->
<ul class="shortList space">
<li><a href="">リンクサンプル</a><span>既読</span></li>
<li><a href="URL">リンクサンプル</a><span>未読</span></li>
<li class="new"><a href="">タイトル</a><span>注意</span></li>
<li><span class="left">注意（左）</span><a href="">タイトル</a></li>
<li><a href="">タイトル</a></li>
</ul>
<!-- /短編リスト -->
</section>



<section id="link_mail" class="box">
<h2>mainform</h2>
<p>なにかありましたらどうぞ！</p>

<!-- メールフォーム（ダミー） -->
<form class="mailForm space">
<input type="text" placeholder="お名前" class="enter"><br>
<textarea cols="30" rows="3" placeholder="メッセージを入力してください。" class="enter"></textarea><br>
<input type="submit" value="送信" class="button"><input type="reset" value="消去" class="button">
</form>
<!-- /メールフォーム（ダミー） -->

</section>
</div>
<!-- /contentsWrap -->


<!-- フッター（削除OK※デフォルト非表示） -->
<footer class="mainFooter">
designed by <a href="https://○○○○.jp" rel="noopener">○○</a>
</footer>

</div>
<!-- /pageWrap -->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){

//ハンバーガーメニュー
var wrap = $('#mainNavWrap');

$('#navTrigger').on('click', function(){
wrap.toggleClass('view');
})

wrap.on('click', function(){
$(this).removeClass('view');
})


//ページ内スクロール
$('a[href^="#"]').on('click', function(){
var target = $($(this).attr('href'));
var point = target.offset().top - 40;

$('html, body').animate({scrollTop : point}, 900)
wrap.removeClass('view')

return(false)
})
})
</script>

>>4
HTMLとは、……の前にもう一つお尋ねしたいのですが、
そのデザインをどこに使用しているのでしょうか？
*「トップページ」、「子ページ」、「小説機能」……など。



>>4 HTMLとは？
HTMLというのは、【○○デザイン編集】とか【○○レイアウト編集】とか【○○画面編集】とかに書き込む内容です。例えば、

>>トップページでしたら、
【トップデザイン編集】

>>子ページでしたら、
【デザイン編集】

>>小説機能でしたら、
【表紙画面編集】【目次画面編集】【文章画面編集】など

……のことです。

ちなみに>>1-2で書き込まれているのは、『CSS（スタイルシート）』と言って、
『見た目の（スタイル）・命令書（シート）』、みたいな意味です。

１，HTMLに文字を書いたり目印（タグ）を付けたりし、
２，CSS（スタイルシート）で装飾やレイアウトの指示を決め、
３，ブラウザは目印を頼りにCSSの指示を反映（見出しは太字にする、背景は黒色にするetc...）。
　→いろんな見た目のサイトができあがる、という仕組みです。

なのでデザインやレイアウトが意図通りいかないときは、HTML・CSS両方を確認したほうが問題は見つけやすい（場合が多い）のです。

今回はCSSがボリューミーだったので、「HTMLを見たほうが、CSSのどの辺が問題箇所と関わりある記述なのか見つけやすそうかな？」という意図でお尋ねしました〜〜

>>3

全く知識が無いもので、どこを見たらHTMLが見れるのかが分からないです、すみません……