Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

テーブルの一列目を固定した時の現象
 
共有:
通知
すべてクリア

[解決済] テーブルの一列目を固定した時の現象

19 投稿
5 ユーザー
22 Likes
2,851 表示
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

お世話になっております。

テーブルの一列目を固定し、どこかのセルにリンクを入れると、横スクロールしたときにリンクの文字が固定した一列目の上を通って見づらくなってしまいます。

また、リンクに背景色が付き、文字はリンク色に変化しません。

解決方法を教えていただけないでしょうか。

 

以下のページにテーブル作りましたので、見ていただけますか。

https://xn--w8jte276hx5vdnebu3f.com/alice-restaurant/

どうぞよろしくお願いいたします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14323
 

ご連絡ありがとうございます!
不具合を確認したので、修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


   
kchan reacted
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

わいひらさん

早々のご対応ありがとうございます。
固定していないときと同様に表示されるようになりました(*^^*)

ただ、今スマホで見てみますと、Androidでは一列目が固定されていますが、iPhoneとiPadでは一列目が固定されていませんでした。

(わたしのサイトの不具合でしたら、すみません。)

解決できますでしょうか。
どうぞよろしくお願いします。

 

This post was modified 3年前 by kchan

   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

引用元: https://stackoverflow.com/questions/54646939/why-is-my-positionsticky-not-working-on-ios

had a similar problem where my wrapper was a span and by adding display:block and position: -webkit-sticky it was resolved for ios. Thanks.

翻訳

ラッパーがスパンであり、display:blockとposition:-webkit-stickyを追加することで、iosで解決される同様の問題がありました。ありがとう。

Chromeだとユーザーエージェントのstyleに以下が入ってるようですのでdisplay: table-cell;をいれてみるとか????。

td {
	display: table-cell;
	vertical-align: inherit;
}

   
kchan and わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14323
 

ただ、今スマホで見てみますと、Androidでは一列目が固定されていますが、iPhoneとiPadでは一列目が固定されていませんでした。

これは、以前のバージョンでは問題なかったのでしょうか?
それとも文面通り、今回の最新版を確認時に、初めて気づいたということでしょうか。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

もひとつついでに❦

ipad・iPhoneでのその状態を確認できないので、感謝しながら情報待ち状態だったりします ? ? ? 


   
kchan reacted
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

わいひらさん、ありがとうございます。

お返事が遅くなってしまい、すみません><

それとも文面通り、今回の最新版を確認時に、初めて気づいたということでしょうか。

はい、質問をした時点では 一列目が固定されていないことに気がついていませんでした。

 

今、作成途中の新サイトがあり、そちらでもcocoonを使用させていただいてます。

バージョンは2.0.2.2でした。

テーブルを作って試してみると、やはりiPhone・iPadでは一列目が固定されませんでした。

その後、自動アップデートで2.0.2.4にしても、固定されませんでした。

どうぞよろしくお願いします。

 

かうたっくさん、いつもありがとうございます。

教えて下さった

td { display: table-cell; vertical-align: inherit; }

高度な設定の追加 CSS クラス、該当ページ変更用のカスタムcssに入れてみましたが、どちらに入れても状況は変わりませんでした… ? 


   
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

こんにちは。

私の環境だと以下のCSSを適用すると固定が正常になりました。
iPhoneだと.scrollable-tableではなくテーブルに固定されてるみたいです。

.scrollable-table table {
max-width:none;
}

   
わいひら and kchan reacted
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

草村さん、こんにちは!
ありがとうございます。

書いてくださったCSSを試してみましたが、わたしのサイトは固定されませんでした… ?

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

わたしのサイトは固定されませんでした…

これも可能性でしかないですが、子テーマのstyleが関係してないか確認いただけましたか???

親テーマを触ってなければ、Cocoon親テーマを一時的に有効化してみるとデフォルト状態で表示されるので、それで問題なければ子テーマのカスタマイズのどこかに原因がある。とわかるかと思います。

どんな感じでしょうか??

 

あと。

該当記事のカスタムcssもバックアップをとってから、一時的にまっさらな状態にしてみるなど。

This post was modified 3年前 by かうたっく

   
kchan and わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14323
 

草村さんの方法は、ブラウザキャッシュを削除してもダメでしたか?


   
kchan reacted
Akira
(@akira)
Noble Member Registered
結合: 5年前
投稿: 1217
 

ベンダープレフィックスが必要なのではないでしょうか。

.scrollable-table.stfc-sticky tr th:first-child,
.scrollable-table.stfc-sticky tr td:first-child {
  position: -webkit-sticky;
}

   
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

ありがとうございます。

試してみた順です。

草村さんの方法でブラウザキャッシュ削除→固定されませんでした…
親テーマに変更→固定されませんでした。

Akiraさんの方法→ 初動では残っているのですが、数秒後に動いてしまいました。

 

わかりづらいかもしれませんが、動きを貼ってみましたので見ていただいてもよろしいでしょうか。
どうぞよろしくお願いします。

https://xn--w8jte276hx5vdnebu3f.com/alice-restaurant/


   
わいひら and 草村 reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 5年前
投稿: 4764
 

Akiraさんの方法。って場合のgif画像

 

これってホントに実機を持っていて、MACで検証してみないと分からないと思います。

ちなみに上述したんですが、ご自身の環境問題的には問題なかったのでしょうか???


   
わいひら and kchan reacted
草村
(@kusamura_mono)
Estimable Member Registered
結合: 4年前
投稿: 174
 

私が最初に確認した端末はiOS13.2.3でkchanさんが撮ってくれた動画と同じ状況でした。

これは

iPhoneだと.scrollable-tableではなくテーブルに固定されてるみたいです。

↑この状態なのでAkiraさんのCSSと合わせて以下を適用でiOS12の端末でも固定されました。

.scrollable-table table {
max-width: none;
}
.scrollable-table.stfc-sticky tr th:first-child,
.scrollable-table.stfc-sticky tr td:first-child {
position: -webkit-sticky;
}

kchanさんの方でもご確認いただければと思います!

確認端末: iPhone6 iOS12.4.3、iPhone8 iOS13.2.3


   
わいひら and kchan reacted
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

固定されましたー ? 

草村さんが書いてくださった、草村さんとAkiraさんのCSSを合わせた方法でiPhone・iPadとも固定されました!

(AkiraさんのCSSを書くときに、草村さんに教えていただいたCSSを消してしまっていたのですが、もしかしたら追加して書いて、という意味合いだったのかもしれません。理解できずに、すみませんでした。)

無事に固定されて嬉しいです(*^^*)
わいひらさん、かうたっくさん、草村さん、Akiraさん、ありがとうございました!

 


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14323
 

Akiraさんと草村さんが書かれた方法に準じてCocoon親テーマにも適用してみました。
iOSで以下で確認していただいてよろしいでしょうか。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
CSSセレクタを少し短く書くようにしたのと、僕の手元には実機がないのでよろしければで良いのでよろしくお願いいたします。
もしこれで動作しないようであれば、CSSセレクタをth, td双方に割り当てたいと思います。


   
kchan reacted
kchan
(@kchan)
Trusted Member Registered
結合: 3年前
投稿: 69
Topic starter  

わいひらさん、ありがとうございます。

わたしの環境では、iPhone、iPadとも固定されています!


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14323
 

ご確認ありがとうございます!


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました