サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年12月8日 18:39
お世話になっております。
テーブルの一列目を固定し、どこかのセルにリンクを入れると、横スクロールしたときにリンクの文字が固定した一列目の上を通って見づらくなってしまいます。
また、リンクに背景色が付き、文字はリンク色に変化しません。
解決方法を教えていただけないでしょうか。
以下のページにテーブル作りましたので、見ていただけますか。
https://xn--w8jte276hx5vdnebu3f.com/alice-restaurant/
どうぞよろしくお願いいたします。
わいひら reacted
2019年12月8日 19:13
ご連絡ありがとうございます!
不具合を確認したので、修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
kchan reacted
Topic starter
2019年12月8日 20:01
わいひらさん
早々のご対応ありがとうございます。
固定していないときと同様に表示されるようになりました(*^^*)
ただ、今スマホで見てみますと、Androidでは一列目が固定されていますが、iPhoneとiPadでは一列目が固定されていませんでした。
(わたしのサイトの不具合でしたら、すみません。)
解決できますでしょうか。
どうぞよろしくお願いします。
This post was modified 5年前 by kchan
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; }
2019年12月9日 19:45
ただ、今スマホで見てみますと、Androidでは一列目が固定されていますが、iPhoneとiPadでは一列目が固定されていませんでした。
これは、以前のバージョンでは問題なかったのでしょうか?
それとも文面通り、今回の最新版を確認時に、初めて気づいたということでしょうか。
Topic starter
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に入れてみましたが、どちらに入れても状況は変わりませんでした… ?
Topic starter
2019年12月11日 07:20
草村さん、こんにちは!
ありがとうございます。
書いてくださったCSSを試してみましたが、わたしのサイトは固定されませんでした… ?
2019年12月11日 16:50
わたしのサイトは固定されませんでした…
これも可能性でしかないですが、子テーマのstyleが関係してないか確認いただけましたか???
親テーマを触ってなければ、Cocoon親テーマを一時的に有効化してみるとデフォルト状態で表示されるので、それで問題なければ子テーマのカスタマイズのどこかに原因がある。とわかるかと思います。
どんな感じでしょうか??
あと。
該当記事のカスタムcssもバックアップをとってから、一時的にまっさらな状態にしてみるなど。
This post was modified 5年前 by かうたっく
Topic starter
2019年12月12日 01:24
ありがとうございます。
試してみた順です。
草村さんの方法でブラウザキャッシュ削除→固定されませんでした…
親テーマに変更→固定されませんでした。
Akiraさんの方法→ 初動では残っているのですが、数秒後に動いてしまいました。
わかりづらいかもしれませんが、動きを貼ってみましたので見ていただいてもよろしいでしょうか。
どうぞよろしくお願いします。
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
Topic starter
2019年12月12日 03:20
固定されましたー ?
草村さんが書いてくださった、草村さんとAkiraさんのCSSを合わせた方法でiPhone・iPadとも固定されました!
(AkiraさんのCSSを書くときに、草村さんに教えていただいたCSSを消してしまっていたのですが、もしかしたら追加して書いて、という意味合いだったのかもしれません。理解できずに、すみませんでした。)
無事に固定されて嬉しいです(*^^*)
わいひらさん、かうたっくさん、草村さん、Akiraさん、ありがとうございました!
わいひら reacted
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 reacted
2019年12月13日 19:06
ご確認ありがとうございます!
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。