トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
トピックスターター
PCとスマホで表示させるテーブルを２種類作成し、それぞれデバイス制限をかけました。
（テーブルの幅をそれぞれで分けたかったのですが、CSSでうまく指定できず上記の対応を行いました。）
しかしスクロールありのテーブルをPC・SPいずれかで非表示にした際、「スクロールできます」の文字だけが消えずに残ってしまうため、デバイス制限を活用できずにいます。
PCでもスマホで見た場合でも同様でした。
CSSで個別に消すこともできず困っております。
念のため、別の環境でも試してみましたが、同様の現象が起こっております。
ご確認をお願いできますでしょうか。
確認項目
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.8.5
OS
Mac OS
利用中のWordPressバージョン
6.0.2
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome
利用中のプラグイン一覧
SEO SIMPLE PACK
投稿済 : 06/10/2022 11:25 pm
meg (@meyko53) さん
確認したところ、確かに、おっしゃっている状態になりますね。
ひとまず以下のCSSで、PCとSPを個別に非表示にできましたので、お試しください。
PC
.c-scrollHint.pc_ {display: none}
SP
.c-scrollHint.sp_ {display: none}
あとは、メディアクエリでご希望の画面解像度による振り分けをしていただけたらと思います。
投稿済 : 08/10/2022 3:29 am
トピックスターター
esさん
いつもありがとうございます。
私の環境以外でも同じようになったとのことで、少し安心しました。
同じようにdisplay: none;でメディアクエリで表示分けをすることも考えたのですが、
同一ページに複数のテーブルがあり、
それぞれで表示を（PC非表示またはスマホ非表示）分ける必要がありまして。
個別にクラスを付与できればいいのですが、テーブルに追加クラスを付与するも、
c-scrollHintの下の要素（figureタグ）にクラスが付与されてしまい、
c-scrollHintには個別にCSSを付与できない状況でした。
ひとまず今回は、フルワイドプロック内にテーブルを作成し、
フルワイドブロックにデバイス制限（スマホ表示とPC表示）をかける方法で対処しました。
根本解決ではないので、問題が解消されると良いのですが。
投稿済 : 08/10/2022 11:41 am
es：エス reacted
すみません、修正しておきます！
SWELL開発者です。
投稿済 : 09/10/2022 11:08 am