Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
スクロールありのテーブルをPC・SPい...
 
通知
すべてクリア

スクロールありのテーブルをPC・SPいずれかで非表示にした際、「スクロールできます」の文字だけが消えずに残ってしまう

5 投稿
3 ユーザー
2 Likes
1,611 表示
meg
 meg
(@meyko53)
投稿: 4
メンバー
Topic starter
 

PCとスマホで表示させるテーブルを2種類作成し、それぞれデバイス制限をかけました。

(テーブルの幅をそれぞれで分けたかったのですが、CSSでうまく指定できず上記の対応を行いました。)

 

しかしスクロールありのテーブルをPC・SPいずれかで非表示にした際、「スクロールできます」の文字だけが消えずに残ってしまうため、デバイス制限を活用できずにいます。

PCでもスマホで見た場合でも同様でした。

CSSで個別に消すこともできず困っております。

ss(200)
ss(201)

 

念のため、別の環境でも試してみましたが、同様の現象が起こっております。

ご確認をお願いできますでしょうか。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.8.5
OS
Mac OS
利用中のWordPressバージョン
6.0.2
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome
利用中のプラグイン一覧

SEO SIMPLE PACK

 
投稿済 : 06/10/2022 11:25 pm
es:エス
(@es)
投稿: 26
メンバー
 

meg (@meyko53) さん

確認したところ、確かに、おっしゃっている状態になりますね。

ひとまず以下のCSSで、PCとSPを個別に非表示にできましたので、お試しください。

PC
.c-scrollHint.pc_ {display: none}

SP
.c-scrollHint.sp_ {display: none}

あとは、メディアクエリでご希望の画面解像度による振り分けをしていただけたらと思います。

This post was modified 2年前 2回 by es:エス
 
投稿済 : 08/10/2022 3:29 am
meg
 meg
(@meyko53)
投稿: 4
メンバー
Topic starter
 

esさん

いつもありがとうございます。
私の環境以外でも同じようになったとのことで、少し安心しました。

 

同じようにdisplay: none;でメディアクエリで表示分けをすることも考えたのですが、
同一ページに複数のテーブルがあり、
それぞれで表示を(PC非表示またはスマホ非表示)分ける必要がありまして。

 

個別にクラスを付与できればいいのですが、テーブルに追加クラスを付与するも、
c-scrollHintの下の要素figureタグ)にクラスが付与されてしまい、
c-scrollHintには個別にCSSを付与できない状況でした。

ss(203)

 

ひとまず今回は、フルワイドプロック内にテーブルを作成し、
フルワイドブロックにデバイス制限(スマホ表示とPC表示)をかける方法で対処しました。

 

根本解決ではないので、問題が解消されると良いのですが。

 
投稿済 : 08/10/2022 11:41 am
es:エス reacted
了
 
(@loos_ryo)
投稿: 1264
メンバー Admin
 

すみません、修正しておきます!

SWELL開発者です。

 
投稿済 : 09/10/2022 11:08 am
meg
 meg
(@meyko53)
投稿: 4
メンバー
Topic starter
 

スムーズなアップデートに感謝いたします。

こちら、問題解決しました。

ありがとうございます!

 
投稿済 : 09/10/2022 7:39 pm
しらこ reacted
共有: