現在デフォルトスキンとして「Veilnui Simplog (blue)」を適用中。

テーブルの一列目を固定した時の現象 | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
テーブルの一列目を固定した時の現象
 
Share:

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


kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月8日 18:39  

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

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

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

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

 

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

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7857
わいひら - Facebookわいひら - Twitter
2019年12月8日 19:13  

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

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


kchan 件のいいね!
kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月8日 20:01  

わいひらさん

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

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

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

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

 

This post was modified 2か月 前 by kchan

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4245
かうたっく - Facebook
2019年12月9日 17:32  

引用元: 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わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7857
わいひら - Facebookわいひら - Twitter
2019年12月9日 19:45  

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4245
かうたっく - Facebook
2019年12月9日 22:31  

もひとつついでに❦

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


kchan 件のいいね!
kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月11日 00:10  

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

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

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

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

 

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

バージョンは2.0.2.2でした。

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

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

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

 

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

教えて下さった

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

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


草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月11日 04:02  

こんにちは。

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

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

わいひらkchan 件のいいね!
kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月11日 07:20  

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

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

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4245
かうたっく - Facebook
2019年12月11日 16:50  

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

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

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

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

 

あと。

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

This post was modified 2か月 前 by かうたっく

kchanわいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7857
わいひら - Facebookわいひら - Twitter
2019年12月11日 19:58  

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


kchan 件のいいね!
Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 408
Akira - FacebookAkira - Twitter
2019年12月11日 22:16  

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

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

わいひら, kchan草村 件のいいね!
kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月12日 01:24  

ありがとうございます。

試してみた順です。

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

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

 

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

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


わいひら草村 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4245
かうたっく - Facebook
2019年12月12日 01:31  

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

 

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

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


わいひらkchan 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月12日 02:16  

私が最初に確認した端末は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


わいひらkchan 件のいいね!
kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月12日 03:20  

固定されましたー ? 

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

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

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

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7857
わいひら - Facebookわいひら - Twitter
2019年12月12日 20:48  

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

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


kchan 件のいいね!
kchan
(@kchan)
Trusted Memberサイト
参加: 6か月 前
投稿: 65
2019年12月13日 03:04  

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7857
わいひら - Facebookわいひら - Twitter
2019年12月13日 19:06  

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


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)

サービス運営期間:1年6ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
△DBは復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能

サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い

サービス運営期間:1年4ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

ログイン または 登録 してください

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