サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年12月25日 15:22
ヘッダーのプレビューではメニューが表示されているのに、トップ画面を表示すると消えている
また、サイドバーにYouTubeチャンネルを表示させていたのですがされなくなりました。
CSSの設定を追加したり、削除していたりしていて、このようになりましたが、どこを修正したら良いのかがわかりません。
試しにここに貼り付けてみます
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** 比較表
************************************/
/* 比較表全体 */
.compare-box {
display:-webkit-box;/* 配置 */
display:-ms-flexbox;/* 配置 */
display:flex;/* 配置 */
max-width:600px;/* 横幅 */
margin: 0 auto 2rem;/* 余白 */
border-radius:4px;/* 角丸 */
box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
background: #fef9ed; /* 背景色 */
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, .compare-box .compare-right-wrap{
width:50%;/* 横幅半分ずつ */
overflow:hidden;/* はみ出さないように*/
}
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
background: #fdc44f; /* 背景色 */
text-align: center;/* 中央寄せ */
color: #FFF; /* 文字色 */
font-weight: bold;/* 文字太さ */
padding:0em 1em;/* 余白 */
font-size:15px;/* 文字大きさ */
line-height:1.5;/* 行間 */
height:65px;/* 縦幅 */
display:table-cell;/* 形式 */
vertical-align:middle;/* 高さ中央寄せ */
width:1000px;/* 横幅 */
}
/* 左のタイトル */
.compare-box .compare-left-head{
border-radius:4px 0 0 0;/* 角丸 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
border-radius:0 4px 0 0;/* 角丸 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{
padding:1.5em;/* 余白 */
font-size:15px;/* 文字大きさ */
line-height:2;/* 行間 */
text-align: justify;/* 段落両端 */
text-justify: inter-ideograph;/* 段落両端 */
}
/* 文章 */
.compare-box p {
padding: 0;/* 余白 */
margin: 0 0 20px 0;/* 余白 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
font-size:12px;/* 文字大きさ */
height:50px;/* 高さ */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right {
padding: 1.2em;/* 余白 */
font-size: 12px;/* 文字大きさ */
}
/************************************
** 比較表 箇条書き(記号)
************************************/
/* 箇条書き(記号) */
.compare-box .list{
list-style: none !important;/* 行頭記号リセット */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き 行 */
.compare-box .list li {
border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類 色) */
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px;/* 横幅 */
padding: 0 0 0.7em 1.4em !important;/* 余白 */
line-height:1.8;/* 行間 */
}
/* 箇条書き 行最後 */
.compare-box .list li:last-child{
border:none;
}
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
background-color: #ffa952; /* 色 */
position: absolute;/* 配置 */
content: '';/* 空文字 */
top: 10px;/* 上からの距離 */
left: 7px;/* 下からの距離 */
width: 7px;/* 横幅 */
height: 7px;/* 縦幅 */
border-radius: 4px;/* 角丸 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
top: 9px;/* 上からの距離 */
left: 3px;/* 下からの距離 */
width:5px;/* 横幅 */
height:5px;/* 縦幅 */
}
}
/************************************
** 比較表 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.compare-box .list-number{
counter-reset:number; /* 番号リセット */
list-style: none !important;/* 行頭番号削除) */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.compare-box .list-number li {
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px; /* 横幅 */
padding: 0 0 0.5em 1.8em !important;/* 余白 */
line-height:1.8;/* 行間 */
border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類 色) */
}
/* 箇条書き 行最後 */
.compare-box .list-number li:last-child{
border:none;
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
counter-increment: number;/* 番号 */
content: counter(number);/* 番号 */
background-color: #fdc44f; /* 背景色 */
color: #fff; /* 番号色 */
position: absolute;/* 配置 */
font-weight:bold;/* 文字太さ */
font-size: 12px;/* 文字大きさ */
border-radius: 50%;/* 角丸 */
left: 0;/* 左からの距離 */
top:5px;/* 上からの距離 */
width: 18px;/* 横幅 */
height: 18px;/* 縦幅 */
line-height: 18px;/* 行間 */
text-align:center;/* 中央寄せ */
}
/* 箇条書き 行頭記号リセット */
.compare-box .list-number li:after{
content:'';
}
/*スマホで見た時*/
@media screen and (max-width: 480px){
/* 箇条書き(番号) 行 */
.compare-box .list-number li{
padding: 0 0 0.5em 1.8em !important;/* 余白 */
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
font-size:10px;/* 文字大きさ */
width: 16px;/* 横幅 */
height: 16px;/* 縦幅 */
line-height: 16px;/* 行間 */
top:2px;/* 上からの距離 */
}
/************************************
** プロフィール-サイドバー
*********************************/
/*********************************
** 目次
************************************/
/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}
/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}
/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}
/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}
/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}
/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #ffffff; /* 文字色 */
font-size: 2.0em; /* 文字サイズ */
background-color: #3cb371; /* 背景色 */
padding-top:20px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:20px;/* 文字と下部の間隔 */
border-left: solid 10px #008000; /* 左側に実線・色*/
}
/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #008000; /* 左側に実線・色*/
}
/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
padding: 10px;
border-top: solid 3px #008000;/* 上側に実線・色 */
border-bottom: solid 3px #008000;/* 下側に実線・色*/
}
/* H5 */
.entry-content h5{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 10px;
border-bottom: dotted 3px #008000;/* 下側に点線・色*/
}
/* H6 */
.entry-content h6{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 5px;
border-left: solid 7px #008000; /* 左側に実線・色*/
}
/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード上にスキマをつくる*/
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード左右にスキマをつくる*/
padding:0 2em;
}}
div#content.content.cf{/*メインカラムの上５ミリ、おすすめカードの↓*/
margin-top:0;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
border-radius:10px!important;
margin:1em .5em;
background-color:#EFF1F5;/*Cocoon設定の「サイト背景色」に合わせる*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{/*高さ上限設定*/
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{/*おすすめカードサイドにスキマをつくる*/
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
.entry-content {
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
}
2021年12月25日 16:31
前略、fumifumiさん
CSSを記述するときは、記述の仕方に規則性を持たせて、誰が見てもわかりやすいように書いておくと、自分でも読みやすくなるような気がします。
例えば73行目あたりのメディアクエリの閉じ括弧が見当たらないようですが、以下のようにメディアクエリの内側はインデントを付けて記述し、メディアクエリの閉じ括弧にコメントを付けておくと、間違って消してしまうのを防ぐことができるかもしれません。
散らかした自分の部屋の整頓を他人にはあまり依頼しづらいですので。
@media screen and (max-width: 480px){
.compare-box .compare-left-head,
.compare-box .compare-right-head {/* 左のタイトル、右のタイトル */
font-size:12px;/* 文字大きさ */
height:50px;/* 高さ */
}
.compare-box .compare-left,
.compare-box .compare-right {/* 左のコンテンツ、右のコンテンツ */
padding: 1.2em;/* 余白 */
font-size: 12px;/* 文字大きさ */
}
}/*画面幅480px以下ここまで*/
この投稿は3年前ずつリフィトリーに変更されました
わいひら reacted
トピックスターター 2021年12月25日 17:13
リフィトリーさん
ご指摘ありがとうございます。
素人すぎて大変申し訳ありません。
色々な方の記述を見て、コピペをしている状況でして、本日も構成を変えたつもりですが反映されず
その記述した箇所を削除したりしていると、トップに表示していたメニューが表示されなくなり、サイドスクロールバーに反映させていたYouTubeも表示されなくなりました。
元に戻したくても、戻す方法も見つからず、子テーマを入れ替えて一からやり直そうにも、やはりやり方がわからない状態で、こちらに質問を行った次第です。
素人でよくあるんと思いますが、わからない事がわからないんです。
うまく説明できず申し訳ありません。
2021年12月25日 17:42
@fumifumi さん
実際のURLをご提示いただくと、デベロッパーツールなどで調べることはできるかと思います。
だからといって、必ず解決するとは限りませんが、先ずはそこからのような気がします。
Cocoonの高速化設定は無効化し、キャッシュ系のプラグインは停止して、環境情報を貼り付けていただくと何か解決のヒントが得られるかもしれません。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
わいひら reacted
トピックスターター 2021年12月25日 17:48
リフィトリーさん
丁寧に対応くださりありがとうございます。
高速化を停止し、環境を貼り付けさせていただきます。
何かわかれば嬉しいです。
よろしくお願いいたします。
---------------------------------------------- サイト名：Grön blog サイトURL： https://gr-on.com ホームURL： https://gr-on.com コンテンツ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.8.2 PHPバージョン：7.4.27 ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 サーバーソフト：LiteSpeed サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7 ---------------------------------------------- テーマ名：Cocoon バージョン：2.3.8 カテゴリ数：9 タグ数：559 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.3 style.cssサイズ：10631バイト functions.phpサイズ：259バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：5 Auto Post Thumbnail：1 Retina：1 ホームイメージ： https://gron.flier.jp/wp-content/uploads/2021/06/cache_Messagep74121-1.jpg ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：1 CSS縮小化：1 JavaScript縮小化：1 Lazy Load：1 WEBフォントLazy Load：0 ---------------------------------------------- 利用中のプラグイン： AddQuicktag 2.6.1 Akismet Anti-Spam 4.2.1 Category Order and Taxonomy Terms Order 1.5.9 Contact Form 7 5.5.3 Imagify 1.10 Invisible reCaptcha 1.2.3 Jetpack 10.4 Jetpack Boost 1.3.1 LiteSpeed Cache 4.4.5 Revision Control 2.3.2 Site Kit by Google 1.48.1 Table of Contents Plus 2106 XML Sitemaps 4.1.1 YouTube Channel 3.0.12.1
2021年12月25日 17:50
@fumifumiさん
よく見ると、CSSの記述の174行目のメディアクエリの閉じ括弧もありませんね。
メディアクエリの閉じ括弧が２か所も抜けていたら、表示が崩れる可能性は高いです。
先ずは、そのあたりから修正すると良いかと思うのですが、そもそもCSSのメディアクエリの書き方の理解が必要かもしれません。
レスポンシブの基本、メディアクエリの書き方
https://sole-color-blog.com/blog/71/
わいひら reacted
2021年12月25日 17:55
@fumifumi さん
高速化設定は無効化していただく方が良いです。
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
プラグインの「LiteSpeed Cache」は、解決するまでは停止しておいた方が良いです。
トピックスターター 2021年12月25日 19:30
リフィトリーさん
ありがとうございます。
現在、一つ一つ、教えていただきました箇所見直しております。
トピックスターター 2021年12月25日 19:35
リフィトリーさん
lazy loadこれをオフにしたら、YouTubeが復活しました。
また、メニュー表示も復活しました。
つまり、どう言う事なんでしょうか？
トピックスターター 2021年12月25日 19:40
リフィトリーさん
メディアクエリの書き方の理解を、リンクを読み込みます
ありがとうございます
2021年12月25日 19:41
@fumifumi さん
前述しましたように、私はプラグインの「Jetpack」は１度も使ったことがないため、よくわかりません。
確か、WordPresss5.5辺りから、画像の lazy load 機能はWordPresss自体に標準で実装されていたと思います。
ですので、もしかしたら、機能の重複で不具合が生じたのかもしれません。
（あと、書き忘れてしまいそうなので）WordPressを日本語環境で利用する場合は、プラグインの「WP Multibyte Patch」のインストールは必須なんだそうです。
インストールしておいた方が無難かもしれません。
わいひら reacted
トピックスターター 2021年12月25日 19:49
リフィトリーさん
丁寧な回答ありがとうございます。
実は、確かにWP Multibyte Patchを入れていたのですが、不要なプラグインかなと思い今朝削除をしたのを
思い出しました。
この辺り、色々と影響が出ているのかもしれないですね。
ありがとおうございます。
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。