サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-06-04 19:25
対象のページのURL： https://sironekodatsumou.co.jp/tokyo-datsumo-clinic-nagoya/
相談内容：
コクーン設定→レスポンシブテーブルの【横幅の広いテーブルは横スクロール】と【テーブルの1列目を固定表示】にチェックを入れております。
左側一列目のセルをrowspanにて結合すると、左から2列目のセルも固定されてしまい、スクロールした場合に左から一列目の表と重なってところで止まります。(添付GIF参照)
対象URL では2列目の背景色が変わっており、固定されているのが確認できます。
1列目を結合しても左2列目は固定されないようにしたいのですが、可能でしょうか。
注意事項として【横スクロールテーブルで1列目となるth、tdを固定します。】とありますので、<tr>内の初めの<th>もしくは<tr>を固定しているのは確認できるのですが、なかなか良い解決策が見つからず、、、質問した次第です。
※高速化設定をしている場合は無効にしてください。
環境情報：
----------------------------------------------
サイト名：しろねこ脱毛
サイトURL： https://sironekodatsumou.co.jp
ホームURL： https://sironekodatsumou.co.jp
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.7.2
PHPバージョン：7.4.13
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.9
カテゴリ数：4
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.6
style.cssサイズ：622バイト
functions.phpサイズ：5426バイト
----------------------------------------------
Gutenberg：0
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：1
ホームイメージ： 
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
All-in-One WP Migration 7.43
Autoptimize 2.8.4
Classic Editor 1.6
EWWW Image Optimizer 6.1.5
Google XML Sitemaps 4.1.1
WP Fastest Cache 0.9.1.8
----------------------------------------------
2021-06-04 19:38
しろねこさん
動画の表は、どこにあるのでしょうか。
対象のページのURL： https://sironekodatsumou.co.jp/tokyo-datsumo-clinic-nagoya/
には見当たらない気がします。
公開ページで掲載たままにできないというご事情であれば、固定ページでnoindexでテスト記事を作成するなどして、実際の状態を拝見させてください。
実際の状態を確認させていただくことは基本だと思います。
お手数お掛けしますが、よろしくお願いいたします。
すみませんが、私はこれから夕食ですので、しばらく席を外してしまいます。
（そのため、自分の環境で、事象の再現をする時間も、今はありません。）
ちなみに、動画は大変有り難かったのですが、GIFで貼っていただけると直接参照できますし、より多くの方にご確認いただけると思います。
わいひら reacted
2021-06-04 19:57
前略、しろねこさん
私もスマホで該当箇所を探してしまいました。
出先なので、よくわかりませんが、プラグインの、Autoptimize はcocoonの高速化設定と併用すると不具合が出るみたいですので、使わない方が無難です。
あと、キャッシュ系のプラグインは、停止しておいてください。
わいひら reacted
Topic starter
2021-06-04 21:18
@リフィトリー さん、
@mk2 さん、ご回答ありがとうございます。キャッシュ、プラグイン削除を行いました。
事象が確認できるURLは下記となります。
https://sironekodatsumou.co.jp/tokyo-datsumo-clinic/
ただ、初めの質問のURL、上記のURL共に、左1列目を縦方向に結合した場合、左から2列目も固定されており、背景色が変化している状況です。
添付画像では5回左から２列目、上から2行目の５回の部分がスクロールした際にかぶってしまっている状況です。
また、スクロール被りがない他の表でも結合したセルの隣のセルが固定として灰色の背景色となっており、かなり見栄えが悪い状態です。
2021-06-04 21:28
私のローカル環境で試してみましたが、なるほど。。。という感じではあります。
回避方法はまだ見つけていませんが、再現したということは、ご報告しておきます。
（3つ目は、結合なしです。）
2021-06-04 21:37
良く分かっていなくて、推測でしかありませんが。。。
.scrollable-table.stfc-sticky tr > *:first-child {
background-color: #e9eff2;
color: #333;
position: sticky;
position: -webkit-sticky;
left: 0;
z-index: 2;
}
しろねこさんや私の場合もそうですが。
1列目の1行目と2行目を結合しています。
結合すると、元々の2行目の1列目って、なくなってしまう。。。と言いますか。。。
元々の2列目が最初にきてしまうので、「first-child」になってしまうのでしょうか。。。？
Topic starter
2021-06-04 21:41
2021-06-04 21:48
なるほど。。。
では、まやかしですが、こんな感じではどうでしょう。。。
上のテーブルだけ、まやかしでやってみましたが。。。
セルの幅が広い場合は、上手くいくか分かりません。
まやかしですので、手順は面倒です。
まずは、重なってしまう箇所に、今回はidを設定しました。
（classでも良いと思います。今回は「test」というidにしました。）
（classでも良いと思います。今回は「test」というidにしました。）
そしてそのidをセレクタにして。。。
カスタムCSSへ以下のように書きました。
カスタムCSSへ以下のように書きました。
結合先ではなく、重なってしまうセルにidを指定したのです。
#test {
background: #fff;
z-index: 0;
}
backgroundで色を強制的に戻して。。。
z-indexで、下へと潜り込ませました。
Topic starter
2021-06-04 21:49
rowspan=を使用すると、htmlの記述上結合先のセルの部分を記述しないため、うまくいかないのかなと。ただその場合、どうすれば表示が綺麗になるのかが問題です。。
2021-06-04 21:57
私の方法もリフィトリーさんと同じです。
私はカスタムCSSに書きましたけど。
idを指定したセルが分かり易いように、色をつけました。
結合先にidをつけたのではありません、不可能ですから。。
重なってしまう2列目のセル（first-childになってしまうセル）にCSSを適用させて、下へ潜りこませたイメージです。
ただ、2列目の方が幅が広い場合は、上手くいかないかもしれません。
わいひら reacted
2021-06-04 22:13
そろそろお時間がなくなってしまいます。
しろねこさんからの反応はありませんが、しばらく席を外してしまいます。
すみません。
戻って来るのは真夜中すぎ（でも一時的）になると思います。
その頃には解決なさっていると良いのですが。
2021-06-05 00:25
しろねこさん
解決したようで、良かったです。
ところで…。
利いていれば、どちらでも良いという気もしますが。。。
確かbgcolorはHTML5では廃止されたと思います。
background-colorをお使いになった方が。。。と思わなくはありません。
余計なお世話な気はしますけど。
以下の「HTML5で廃止された属性一覧」の<body>の項 https://www.tagindex.com/html5/basic/abolished.html
こちらでも。
https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/bgcolor_attr.php
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。