「メイド・イン・ヘブン」スキン適用中

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カスタマイズ依頼

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

表の背景色と線を元に戻したい
 
共有:
通知
すべてクリア

[解決済] 表の背景色と線を元に戻したい

12 投稿
5 ユーザー
13 Reactions
1,357 表示
(@misawa)
New Member Registered
結合: 2年前
投稿: 3
Topic starter  

はじめまして。初心者です。

表の背景色と線が元に戻らず、困ってこちらに質問致しました。

・クラシックエディタで作業
・表に関するcssは特に後から足していない
・表のカスタマイズを試していた
・高度な設定の「表のプロパティ」「セルのプロパティ」どちらもいじっていた
・色々作業しすぎてどんな作業をしたか覚えていない

添付の画像①にあるように、記事内に表示されると、表の左側の部分に必ずグレーの色が付いてしまい、行を分ける線が出ない状態です。

 

【試したこと.1】

試しに、背景の色を白くするコードを「カスタマイズ」から「追加CSS」に入力しました。

/*表の背景色*/
table td {
background: #fff;
}

しかし、右側2つのセルは全て白色に変わったのですが、一番左のセルだけはグレーのまま変わりません

 

【試したこと.2】

一番左のセルを全て選択し、「セルのプロパティ」から背景色を指定してみました。

色自体は変わりましたが、1行目2行目3行目を分ける線が一番左側だけ表示されません。また、今回作業した表はピンクに変わりましたが、すでに保存されている別記事の表は、全て一番左側がグレーのままです。

 

目的は、「デフォルトの表示に戻したい」です。

背景色も付かず、白とグレーが交互に表示され、なおかつ一番左側の1行目2行目3行目を分ける線が表示されて欲しい、というのが希望です。

なぜこの現象になったのか覚えておらず、申し訳ありません。

何か解決のヒントがあれば教えていただけると助かります。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

前略、misawaさん

これ、プラグインの「Advanced Editor Tools (旧名 TinyMCE Advanced)」の機能のことだと推測します。

 

この機能、私は使ったことが無かったのですが、今試してみたら、表示のプロパティもセルのプロパティも、設定したときと同じ範囲を選択しないと、設定した内容が高度な設定に表示されないみたいです。

 

たぶん、セルのプロパティの高度な設定タブで、「枠線の色」を設定したときと、同じ範囲を選択してからでないと、設定した内容が表示されず、消去もできないじゃないかと推測します。

 

追伸:と思ったら、どうも違う様子・・・

 

This post was modified 2年前 2回 by リフィトリー

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

misawaさん

クラッシックエディターを「テキスト」の方に切り替えてソースコードを見てみると、「Advanced Editor Tools (旧名 TinyMCE Advanced)」の「表のプロパティ」や「セルのプロパティ」機能で操作すると、いろいろなCSSのコードが付与されてしまうようです。

 

設定したときと同じセルの範囲を選択して元にもどそうとしても、どうも上手くできないですね。

 

私なら、WordPressのリビジョン機能で、リビジョンを過去のものに戻すか、新しく表を作り直します。

This post was modified 2年前 2回 by リフィトリー

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

試したこと①
1列目のセルのプロパティでセルの種類が「ヘッダー」になっていませんか?
thタグの場合、セル色(CSS標準グレー#f5f6f7)となります。

試したこと②
セルのプロパティで設定した色が優先されるので、背景色が変わった。
罫線色がCSS標準(グレー#eee)で1列目のセル(ヘッダー)の背景色と近似していて消えて見える。

 

結果、1列目のセルのプロパティが「ヘッダー」になっていないか確認してみて下さい。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

確かに、chu-yaさんの仰る通り、左列は「ヘッダーセル(thタグ)」にしてしまった可能性がありそうに思います。

ただ、1度背景色を設定したしまった場合は、インラインでbackground-colorが設定されてしまい、それをメニューからはクリアできないようなんですよね。

その場合は、エディタを「テキスト」に切り替えてもらって、background-colorを手で消していただくしかなさそうです。

それが分からない場合は、リフィトリーさんのおっしゃる通り、表を作り直した方が良いと思います。
(その他にも、いろいろインラインで書き込まれるので…。)

「Advanced Editor Tools (旧名 TinyMCE Advanced)」のテーブルって、便利ではありますが、クセがあるんですよね。
(設定しなおしはできても、クリアができないっぽいです。)

 

表の作り直しは面倒ですが、中身(値)はプレーンテキストの貼り付けで、何とかなりそうな気はします。

 

【追記】

「高度な設定」-「スタイル」に表示されている場合は、それを削除すれば、クリアはできそうです。
(インラインの内容が表示されるっぽいです。)

ただ、同じ「スタイル」であっても、セルを複数選択すると「スタイル」には表示されないっぽいです。
その場合は、1つ1つセルを選択・クリアを繰り返すしかないですが、面倒ではあります。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2325
 

補足
テーブルのセルを1つ1つ変更する必要があります。
以下の手順で修正できると思います。

  1. [テーブル]→[セル]→[セルのプロパティ]
  2. セルのプロパティの「一般」でセルの種類を「セル」に変更
  3. 「高度の設定」のスタイルを削除

   
(@misawa)
New Member Registered
結合: 2年前
投稿: 3
Topic starter  

皆様、色々とご返信頂きありがとうございます!

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つを全て空欄にし保存しましたが、問題は解決しませんでした。

 

> mk2さん
▼「background-colorを手で消していく」
テキストエディタにして表のコードを見ても「background-color」と書いてある場所がなく、判断できませんでした。すみません。

▼「プレーンテキストで貼り付け」
一番右端のセル3行を選択し、コピーして左端に貼り付けました。中身の文字は貼り付けた内容に変わりましたが、色はグレーのままでした。

▼「「セル」の「スタイル」を一つ一つ選択してクリア」
こちらも試してみましたが、改善しませんでした。

色々とご意見いただきありがとうございました。
表の設定のやり直し方法を調べ、やってみます。出来なければ他のプラグインで表を作るようにしてみます。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

misawaさん

貼り付けていただいた、テーブル部分のソースを拝見した感じでは、素の状態ですね。
(特に、背景色・枠線の色などが指定されていない状態。)

だとすると、いったい何なのか・・・ということは、いただいた情報だけでは難しいかもしれないです。

他のプラグイン等の可能性もあるのかもしれないです。

カスタマイズなどなさっていれば(子テーマ、追加CSS、カスタムCSSなど)、その可能性もあるかもしれないです。


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@misawa さん

Cocoon 設定 > 本文タブにあるテーブル設定の「テーブルの1列目を固定表示」にチェックが入っていませんか?

表の左側の部分に必ずグレーの色」とのことですが、「テーブルの1列目を固定表示」の際は表の左側の背景色は #e9eff2 になります。

参考: https://github.com/yhira/cocoon/blob/master/scss/_content.scss#L151


   
misawa, mk2, リフィトリー and 1 people reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7101
 

素の状態だと以下。

 
Akiraさんの仰った通りに、固定すると以下。

   
わいひら reacted
(@misawa)
New Member Registered
結合: 2年前
投稿: 3
Topic starter  

>Akiraさん、mk2

ありがとうございます!

Akiraさんに教えていただいた

投稿者:: @akira

「テーブルの1列目を固定表示」

こちらにチェックが入っていました!
チェックを外し、グレーの部分はなくなりました!

ものすごく簡単なことなのに、色々とお時間頂いてしまい、申し訳なかったです。

大変助かりました。本当にありがとうございました。

皆様よいGWをお過ごしください!


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 5年前
投稿: 6845
 

今回のようなご質問でも、URLをご提示いただくと、回答者側でいろいろテストするまでもなく、CocoonのCSSファイルで指定されているとわかったかと思います。

フォーラム冒頭の案内でテーマ作者様が書かれているとおり、ご質問の際はできるだけURLをご提示いただく方が回答者の負担は軽減されます。

This post was modified 2年前 by リフィトリー

   
共有:

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

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

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

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

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

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

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

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