サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年5月3日 16:14
はじめまして。初心者です。
表の背景色と線が元に戻らず、困ってこちらに質問致しました。
・クラシックエディタで作業
・表に関するcssは特に後から足していない
・表のカスタマイズを試していた
・高度な設定の「表のプロパティ」「セルのプロパティ」どちらもいじっていた
・色々作業しすぎてどんな作業をしたか覚えていない
添付の画像①にあるように、記事内に表示されると、表の左側の部分に必ずグレーの色が付いてしまい、行を分ける線が出ない状態です。
【試したこと.1】
試しに、背景の色を白くするコードを「カスタマイズ」から「追加CSS」に入力しました。
/*表の背景色*/
table td {
background: #fff;
}
しかし、右側2つのセルは全て白色に変わったのですが、一番左のセルだけはグレーのまま変わりません
【試したこと.2】
一番左のセルを全て選択し、「セルのプロパティ」から背景色を指定してみました。
色自体は変わりましたが、1行目2行目3行目を分ける線が一番左側だけ表示されません。また、今回作業した表はピンクに変わりましたが、すでに保存されている別記事の表は、全て一番左側がグレーのままです。
目的は、「デフォルトの表示に戻したい」です。
背景色も付かず、白とグレーが交互に表示され、なおかつ一番左側の1行目2行目3行目を分ける線が表示されて欲しい、というのが希望です。
なぜこの現象になったのか覚えておらず、申し訳ありません。
何か解決のヒントがあれば教えていただけると助かります。
2022年5月3日 18:01
前略、misawaさん
これ、プラグインの「Advanced Editor Tools (旧名 TinyMCE Advanced)」の機能のことだと推測します。
この機能、私は使ったことが無かったのですが、今試してみたら、表示のプロパティもセルのプロパティも、設定したときと同じ範囲を選択しないと、設定した内容が高度な設定に表示されないみたいです。
たぶん、セルのプロパティの高度な設定タブで、「枠線の色」を設定したときと、同じ範囲を選択してからでないと、設定した内容が表示されず、消去もできないじゃないかと推測します。
追伸：と思ったら、どうも違う様子・・・
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2022年5月3日 18:29
misawaさん
クラッシックエディターを「テキスト」の方に切り替えてソースコードを見てみると、「Advanced Editor Tools (旧名 TinyMCE Advanced)」の「表のプロパティ」や「セルのプロパティ」機能で操作すると、いろいろなCSSのコードが付与されてしまうようです。
設定したときと同じセルの範囲を選択して元にもどそうとしても、どうも上手くできないですね。
私なら、WordPressのリビジョン機能で、リビジョンを過去のものに戻すか、新しく表を作り直します。
This post was modified 3年前 2回 by リフィトリー
わいひら reacted
2022年5月3日 18:42
試したこと①
1列目のセルのプロパティでセルの種類が「ヘッダー」になっていませんか？
thタグの場合、セル色(CSS標準グレー#f5f6f7)となります。
試したこと②
セルのプロパティで設定した色が優先されるので、背景色が変わった。
罫線色がCSS標準(グレー#eee)で1列目のセル(ヘッダー)の背景色と近似していて消えて見える。
結果、1列目のセルのプロパティが「ヘッダー」になっていないか確認してみて下さい。
わいひら reacted
2022年5月3日 19:07
確かに、chu-yaさんの仰る通り、左列は「ヘッダーセル(thタグ)」にしてしまった可能性がありそうに思います。
ただ、1度背景色を設定したしまった場合は、インラインでbackground-colorが設定されてしまい、それをメニューからはクリアできないようなんですよね。
その場合は、エディタを「テキスト」に切り替えてもらって、background-colorを手で消していただくしかなさそうです。
それが分からない場合は、リフィトリーさんのおっしゃる通り、表を作り直した方が良いと思います。
（その他にも、いろいろインラインで書き込まれるので…。）
「Advanced Editor Tools (旧名 TinyMCE Advanced)」のテーブルって、便利ではありますが、クセがあるんですよね。
（設定しなおしはできても、クリアができないっぽいです。）
表の作り直しは面倒ですが、中身（値）はプレーンテキストの貼り付けで、何とかなりそうな気はします。
【追記】
「高度な設定」－「スタイル」に表示されている場合は、それを削除すれば、クリアはできそうです。
（インラインの内容が表示されるっぽいです。）
ただ、同じ「スタイル」であっても、セルを複数選択すると「スタイル」には表示されないっぽいです。
その場合は、1つ1つセルを選択・クリアを繰り返すしかないですが、面倒ではあります。
わいひら reacted
2022年5月3日 19:38
補足
テーブルのセルを1つ1つ変更する必要があります。
以下の手順で修正できると思います。
- ［テーブル］→［セル］→［セルのプロパティ］
- セルのプロパティの「一般」でセルの種類を「セル」に変更
- 「高度の設定」のスタイルを削除
Topic starter
2022年5月3日 22:05
皆様、色々とご返信頂きありがとうございます！
cocoonではなく、「Advanced Editor Tools (旧名 TinyMCE Advanced)」だったんですね。
大変失礼しました。
こちらのフォーラムで教えて貰う内容ではないにも関わらず、アドバイス頂き感謝いたします。
試したものは以下です。
＞リフィトリーさん
▼「WordPressのリビジョン機能」
これは、ページごとに「リビジョン機能」で保存されているデータがあり、ページごとに過去に戻れるものだと理解していましたが、表など、全体に絡む設定を過去の設定に戻す「リビジョン機能」があるということでしょうか？この辺りが理解できておらず、申し訳ないです。
▼「新しく表を作り直し」
こちらはやり方を「Advanced Editor Tools テーブル 設定し直し」で検索し調べてみます。ありがとうございます。
＞chu-yaさん
▼「“ヘッダー”になっているのではないか」
どこを確認するとヘッダーになっているか判断できるのかが不明だったため、ヘッダーになっているか、なっていないかが分かりませんでした。申し訳ないです。
テキストエディタに乗っているコードは以下で、「th」となっている所がありませんでした。また、「セルのプロパティ」で確認しても3行とも「ヘッダーセル」ではなく「なし」と表示されています。
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 25%;">あああ</td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
<tr>
<td style="width: 25%;">あああ</td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
<tr>
<td style="width: 25%;">あああ</td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
</tbody>
</table>
▼教えていただいた以下の作業を試してみました」
1.［テーブル］→［セル］→［セルのプロパティ］
2.セルのプロパティの「一般」でセルの種類を「セル」に変更
3.「高度の設定」のスタイルを削除
セルのプロパティの内容は、
◆幅には「33.3333%」が最初から入力してあった
◆高さには「41px」が最初から入力してあった
◆「高度な設定」の「スタイル」には「width: 33.3333%; height: 41px;」が最初から入力されれていた。
左端のセル1つ1つを選択し、【2.セルのプロパティの「一般」でセルの種類を「セル」に変更】を実行したあとに、上記の◆3つを全て空欄にし保存しましたが、問題は解決しませんでした。
＞ ｍｋ２さん
▼「background-colorを手で消していく」
テキストエディタにして表のコードを見ても「background-color」と書いてある場所がなく、判断できませんでした。すみません。
▼「プレーンテキストで貼り付け」
一番右端のセル3行を選択し、コピーして左端に貼り付けました。中身の文字は貼り付けた内容に変わりましたが、色はグレーのままでした。
▼「「セル」の「スタイル」を一つ一つ選択してクリア」
こちらも試してみましたが、改善しませんでした。
色々とご意見いただきありがとうございました。
表の設定のやり直し方法を調べ、やってみます。出来なければ他のプラグインで表を作るようにしてみます。
2022年5月3日 22:15
misawaさん
貼り付けていただいた、テーブル部分のソースを拝見した感じでは、素の状態ですね。
（特に、背景色・枠線の色などが指定されていない状態。）
だとすると、いったい何なのか・・・ということは、いただいた情報だけでは難しいかもしれないです。
他のプラグイン等の可能性もあるのかもしれないです。
カスタマイズなどなさっていれば（子テーマ、追加CSS、カスタムCSSなど）、その可能性もあるかもしれないです。
わいひら reacted
2022年5月3日 22:34
@misawa さん
Cocoon 設定 > 本文タブにあるテーブル設定の「テーブルの1列目を固定表示」にチェックが入っていませんか？
「表の左側の部分に必ずグレーの色」とのことですが、「テーブルの1列目を固定表示」の際は表の左側の背景色は #e9eff2 になります。
参考： https://github.com/yhira/cocoon/blob/master/scss/_content.scss#L151
Topic starter
2022年5月3日 23:24
＞Akiraさん、ｍｋ２
ありがとうございます！
Akiraさんに教えていただいた
「テーブルの1列目を固定表示」
こちらにチェックが入っていました！
チェックを外し、グレーの部分はなくなりました！
ものすごく簡単なことなのに、色々とお時間頂いてしまい、申し訳なかったです。
大変助かりました。本当にありがとうございました。
皆様よいGWをお過ごしください！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。