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

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

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

区切りとテーブルの色が反映されない
 
共有:
通知
すべてクリア

区切りとテーブルの色が反映されない

31 投稿
4 ユーザー
3 Reactions
1,876 表示
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

対象のページのURL

https://love-finders.net/ibj-member/

相談内容:

「区切り」と「テーブル」の線の色が反映されません。

どの色を編集画面で選択しても、実際の公開画面では灰色になってしまいます。

区切り線はよく見ると、2重?になっている気もするのですが、なにか解決法はありますでしょうか?ちなみに区切り線だけに限って言えば、ドットスタイルを指定すると色が反映されます。

添付画像は上のURLとは違う画面ですが、分かりやすいように横に並べた画像です。(メインカラーが薄ピンクのせいで、左の枠線が無いように見えますが一応あります。)

※似たケースをフォーラムで探したのですが、上手く見つけられませんでした。

同じ質問がすでに出ていたら申し訳ございません。

 

解決のために試したこと:プラグインをすべて無効化にしましたが、変化はありませんでした。

環境情報:

----------------------------------------------

サイト名:婚活情報サイト:コンカチューン

サイトURL https://love-finders.net

ホームURL https://love-finders.net

コンテンツ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.4.5

PHPバージョン:7.4.13

ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

サーバーソフト:Apache

サーバープロトコル:HTTP/1.1

言語:ja

----------------------------------------------

テーマ名:Cocoon

バージョン:2.2.3.4

カテゴリ数:31

タグ数:21

ユーザー数:1

----------------------------------------------

子テーマ名:Cocoon Child

バージョン:1.1.1

style.cssサイズ:8648バイト

functions.phpサイズ:2128バイト

----------------------------------------------

Gutenberg1

AMP0

PWA0

Font Awesome4

Auto Post Thumbnail0

Retina1

ホームイメージ:/wp-content/uploads/2020/07/9C7BE782-3A80-450A-BAE8-B2A5D01DA12E-e1595603152811.png

----------------------------------------------

ブラウザキャッシュ有効化:1

HTML縮小化:0

CSS縮小化:0

JavaScript縮小化:0

Lazy Load0

WEBフォントLazy Load0

----------------------------------------------

利用中のプラグイン:

AddQuicktag 2.6.0

Aurora Heatmap 1.4.12

BackWPup 3.8.0

Blog Floating Button 1.4.9

Broken Link Checker 1.11.15

Contact Form 7 5.3.2

Easy Smooth Scroll Links 2.23.0

Enhanced Media Library 2.8.5

EWWW Image Optimizer 6.1.4

Google XML Sitemaps 4.1.1

Imsanity 2.7.1

Phoenix Media Rename 3.2.3

Redirection 5.1.1

Revision Control 2.3.2

Search Regex 2.4.1

Show Article Map 0.8

Wordfence Security 7.5.3

WordPress Importer 0.7

WP Multibyte Patch 2.9

Yoast Duplicate Post 3.2.6

----------------------------------------------


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

erekirekiさん

ちょっと時間がありませんので、できるだけ簡単に。

区切り線についてですが、ちょっと難解かも知れません。

 

ピンク?赤?の区切り線を試しにテスト環境で引いてみました。

Chromeのデベロッパーツールで確認すると、ピンクのスタイルが一見当たっているように見えます。

 
上記はすべて、デベロッパーツール上の表示です。
 
しかし、通常の閲覧画面にすると、ただのグレーの線になってしまいました。
 
 
このページを同じChromiumのEdgeで表示しても、グレーでした。
 
 
ところがFirefoxで表示すると、色が出てきます。
 
 
区切り線(hrタグ)は少しややこし事情があるのかも知れません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
 
 
何の解決にもなっておりませんが、ブラウザによって表示が変わる可能性があるということはお伝えできればと。
 
テーブルはすみません、ちょっと今時間がとれず未確認です。

   
わいひら reacted
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

erekirekiさん

何分今日は時間がありません。

お問い合わせいただく際は、どこのことかを画像等で示していただけると、大変助かります。
(どこに区切り線が使われているかを探さなくてはならず、見た目だけでは区切り線とは分からないもので。)

 

とりあえず、erekirekiさんのサイトの状態を貼り付けておきます。

ChromeとEdge

 
 
Firefox
 
 
つまり、区切り線については、スタイルは当たっていて、ブラウザによって差異が出るということかと。
 
区切り線の意味合いからすると、果たして今回の用途が正しいのかは分かりませんが。
別の方法にした方が良いと思います。
 
テーブルは時間がとれず、今のところ未確認です。

   
わいひら reacted
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

mk2様

ご確認ありがとうございました。

なるほど…ブラウザによって見え方が異なっているのですね。(こちらはずっとsafariで見てました。)

運営上、致命的ではないですが別の方法も検討すべきですね。

 

該当箇所の件は大変失礼しました。

最初に指定したURLの該当箇所(テーブル・区切り線)も、一応画像で送っておきます。

This post was modified 3年前 2回 by erekireki

   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16566
 

とりあえず一つずつ。
該当部分の区切り線に関しては、Chrome上で、少なくとも色はついている(灰色ではない)ようにデベロッパーツールでも見えます。
ただ、めっちゃ微妙な色ですね。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16566
 

ただ、僕の環境だとFirefoxでも同じような色みでした。
※ちょっとFirefoxの方が鮮やか?鮮明に見えないのは黄色の背景色との兼ね合いでしょうか。

なので、こちらは一旦でいいのでもっと鮮やかな色(例えば赤とか)を選択していただいてよろしいでしょうか。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

そうなんです。

Chromeのデベロッパーツールで色が見えるのに。。。と思っていました。

 
でも、通常の閲覧画面ではグレーになってしまいました。
 
 
わいひらさんの書き込みを拝見して再確認したところ、どうも太さと色味も関係している感じですね。
 
125%に拡大しても、まだグレーなのですが。
 
150%に拡大すると、色が出てきました。
 
 
Firefoxだと100%でも、色があるように見えますね。
 
 
こういうこともあると、良い勉強になりました。

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

確か、hrタグは、高さを指定するか、高さは指定せずに、border-topだけ、もしくは、border-bottomだけのどちらか一方の太さを指定したような気がするのですが・・

全然調べていません。

おぼろげな記憶・・


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

hrタグの構造って、ちょっと変わっていて、確か以下のようになっていた気がするのですが・・

 

 
 
つまり、1本の線のように見えるだけで、実は、4辺のボーダーで出来ているような・・イメージ?
This post was modified 3年前 2回 by リフィトリー

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

リフィトリーさん

はい、確か上下左右にborderがあったと思います。

しかも、立体的に見えるようにもなっていたと思いますので、リフィトリーさんが添付してくださった図のイメージだと思います。

ただ、HTML5で水平線の定義がなくなってしまい、ただの区切りの要素になったと思っています。
(でも、今のところ水平線で表示されるみたいですけど。)

 


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

全く調べていないので、合っているのかどうかわからないですが・・

.body hr.wp-block-separator {
    height: 2px;
    border: none;
    background-color: #fca49d;
}

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

または、間違っているかもしれませんが・・

.body hr.wp-block-separator {
    border-bottom: 2px solid #fca49d;
    border-top: none;
    border-left: none;
    border-right: none;
}

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

ただ、基本構造が、4辺のボーダーなので、理屈的にはうまく表示されるんじゃないかと思った訳です。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

なんとなく思うのですが。。。

hrタグって、装飾用途では使わない方向で、ただの区切りでしかないのかな。。。と。

装飾用途であれば、上か下の要素のborderを指定するのかな、なんて思ってしまうのですが。

でも、hrタグだとmarginもデフォルトで指定されているので、便利なんですよね。

どういう使い方が正しいのか難しいです。

ブロックエディタで出てきますから、便利なら上手く使いたくなるのが人情かもしれませんね。

正解はない気がしてきました。


   
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

みなさんありがとうございます。

ちょっと、どれをどうしていいのか私には分からないので、区切り線をデフォルトで入っている赤に変えてみました。

safariだとやっぱり赤に変えても、灰色っぽいです。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

erekirekiさん

その色をしばらくキープしていただくことは可能でしょうか。

他のブラウザでも確認してみたいです。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

erekirekiさん

この色でしょうか。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

やはり微妙な感じです。

 

Chrome拡大率100%

 
Chrome拡大率150%
 
Firefox拡大率100%
 
 
ブラウザでかなり色味が違う感じがします。
 
上下左右にborderがある構造も影響しているのでしょうか。。。

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

hrは、border:none; にして、height:2px;を足せばよいかもしれません。

テーブルの方は、セレクタでしょうか?

以下のような感じだと、どうでしょうか?

.scrollable-table th,
.scrollable-table td {
    border: solid 1px blue;
}

   
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

mk2様

ご確認ありがとうございます。

そちらの色ですね。やっぱり反映されてないですか…。

先ほどリフィトリー様から2回目に頂いたコードを追加CSSに入れた所、指定したかったピンク色になっていることを確認しました!ありがとうございます。

ただ、これを指定するとどの色をこの先選んでも、全部同じピンクになるという認識であってますでしょうか?

※確認だけして追加CSSは外してます。(編集画面上は赤です。)


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

私もテスト環境のサイトでhrのブロックを使ってみたことがあるのですが、どうも上手くいかずに、CSSのコードで装飾したような気がします。

 

WordPressのブロックエディターは、発展途上なので、完璧じゃないんですよね。


   
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  
投稿者:: @leafytree

私もテスト環境のサイトでhrのブロックを使ってみたことがあるのですが、どうも上手くいかずに、CSSのコードで装飾したような気がします。

 

WordPressのブロックエディターは、発展途上なので、完璧じゃないんですよね。

ブロックエディターは発展途上なのですね、ブロックエディターになってから使い始めたので知りませんでした。

上記もカスタマイズの追加CSSで確認したところ、ちゃんと青くなっていました!

※こちらも確認して今は外してます。

これも区切り線のコードと同じく、全部のテーブルが一括で青くなる感じでしょうか?

This post was modified 3年前 by erekireki

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

erekirekiさん

追加CSSではなく、該当投稿のカスタムCSSにコードを書いてみてください。

カスタムCSSに書いたコードは、該当投稿にしか適用されません。


   
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

@mk2_mk2様

カスタムCSSの存在を忘れていました。

適応したい記事の区切り線とテーブルに1つずつ当てていくしかないのですね…。

変えられることがわかっただけでも、嬉しいです。

ありがとうございます。


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

私は、ブロックエディターは使っていないので、えーと、区切りブロックでしたか?

 

区切りブロックに編集画面右下の高度な設定を開いて、「追加CSSクラス」を設定して、CSSのセレクタにすれば、ブロックごとに色や太さを変えることもできるかもしれません。

 

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

   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

erekirekiさん

はい、当てていくしかないです。

そう考えると、区切り線でなくても、上の要素にスタイルをあてても同じと思ってしまうんですよね。


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7099
 

リフィトリーさんの仰るとおり、区切りブロックにも、クラスの指定ができるようです。


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

そのページだけにCSSのコードを適用させたいときは、mk2さんのご案内のようにカスタムCSSに記述すればよいでしょうし、そのブロックだけに適用したいときは、追加CSSクラスにclassを設定して、セレクタに含めれば、そのブロックだけに適用されるかと思います。


   
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

mk2様 リフィトリー様

なるほど!クラス自体は作ったことはありませんが、おっしゃっている意味は分かります。

用途に合わせて、どちらかの方法で運用していきたいと思います。

遅くまでありがとうございました。


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

例えば、テーブルブロックに、「hyou-01」などの追加CSSクラスを設定して、以下のように記述して、適用箇所を絞るとか・・

.hyou-01 .scrollable-table th,
.hyou-01 .scrollable-table td {
    border: solid 1px blue;
}

   
返信引用
(@erekireki)
Active Member Registered
結合: 3年前
投稿: 8
Topic starter  

リフィトリー様

ありがとうございます !後から追加CSSクラスを設定してみます。

 


   
返信引用
共有:

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

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

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

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

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

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

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

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