トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
Topic starter
cocoonから乗り換えたばかりのものです。
cocoonでは以下のcssを追加して
スマホだけ画像を全幅させるということができていました。
しかし、SWELLに乗り換え
SWLLに同じcssを追加しても
スマホの場合画像の全幅ができませんでした。
（PCとスマホ両方で全幅しているという意味ではありません。）
どのように対処したらよいか
SWELLの先輩方にアドバイスいただきたいです。
以下cocoon時代に使っていたものです。
@media only screen and (max-device-width: 480px) {
.my-allwidth-image {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.8.3
利用中のWordPressバージョン
6.0.2
利用中のプラグイン一覧
Akismet Anti-Spam (アンチスパム)
Youtube SpeedLoad
Contact Form 7
など
投稿済 : 14/09/2022 12:54 am
セレクタの詳細度を上げてみてください。
SWELL開発者です。
投稿済 : 14/09/2022 9:04 am
Topic starter
返信くださりありがとうございます。
その後CSSを
/* スマホ画面いっぱいに画像を表示 */
@media only screen and (max-width: 480px){
my-allwidth-image {
position:relative;
left:-15px;
max-width: calc(100% + 30px)!important;
}
}
と"important"を入れて優先度を上げたのですが
反映されません。
ちなみに追加CSS内には他にコードを入れてません。
他に見るべき点があったらご教授いただけたら幸いです。
投稿済 : 15/09/2022 3:08 am
@ayanami650304 了さんの説明は読んで理解していただいておりますでしょうか？「詳細度」です。「優先度」ではありません。詳細度をGoogle検索などして対応してください。
SWELLカスタマイズ向けの非公式サイトを作りました。何か見つかるかも？→ https://tecchan.jp/swell-tips/
上記以外のWordPress全般向けのナレッジはこちら→ https://tecchan.jp/
投稿済 : 15/09/2022 11:47 pm
Topic starter
詳細度を調べるうちに優先度が出てきたので同義だと理解してしまいました。
もう少し調べてみます。
ヒントがあれば教えてくださると嬉しいです。
力不足、理解不足ですみませんでした・・・。
投稿済 : 18/09/2022 1:20 am
詳細度も優先度もまあ同じようなものだと思います。（どちらの呼び方が正解なのかとかはちょっと分かってないです。）
ただ、max-widthだけimportant付けて優先度強くしても意味ないので、「セレクタの」詳細度を上げてください。
.
（かなり雑な）例
.my-allwidth-image.my-allwidth-image.my-allwidth-image{...}
SWELL開発者です。
投稿済 : 20/09/2022 5:14 pm