サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
スキンの不具合
11
投稿
4
ユーザー
7
Likes
3,072
表示
Topic starter
2020-01-13 23:31
連投の問い合わせで申し訳ありません。
これは不具合ではなく、当方の好みの問題かもしれませんが、
スキンをVeilnui Simplog (blue) に変更させて頂いたところ、
Gutenbergのtableブロックスタイルの選択として、”デフォルト”と”ストライプ”のどちらを選択しても一律、"ストライプ"固定で描画されるように見受けられます。
当方としては、いわゆる”デフォルト”状態 で table を表示させたいのですが、どのような対応策が適切でしょうか。
URL： https://keieikanrikaikei.com/docomo-per-stock-yield/
・Cocoonの高速化設定は解除しております。
・テーマ管理情報は下記の通りです。
宜しくお願いします。
----------------------------------------------
サイト名：経営コンサルタントによる経営戦略と経営管理に効く経営管理会計
サイトURL： https://keieikanrikaikei.com
ホームURL： https://keieikanrikaikei.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/veilnui-simplog-blue/style.css
WordPressバージョン：5.3.2
PHPバージョン：7.3.7
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.0.5.1
カテゴリ数：35
タグ数：6898
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.0
----------------------------------------------
Gutenberg：1
AMP：1
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：1
ホームイメージ：/wp-content/uploads/2019/12/Blog-top-screen-2019-12-13-1.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
WEBフォントLazy Load：1
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
Ad Inserter 2.6.1
Advanced noCaptcha & invisible Captcha 5.6
Akismet Anti-Spam 4.1.3
All In One SEO Pack 3.3.4
Aurora Heatmap 1.3.3
Broken Link Checker 1.11.10
Category Order and Taxonomy Terms Order 1.5.7.1
Classic Editor 1.5
Contact Form 7 5.1.6
Duplicate Post 3.2.4
Easy Table of Contents 1.7
Edit Author Slug 1.6.1
EWWW Image Optimizer 5.1.4
Google XML Sitemaps 4.1.0
Jetpack by WordPress.com 8.0
Link Manager 0.1-beta
MathJax-LaTeX 1.3.11
Menu Icons 0.12.2
Nested Pages 3.1.7
Post-Plugin Library 2.6.2.1
PS Auto Sitemap 1.1.9
Regenerate Thumbnails 3.1.2
Shortcodes Ultimate 5.6.2
TablePress 1.10
TinyMCE Advanced 5.3.0
WP-Optimize - Clean, Compress, Cache 3.0.15
WP Multibyte Patch 2.8.3
----------------------------------------------
小林友昭
2020-01-14 17:14
テーブルレイアウトのCSSがスパゲッティソース状態で変更が大変なので、これをどうぞ。
（マジでリファクタリングしないと）。
あと、他の色が必要なら教えてください。
keieikanrikaikei and わいひら reacted
2020-01-14 17:18
今回みたいに、あえてCSSを適用させたくない例がある。
だから「追加のCSSクラス」に「nostyle」を入れることで、その部分にだけCSSを適用されないようにするようにした方が良いのかも。
「:notセレクタ」を使えば出来るけど、ファイルサイズが大きくなる欠点。
2020-01-14 18:43
zipファイルをみてないですが、朝みたとき
WPのtableブロックのtbodyだけ装飾を行われてるようなので、統一感がないのかなぁ
なんて思ったりしました。離脱したまま忘れてました＾＾；
けど、今は画像になっているのでソースは確認できませんでした。
https://keieikanrikaikei.com/docomo-per-stock-yield/
好みはあると思いますし、zipファイルでご対応済みかもしれないですね。
朝の書き込みをChrome更新前にかろうじてコピペできたので、一応。状況がかわってそうですが。
～～ここから朝のコピペ～～
.wp-block-table tbody tr:nth-child(odd) {
background-color: #fafbfc;
}
https://gyazo.com/e824e40fa0ca8769849a13365c6535ec
tableだけについているボーダー囲み線も不要：もとに戻したい場合
.wp-block-table tbody {
border: solid 1px #d7d7d7;
}
https://gyazo.com/c3cd894d7df59a7856e5d7feb7bbc059
スキン作成者さんはブロックエディタので装飾されているようなので、.wp-block-tableのtbodyだけ反映されるみたいですね。
親テーマのセレクタにあわせ
～～ここまで～～
それ以降思った事があったみたいですが、ここまで。でした
This post was modified 4年前 by かうたっく
keieikanrikaikei and わいひら reacted
Topic starter
2020-01-14 21:50
veilnui様 かうたっく様
いつもありがとうございます。
zipをskin-templateフォルダーにupしましたが、表示が変わらずでした。多分、私の操作がどこか間違っていると思います。
そこで、かうたっく様のアドバイスに基づき、CSSに追記した結果が添付です。
かうたっく様のセンスがさく裂して、貼って頂いたCSSの tbody の方も必要でした。さすがです。
ここまでくれば最後までわがままを通させて頂ければ嬉しいです。
tbody では外枠は元に戻せましたが、各セルの罫線は戻りませんでした。CSSを本格的に学習していないため、ご提示いただいたCSSコード内で、やれ table や td や tr を指定してみましたが、一向に効いてくれず、頂いた tbody のままにしてあります。
#d7d7d7 で外枠同様、各セルにも罫線を設定するには、CSSのどんな記述が足りていないのでしょうか。
追加CSSは以下の2つです。
.wp-block-table tbody tr:nth-child(odd) {
background-color: #fafbfc;
}
.wp-block-table tbody {
border: solid 1px #d7d7d7;
}
小林友昭
Topic starter
2020-01-14 21:55
親切にもご丁寧な対応ありがとうございます。
veilnui様のサイトも拝見しました。綺麗でシンプルに表現されていらっしゃるので素晴らしいと思います。
そして、table も自らがブログをデザインされるには、アレが適切なのだろうなあと思いました。
今回のtableのスタイル変更は、あくまで当ブログ内での統一感のお話なので、私がこのスキンを”お気に入り”なことは間違いありません。
これからも、素晴らしい作品を世に出されることを心待ちにしております。
宜しくお願いします。
小林友昭
2020-01-15 19:56
追加コードは、多分こちら。
.wp-block-table tbody tr td {
border: solid 1px #d7d7d7;
}
keieikanrikaikei reacted
2020-01-15 19:58
まとめるとしたらこんな感じでしょうか。
.wp-block-table tbody tr:nth-child(odd) {
background-color: #fafbfc;
}
.wp-block-table tbody,
.wp-block-table tbody tr td {
border: solid 1px #d7d7d7;
}
※実環境で試してないので、うまくいくかはわかりません。
keieikanrikaikei reacted
Topic starter
2020-01-15 21:19
わいひら様
最終的に、CSSコード指南までいただきありがとうございました。
Veilnui Simplog (blue)という素敵なスキンにて、Gutenberg のtable ブロックにて、
①スキン指定のストライプ設定をbackground-color: #fafbfc で上書き
②全てのセルにて罫線を #d7d7d7 で表示
するために、追加CSS記述にて変更する、対応させていただきました。
https://keieikanrikaikei.com/docomo-per-stock-yield/
アドバイス頂きました、お三人方、どうもありがとうございました。
小林友昭
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。