サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年8月2日 19:07
わいひらさま、みなさまお世話になります。
先日こちらの記事（トピック）でトップページのカスタマイズを教えていただき、うまく反映されたのですが、
#navi_entries-4というコードがどのような命令か気になってしまい、調べたのですがよく分からずこちらの雑談のほうでお聞きしてみました。
リフィトリーさま、もしくは他の方でもお分かりになれば教えて頂きたいです。
宜しくお願いします。
2020年8月2日 20:56
リフィトリー様昨日はありがとうございました。
ウィジェットは一度誤って削除してしまい、今は再度設定しています。
その後コードが効いていないようなので、試しにその前に教えて頂いたコード（entries-4が無いもの）を入れてみたらメインもサイドも崩れずに並んでいたので、entries-4の命令ってどういう効果があるのかな〜とふと思った次第です。
2020年8月2日 21:16
@ann さん
それなら、良かったです。
おそらく、ウィジェットを設定したときに、そのうウィジェットに固有のIDが割り振られるのではないかと思います。（この辺りのことは、わいひらさんに確認しないと、私はよくわからないのですが・・）
実は、前のトピックで、補足事項として、書きこむつもりでいたのですが、トピックが閉じてしまったため、書きこむことができなかったのです。
Webサイトの構造は、マトリョーシカのように、親コンテナの中に小コンテナ、小コンテナの中に孫コンテナ、というように、親子関係の構造になっています。
CSSで、子や孫にスタイルを指定すると、よその親の子や孫にも同じスタイルが適用されてしまうので、最初に親の名前を書いてから、子や孫の名前を書く、と、他の親の子や孫には適用されない、という訳です。
今回は、ナビカードウィジェットを再設定したために、親の名前が変わってしまい、適用されない状態になってしまったという訳です。
ですので、「#navi_entries-4」を「#navi_entries-7」に変えていただければ、また、CSSがその親の中だけに適用されるはずです。
これは、ブラウザのデベロッパーツールで簡単に調べることができます。
This post was modified 4年前 2回 by リフィトリー
わいひら reacted
2020年8月2日 21:33
なるほど！めちゃくちゃ例えが分かりやすいです。
画像添付もありがとうございます。
（補足の件すみませんでした、私もすぐ解決済みにしてしまったので）
ちなみに当初のcss（entries無しの）を入れた時は、サイドバーに設置したナビカードの文字が縦一列に崩れてしまったのに、今は同じものを入れてもサイドバーのナビカードはキレイに二列に並んでいるのは何故でしょうか？
それと他の方がトップページカスタマイズの記事を試す場合は、固有のidはそれぞれの物でないと効果は無いですよね？補足が書き込めればいいのですが…
2020年8月2日 22:05
サイドバーのナビカードはトップページ以外に貼っています。
ちょっと狭いですが表示も崩れることなく並んでいます。
補足はわいひらさんに貼ってもらえれば、助かります。
2020年8月2日 22:09
@ann さん
サイドバーのナビカードはトップページ以外に貼っています。
ちょっと狭いですが表示も崩れることなく並んでいます。
デフォルトのナビカードの並びは１列です。
なので、２列になっている方がおかしいのです。
2020年8月2日 22:15
@ann さん
このような親子関係のCSSのセレクタは、「子孫セレクタ」と呼ばれています。
記述するときは、それぞれのセレクタを半角スペースで区切って記述します。
それに対して、「複数セレクタ」という書き方もあり、こちらは、半角スペースを空けずにつなげて書きます。
この「複数セレクタ」は、AとBの両方のセレクタが一つのHTMLのタグに記述されている場合にに適用されます。
今回のコードは、これらを組み合わせています。
/*ナビカードウィジェットメインカラム設置２列表示*/
#navi_entries-7 .navi-entry-cards.widget-entry-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#navi_entries-7 .navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 48%;
}
@media screen and (max-width:356px) {
#navi_entries-7 .navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}
/*ナビカードウィジェットのタイトルを中央に*/
#navi_entries-7 .widget-index-top-title.main-widget-label {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
2020年8月2日 23:06
cssの記述、自分でも書いてみましたが、難しいです。貼っていただいたリンクを見てみます。
サイドバーが二列になっている方が変なんですね。メインカラムの命令が効いているのでしょうか…。
時間があるときにでも自分で触って確かめてみようと思います^^;
リフィトリー様、分かりやすいご説明ありがとうございましたm(__)m
リフィトリー reacted
2020年8月3日 00:01
@ann さん
サイドバーが二列になっている方が変なんですね。メインカラムの命令が効いているのでしょうか…。
おそらく、そうだと思います。
時間があるときにでも自分で触って確かめてみようと思います^^;
ですね。
テキストエディターを適正に設定して、ケアレスミスのないように、やってみてください。（といいつつ私もミスばかりですけど・・）
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。