凍結
0 まる CPH1983
画像の上に、flexboxで配置を整えた文字リンクをのせたいですが、やり方が分かりません。backgroundで画像が反映されなかったので、HTMLのみで画像の上に文字リンクをのせなければいけなさそうなのですが、よく分からず…
どなたか詳しい方にお力添えをいただきたいです。よろしくお願いします。
12/19 18:14
返信
コメント投稿 検索
2 Anonymous CPH1983
>>1
キャッシュクリアしたらbackgroundでしっかり反映されました。
これからはこまめにキャッシュクリアしようと思います。
ご指摘いただきありがとうございました。
12/24 12:50
返信
1 しち SOV40
>>0
そういうことでしたら、当該箇所のHTMLと、CSSも書き込まれたほうがたぶん解決が早いかと……。

ちなみに、
* 画像は、画面の左右センターに配置
* &
* リンク類も左右センターに配置
というデザインを目指されている感じでしょうか?
画像のどのへんにリンク類を置きたいのかによって書き方が変わるので……。

画像の上にテキストリンクを〜というのはいくつかやり方がありますが、目指すデザインや画像の形(画像の寸法とか…画像を画面一杯に広げたいとかワンポイントで置きたいとか…)によりベストの書き方が変わってきますので、目指すデザインについては具体的に書き込まれると解決が早まるかもです!

とはいえやはり、こういうのはbackgroundに画像を指定するのが一番楽だと思われます。



>>0 backgroundに画像が反映されなかった

もしかしてなんですが、【CSSファイル編集】(または【CSS編集】)に独自タグで画像のURLを挿入なさろうとしたのではないでしょうか……?

【CSSファイル編集】および【CSS編集】(以降まとめて《CSSファイル》と書く)には、独自タグが一切使えません。
なのでスタイルシートで画像を指定するときは、
━━━━━━━━━━
(A)《CSSファイル》に、独自タグを使わずにURLを記入する
*A例)
 ●●{
 background: url(https://alicex.jp/data/サイトID/img/サイトID_upld_数字.拡張子);
 }

(B)backgroundだけでも〔head間編集〕に記入して、独自タグでURLを挿入する(※head間なら、独自タグが使えるので)
*B例)
 ●●{
 background: url(##IMAGE_DATA_数字_URL##);
 }
━━━━━━━━━━
……ということをせねばなりません。

(A)で記入するURLは、以下のように見つけられます。

>例)独自タグが『##IMAGE_DATA_数字_URL##』なら
URLは
* https://alicex.jp/data/サイトID/img/サイトID_upld_数字.拡張子
となります。

『拡張子』の部分は、アップローダーに上げた画像が
pngなら『png』、jpgなら『jpg』、gifなら『gif』が入ります。

※もし上記のことを試すために《CSSファイル》を弄ったら、キャッシュクリアしてから本番の当該ページにアクセスしてください。《CSSファイル》は、キャッシュに古いCSSファイルが残っているとそれを読み込んでしまい、せっかく書き直した《CSSファイル》を読み込んでくれない場合があります。



これでbackgroundに画像が指定できない感じでしたら、やはり冒頭述べたように、当該箇所のHTML・CSSや、目指すデザインについて具体的に書き込まれたほうが早いかと思います。
12/21 08:38
返信