サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
03/06/2018 1:31 am
はじめましてライトニングと申します
今度ブログのテーマをCocoonに変更しようと思い現在別サイトでテストしています。
スキンで記事上のアイキャッチを中心表示（さらにラベルも追従）しようとクラス(eye-catch)のdisplay要素を変更した場合、Cocoon設定の画像タグで非表示に設定しても消せなくなりました。
テストサイト： http://test.ensyutsubu.com/blog/5
調べたところ、非表示設定の仕様がfigureタグにdisplay-noneクラスが追加される事で表現されているのですが、スキンのCSSでeye-catchクラスの方が優先され、消えないことがわかりました。
それで要望なのですが、このアイキャッチ、非表示設定の場合、（無駄な出力を抑えて高速化する事も踏まえて）出力自体をしないことにはならないでしょうか？
スキンCSSでdisplay:noneしても良いですが汎用性を考え、設定でON／OFFできた方が良いかと思っております。
子要素のimgを中央化しても良いのですが、それだとラベル（cat-label）の位置がサイズ未定の画像に合わせて位置を調整することが（私の知識では）できず困っております。
わかりにくい表現になってしまっているかも知れません すみません
----------------------------------------------
サイト名：勝手にライトニング！テストサイト
サイトURL： http://test.ensyutsubu.com/blog
ホームURL： http://test.ensyutsubu.com/blog
コンテンツURL： http://test.ensyutsubu.com/blog/wp-content
インクルードURL： http://test.ensyutsubu.com/blog/wp-includes/
テンプレートURL： http://test.ensyutsubu.com/blog/wp-content/themes/cocoon-master
スタイルシートURL： http://test.ensyutsubu.com/blog/wp-content/themes/cocoon-child-master
Wordpressバージョン：4.9.6
PHPバージョン：7.0.18
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：0.6.5
カテゴリ数：5
タグ数：3
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.0.7
List category posts 0.76.1
Post Snippets 3.0.5
WordPress Importer 0.6.4
WP-DBManager 2.79.1
WP Multibyte Patch 2.8.1
----------------------------------------------
03/06/2018 5:15 pm
調べたところ、非表示設定の仕様がfigureタグにdisplay-noneクラスが追加される事で表現されているのですが、スキンのCSSでeye-catchクラスの方が優先され、消えないことがわかりました。
自作のスキンを利用されてるんですね。
display: none;はスキンのCSSが優先されているのではなく、スキンのdisplay: table;で上書きしている状態です。
.eye-catch {
display: table;
margin: 0 auto 16px;
}
おそらくセンタリングをしたいのかと思うので、この記載を削除して以下を追記すればOKぽいです。
.eye-catch img {
margin: 0 auto 16px;
}
04/06/2018 9:50 am
さらにラベルをleftで調整しても良いですが、親要素基準（.eye-catch）なので画像幅が固定でない場合難しい状態です。
その辺りがいまいちどのような状況か把握しておりませんってか、ローカルで確認できてませんで＞＜
わいひらさんがイイネ！と思えば実装してくれると思います。そうでない時用で、コチラの都合で書き込んでおきますね＾＾； ※どうなるか不明なので
Cocoon: content.php (tmp/content.php)
の（現バージョン）39行目get_template_part('tmp/eye-catch');をコメントアウトすれば表示されないはずです。
<?php //アイキャッチ挿入
//get_template_part('tmp/eye-catch'); ?>
tmpフォルダ内に親テーマcontent.phpを入れて、コメントアウト。それから子テーマフォルダ内にアップロードする感じです。
わいひらさんの返事次第なのでお待ちいただくか、ローカル環境のようなので試しにやって開発を進めてみるのもいいかもしれません？
04/06/2018 3:32 pm
CSSだけで解決できるのでしょうか？？？
試してませんが、おそらくCSSだけでもイケると思います。冒頭の回答に書いたようにスキンもCSSでdisplay:noneとなっているので、ラベルも非表示になるのですが…。※Cocoon設定－画像より設定し、スキンの以下項目を削除すれば。
display: none;はスキンのCSSが優先されているのではなく、スキンのdisplay: table;で上書きしている状態です。
なにか話が食い違ってきてる可能性もあるので？一旦お待ちいただいてから、もしcssが不明でしたらその件では新規トピックを。と思います。※同じ悩みがある人に欲しい情報が届きやすくなるので。
04/06/2018 7:38 pm
アイキャッチをCSSで非表示にしているのは理由があって、添付画像のarticle構造化データのimageに画像を指定するため、利用しています。
※CSSで非表示になっていても構造化データでは反映されます。
アイキャッチ情報をPHPで削除してしまうと、構造化エラーもしくは警告が出るので、こういった仕様にしています。
.eye-catchのCSSを変更して、表示されてしまうのであれば、以下のようにID等を使って明示的にCSSセレクタの優先度を上げて非表示にしてやるという手があります。
#main .eye-catch.display-none {
display: none;
}
これだと優先度が確か0.1.2.0になるので、優先度がぐんと上がり優先的に適用されます。
ちなみに.eye-catchだけだと優先度は0.0.1.0なので、先程のものと比較して優先度が低いことがわかると思います（CSSセレクタ優先度の比較は、ソフトのバージョン情報の大きさをはかる感覚で良いかと思います）。
参考情報： https://nelog.jp/specificity-calculator
詳しくは「CSS 優先度」などで検索してみてください。
Topic starter
04/06/2018 9:59 pm
かうたっく ご検討頂きありがとうございます。
わいひらさん
なるほど！理解しました。そして勉強になりました。
そして ご提示頂いたやり方で Cocoon設定の.display-noneの優先度が上がり目標が達成できました。つくづく自分の知識不足を反省するばかり……
スキンが公開できるよう良いものを作りたいと思います。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。