サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年5月13日 09:56
対象のページの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バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:1
ホームイメージ:/wp-content/uploads/2020/07/9C7BE782-3A80-450A-BAE8-B2A5D01DA12E-e1595603152811.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
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
----------------------------------------------
2021年5月13日 13:50
erekirekiさん
ちょっと時間がありませんので、できるだけ簡単に。
区切り線についてですが、ちょっと難解かも知れません。
ピンク?赤?の区切り線を試しにテスト環境で引いてみました。
Chromeのデベロッパーツールで確認すると、ピンクのスタイルが一見当たっているように見えます。
上記はすべて、デベロッパーツール上の表示です。
しかし、通常の閲覧画面にすると、ただのグレーの線になってしまいました。
このページを同じChromiumのEdgeで表示しても、グレーでした。
ところがFirefoxで表示すると、色が出てきます。
区切り線(hrタグ)は少しややこし事情があるのかも知れません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr
何の解決にもなっておりませんが、ブラウザによって表示が変わる可能性があるということはお伝えできればと。
テーブルはすみません、ちょっと今時間がとれず未確認です。
わいひら reacted
2021年5月13日 16:43
erekirekiさん
何分今日は時間がありません。
お問い合わせいただく際は、どこのことかを画像等で示していただけると、大変助かります。
(どこに区切り線が使われているかを探さなくてはならず、見た目だけでは区切り線とは分からないもので。)
とりあえず、erekirekiさんのサイトの状態を貼り付けておきます。
ChromeとEdge
Firefox
つまり、区切り線については、スタイルは当たっていて、ブラウザによって差異が出るということかと。
区切り線の意味合いからすると、果たして今回の用途が正しいのかは分かりませんが。
別の方法にした方が良いと思います。
テーブルは時間がとれず、今のところ未確認です。
わいひら reacted
Topic starter
2021年5月13日 17:03
mk2様
ご確認ありがとうございました。
なるほど…ブラウザによって見え方が異なっているのですね。(こちらはずっとsafariで見てました。)
運営上、致命的ではないですが別の方法も検討すべきですね。
該当箇所の件は大変失礼しました。
最初に指定したURLの該当箇所(テーブル・区切り線)も、一応画像で送っておきます。
This post was modified 3年前 2回 by erekireki
2021年5月13日 21:45
確か、hrタグは、高さを指定するか、高さは指定せずに、border-topだけ、もしくは、border-bottomだけのどちらか一方の太さを指定したような気がするのですが・・
全然調べていません。
おぼろげな記憶・・
2021年5月13日 22:04
リフィトリーさん
はい、確か上下左右にborderがあったと思います。
しかも、立体的に見えるようにもなっていたと思いますので、リフィトリーさんが添付してくださった図のイメージだと思います。
ただ、HTML5で水平線の定義がなくなってしまい、ただの区切りの要素になったと思っています。
(でも、今のところ水平線で表示されるみたいですけど。)
2021年5月13日 22:13
全く調べていないので、合っているのかどうかわからないですが・・
.body hr.wp-block-separator { height: 2px; border: none; background-color: #fca49d; }
2021年5月13日 22:18
または、間違っているかもしれませんが・・
.body hr.wp-block-separator { border-bottom: 2px solid #fca49d; border-top: none; border-left: none; border-right: none; }
2021年5月13日 22:21
ただ、基本構造が、4辺のボーダーなので、理屈的にはうまく表示されるんじゃないかと思った訳です。
2021年5月13日 22:22
なんとなく思うのですが。。。
hrタグって、装飾用途では使わない方向で、ただの区切りでしかないのかな。。。と。
装飾用途であれば、上か下の要素のborderを指定するのかな、なんて思ってしまうのですが。
でも、hrタグだとmarginもデフォルトで指定されているので、便利なんですよね。
どういう使い方が正しいのか難しいです。
ブロックエディタで出てきますから、便利なら上手く使いたくなるのが人情かもしれませんね。
正解はない気がしてきました。
Topic starter
2021年5月13日 22:27
みなさんありがとうございます。
ちょっと、どれをどうしていいのか私には分からないので、区切り線をデフォルトで入っている赤に変えてみました。
safariだとやっぱり赤に変えても、灰色っぽいです。
2021年5月13日 22:32
erekirekiさん
その色をしばらくキープしていただくことは可能でしょうか。
他のブラウザでも確認してみたいです。
2021年5月13日 22:42
hrは、border:none; にして、height:2px;を足せばよいかもしれません。
テーブルの方は、セレクタでしょうか?
以下のような感じだと、どうでしょうか?
.scrollable-table th, .scrollable-table td { border: solid 1px blue; }
Topic starter
2021年5月13日 22:44
mk2様
ご確認ありがとうございます。
そちらの色ですね。やっぱり反映されてないですか…。
先ほどリフィトリー様から2回目に頂いたコードを追加CSSに入れた所、指定したかったピンク色になっていることを確認しました!ありがとうございます。
ただ、これを指定するとどの色をこの先選んでも、全部同じピンクになるという認識であってますでしょうか?
※確認だけして追加CSSは外してます。(編集画面上は赤です。)
2021年5月13日 22:48
私もテスト環境のサイトでhrのブロックを使ってみたことがあるのですが、どうも上手くいかずに、CSSのコードで装飾したような気がします。
WordPressのブロックエディターは、発展途上なので、完璧じゃないんですよね。
Topic starter
2021年5月13日 22:51
私もテスト環境のサイトでhrのブロックを使ってみたことがあるのですが、どうも上手くいかずに、CSSのコードで装飾したような気がします。
WordPressのブロックエディターは、発展途上なので、完璧じゃないんですよね。
ブロックエディターは発展途上なのですね、ブロックエディターになってから使い始めたので知りませんでした。
上記もカスタマイズの追加CSSで確認したところ、ちゃんと青くなっていました!
※こちらも確認して今は外してます。
これも区切り線のコードと同じく、全部のテーブルが一括で青くなる感じでしょうか?
This post was modified 3年前 by erekireki
2021年5月13日 22:52
erekirekiさん
追加CSSではなく、該当投稿のカスタムCSSにコードを書いてみてください。
カスタムCSSに書いたコードは、該当投稿にしか適用されません。
Topic starter
2021年5月13日 22:55
@mk2_mk2様
カスタムCSSの存在を忘れていました。
適応したい記事の区切り線とテーブルに1つずつ当てていくしかないのですね…。
変えられることがわかっただけでも、嬉しいです。
ありがとうございます。
2021年5月13日 22:57
私は、ブロックエディターは使っていないので、えーと、区切りブロックでしたか?
区切りブロックに編集画面右下の高度な設定を開いて、「追加CSSクラス」を設定して、CSSのセレクタにすれば、ブロックごとに色や太さを変えることもできるかもしれません。
This post was modified 3年前 2回 by リフィトリー
2021年5月13日 22:58
erekirekiさん
はい、当てていくしかないです。
そう考えると、区切り線でなくても、上の要素にスタイルをあてても同じと思ってしまうんですよね。
2021年5月13日 23:09
そのページだけにCSSのコードを適用させたいときは、mk2さんのご案内のようにカスタムCSSに記述すればよいでしょうし、そのブロックだけに適用したいときは、追加CSSクラスにclassを設定して、セレクタに含めれば、そのブロックだけに適用されるかと思います。
Topic starter
2021年5月13日 23:17
mk2様 リフィトリー様
なるほど!クラス自体は作ったことはありませんが、おっしゃっている意味は分かります。
用途に合わせて、どちらかの方法で運用していきたいと思います。
遅くまでありがとうございました。
リフィトリー reacted
2021年5月13日 23:18
例えば、テーブルブロックに、「hyou-01」などの追加CSSクラスを設定して、以下のように記述して、適用箇所を絞るとか・・
.hyou-01 .scrollable-table th, .hyou-01 .scrollable-table td { border: solid 1px blue; }
Topic starter
2021年5月14日 06:54
リフィトリー様
ありがとうございます !後から追加CSSクラスを設定してみます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。