サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年6月7日 21:23
fearpoorl2さん(@fearpoorl2)より、雑談トピックにお問い合わせがありましたので、こちらに転記させていただきます。
元トピック
https://wp-cocoon.com/community/postid/71178/
以下、お問い合わせ内容です。
はじめまして。ブログをcocoonで立ち上げ準備中です。
不具合・カスタマイズ対象ページのURL: https://jn-lifenote.com/「あああ」/
相談内容:
記事タイトルとアイキャッチの位置関係についてです。
使用しているスキンがbizarre-foods(ホワイトラーメン)で、アイキャッチ上にタイトルがあるような状況です。
それを解決したくで以下のコードをスタイルシートに貼りました。
header.article-header.entry-header {
text-align:center;
margin-bottom: 3em;
}
.article-header h1 {
position: static;
font-size: 1.4em;
color: #333333;
background-color:#fff;
line-height:1.8em;
text-shadow: none;
margin:0;
padding: 1.5em .95em 1.1em;
}
.eye-catch{
box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
height:auto!important;
-webkit-filter:none;
filter:none;
opacity:1;
transform: none;
}
a.cat-link, a.tag-link{
font-size:.7em;
border-radius:10px;
border:0;
margin:0.5em;
padding:0 0.5em 0;
background:#90C31F!important;/*タグ色の変更はこちら*/
color:#fff!important;
}
.cat-link:hover ,.tag-link:hover {
opacity: .5;
transition: all .3s ease-in-out;
}
.entry-categories-tags {
margin-bottom: 0.4em;
}
.date-tags{
font-size:1.2em;
color:#7b7b7b;
top:5px;
right:0;
left: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
div.date-tags span.post-update{
order: 1;
}
span.fas.fa-history::before{
content:"\f2f1"
}
div.date-tags span.post-update,div.date-tags span.post-date{
margin-right: 10px;
}
@media (max-width:1023px){
.entry-categories-tags.ctdt-one-row {
padding: 0;
}
}
@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
.date-tags{
top:3px;
}
}
@media (max-width:834px){
main.main, div.sidebar {
padding:0;
}}
@media screen and (min-width: 601px) and (max-width: 834px) {
div#content.content.cf{
margin:1em;
}}
レスポンシブでは、希望通りの形になっているのですが、PCサイズになると反映されていません。
写真は画面の幅を広くした時の写真です。
CSSをあまり理解できていないので、わかりやすく教えていただけると幸いです。
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:
----------------------------------------------
サイト名:JN LifeNote
サイトURL: https://jn-lifenote.com
ホームURL: https://jn-lifenote.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
スキン:/wp-content/themes/cocoon-master/skins/bizarre-foods-whiteramen/style.css
WordPressバージョン:6.2.2
PHPバージョン:8.2.4
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.0.3
カテゴリー数:12
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:7586バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:1
ホームイメージ: http://jn-lifenote.com/wp-content/uploads/2023/06/JN-LifeNote.png
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 5.1
Autoptimize 3.1.7
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
SiteGuard WP Plugin 1.7.5
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.3.4
----------------------------------------------
わいひら reacted
Topic starter
2023年6月7日 21:26
2つめの書き込みも転記させていただきます。
元トピックは以下です。
https://wp-cocoon.com/community/postid/71179/
これはモバイルサイズの幅にしたときの写真です。
2023年6月7日 21:27
mk2さん
転記感謝いたします。
2023年6月7日 21:29
【追記】
同様のことがH2以下の設定でも発生しました。
モバイルサイズでは希望通りだが、PC画面サイズでのみ反映されていない状況です。
Topic starter
2023年6月7日 21:57
fearpoorl2さん
こういうものは、検索した方が早いです。
もしくは書籍等でお調べいただいた方が良いかもしれません。
フォーラムでは、スペースの都合や表現の方法などもあります。
また、丁寧に説明しようとすればするほど、労力も必要です。
そんなもので、抽象的なものに対しては、お答えづらいことが多いです。
(無料のフォーラムですので。もちろん善意でお答えくださる方はいらっしゃるとは思います)
同様のことがH2以下の設定でも発生しました。
上記のような場合、ではh2に対してどのようなCSSをお書きになっているのかを調べることですよね。
すると、以下のようなものが見つかります。
@media (max-width:480px){ .article h2{ font-size:18px; padding:1.5em 1em 1.5em 0.5em; } .article h3{ font-weight:bold; font-size:17px!important; } .article h4, .article h5{ font-size:15px!important; } }
では、今度はこれはどういう意味か。
「@media (max-width:480px){」で検索してヒットした、1番最初のものをリンクします。
レスポンシブの基本、メディアクエリの書き方
https://sole-color-blog.com/blog/71/
これだけである程度、お分かりになるのではないでしょうか。
(ご自分が分からないものはコピーしない方が良いような気はします、メンテできなくなってしまうと思います)
では、しばらく席を外します。
【追記】
申し訳ないですが、アイキャッチの方は拝見しておりません。
私はちょっと時間的に難しいです。(晩御飯が遅れに遅れてしまい、これからなもので)
わいひら reacted
2023年6月7日 22:51
mk2さん
貴重なお時間を取らせてしまい申し訳ありません。
ご回答ありがとうございます。
リンク先を見て、レスポンシブについては理解できたかなと思います。
H1への記述同様にH2以下でも1023px以上の幅になると記述したコードが反映されていない状況です。
提示してもらったサイトを参考にすると記述コードはデスクトップファーストになっていると思いました。
@media(max-width:1023px)より上の記述はまずデスクトップで表示される時のコードになっているはずです。
それにも関わらず、1023px以上の幅では反映されず、それ以下で反映される原因が調べてみても分かりません。
以下にH2以下の記述コードを記載します。
/*********************************
* 本文記事見出し H2 H3 H4 H5
************************************/
.article h2:before {
background-image: none;
}
.article h2{
line-height:2;
background-color:#f6f6f6;
font-size: 24px;
color:#333333;
border-radius:1px;
border-left:solid 14px #636b64;/*H2の色の変更はこちら*/
padding:1em;
margin-top:70px;
margin-bottom:2em;
}
.article h3{
line-height:2;
font-size:20px;
border:none;
color:#333333;
border-radius:2px;
border-left:10px solid #8b968d;/*H3の色の変更はこちら*/
padding: 0.4em 0.8em;
margin-top:90px;
}
.article h3:before {
width: 0em;
}
.article h4{
line-height:2;
background-color:#F6F6F6;/*H4背景色の変更はこちら*/
font-size: 17px;
font-weight:normal;
color:#333333;
border-radius:1px;
padding:1.5em;
margin-top:1.5em;
margin-bottom:1.5em;
}
.article h5{
background: #F7F7F7;/*H5背景色の変更はこちら*/
font-size: 17px;
font-weight:normal;
line-height:2;
color:#333333;
border-bottom: none;
border-radius: 4px;
padding: 1.5em;
margin-left:0 auto;
border:1.5px dashed;
border-color:#93b69c;/*H5枠色の変更はこちら*/
margin-top:1.5em;
margin-bottom:1.5em;
}
@media (max-width:480px){
.article h2{
font-size:18px;
padding:1.5em 1em 1.5em 0.5em;
}
.article h3{
font-weight:bold;
font-size:17px!important;
}
.article h4, .article h5{
font-size:15px!important;
}
}
添付する画像は1023px以上のものです。ここから次の添付画像(1023px以下)のように変更させたいです。
ご教授いただけたら幸いです。
Topic starter
2023年6月7日 23:00
fearpoorl2さん
まずは、ご自分で、メディアクエリがどこにあるか確認しましょう。
(画面幅で違うということは、どこかのメディアクエリが原因のことがほとんどだと思います)
ぱっと見では、以下のメディアクエリの閉じ括弧がないように見えます。
そのため、それ以降は、全部1023px以下という感じに適用されているのかも・・・です。
(深くは見ていないです、ぱっと見です)
/************************************ **ヘッダー モバイル表示 ************************************/ @media (max-width:1023px){ .header-container { display:none; } img.site-logo-image{ max-height:35px; padding:2px 0 0 5px; box-shadow:none; } .mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/ background: #fff; }
正直、いろんなものを貼り付けなさったのかな・・・という印象です。
コードがごちゃごちゃで、とても見づらいです。
見出しだけでも、あちらこちら飛び飛びにコードがあって、探すだけで大変です。
見出しだけで、まとめておかないと、人間には厳しいと思います。
例えば上記が、以下のようにインデントされているだけでも、違うのですけど。(すると閉じ括弧がないもの分かり易い)
でも、飛び飛びでない方が良いと思います。
/************************************ **ヘッダー モバイル表示 ************************************/ @media (max-width:1023px){ .header-container { display:none; } img.site-logo-image{ max-height:35px; padding:2px 0 0 5px; box-shadow:none; } .mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/ background: #fff; }
わいひら reacted
Topic starter
2023年6月7日 23:09
すみませんが、私は今日は時間切れです。
(晩御飯も早々に切り上げてしまったので、のんびりします)
2023年6月7日 23:29
つまり、@media max-width(1023px)を見出しにして、その中でh1の設定、h2以下の設定、ヘッダーの設定などまとめるということでしょうか?
参考にしたサイトが、h1の設定、h2以下の設定など、それぞれの記事があり、その都度コードを貼り付けた次第です。
mk2さんのおっしゃることは何となく理解できた気がするのでコードをまとめてみて確認したいと思います。
長い時間ありがとうございました。
結果のご報告をするとともに、もしうまくいかなかった場合はお付き合いいただけると幸いです。
Topic starter
2023年6月7日 23:40
fearpoorl2さん
つまり、@media max-width(1023px)を見出しにして、その中でh1の設定、h2以下の設定、ヘッダーの設定などまとめるということでしょうか?
そうではないので、私の言ったことは無視してください。
これまででお分かりかと思いますが、フォーラムで文字だけでやりとりすることは、難しいんです。
なかなか伝わらないことが多いです。
(私が丁寧に対応していないこともあるでしょうが、他の作業もやりながらで、難しい部分もあります。すみませんが今はこれが限界だと思います。他の方をお待ちになっても良いかもです)
とりあえず、メディアクエリの閉じ括弧がない部分を解消しておくと良いと思います。
わいひら reacted
2023年6月7日 23:45
mk2さん
お忙しい中ありがとうございます。
閉じかっこの部分を確認してみます。
Topic starter
2023年6月8日 01:15
まだ対応なさっていないみたいですが・・・。
/************************************
**ヘッダー モバイル表示
************************************/
@media (max-width:1023px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
上記のメディアクエリではない・・・ということなんでしょうか?
(閉じ括弧"}"がないと思うのですが。但し、どこまでをメディアクエリで囲むのかは、当事者さんでないと分からないと思います。とりあえず、コメントのある範囲をご提示しました)
そして、メディアクエリって以下のような感じで書くイメージですが・・・。
@media screen and (max-width: 480px){
「screen」はなくても良いのかしら・・・と思わなくはないです。
省略値は「all」みたいですので、きくのでしょうけれど。
Topic starter
2023年6月8日 01:40
/************************************ **ヘッダー モバイル表示 ************************************/ @media (max-width:1023px){ !!!!ここのメディアクエリの閉じ括弧"]"がないように思える(その結果これ以降の記述は、メディアクエリ内) .header-container { display:none; } img.site-logo-image{ max-height:35px; padding:2px 0 0 5px; box-shadow:none; } .mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/ background: #fff; } /************************************ **モバイルスライドインメニュー ************************************/ span.fas.fa-times::before{ font-family: "Font Awesome 5 Free"; content: "\f060"; /*矢印色変更はこちら*/ } ul.menu-drawer:before{ font-size:1.2em; background: white; color:#333; margin-bottom:1em; border-bottom:3px dotted ; /*点線の色変更はこちら*/ content: "メニュー"; } ul.menu-drawer:after { background: white; } .menu-drawer li { padding:0; } .menu-drawer li{ font-weight: bold; } .menu-drawer a{ font-size:1.3em; background-color:#ffffff; color:#545454; margin: .5em 0; } .menu-drawer a:hover{ background-color:#f7f7f7; } .menu-drawer .sub-menu { padding:0; } .menu-drawer .sub-menu li{ font-size: .9em; } .menu-drawer .sub-menu li a::before { font-family: "Font Awesome 5 Free"; content : "\f105"; color:#7b7b7b; margin:0 .5em 0 1em; } /********************************* * ヘッダーメニュー ************************************/ .navi-in > ul{/*メニューを中央に配置する場合は4~7行目を削除してください*/ justify-content:flex-start; } .navi-in>ul li { line-height: 40px; height: 40px; } .navi-in a{ font-size:15px; } #navi .navi-in a:hover { transform: none!important; } .navi-in > ul .sub-menu a { padding: 0; } .navi-in > ul .sub-menu{ box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26); } .sub-menu .caption-wrap { color:#333;/*サブメニューの文字色*/ border-top: dotted #dddddd; background:#fff;/*サブメニューの背景色*/ padding:0 0 0 2em; margin:0; } .navi-in > ul .sub-menu a:hover { transform: none!important; } div#header-container { box-shadow: none; } div.item-label{ font-weight:bold; } /********************************* * おすすめカード ************************************/ 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{ transition: all .2s; } .widget-entry-cards .a-wrap:hover { transform: translateY(-1px); transition: all .2s; } 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{ border-radius:10px!important; margin:1em .5em; /*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{ 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; } .body .navi-entry-cards{ margin-bottom: 0; } /********************************* * 本文記事タイトル H1 ************************************/ header.article-header.entry-header { text-align:center; margin-bottom: 3em; } .article-header h1 { position: static; font-size: 1.4em; color: #333333; background-color:#fff; line-height:1.8em; text-shadow: none; margin:0; padding: 1.5em .95em 1.1em; } .eye-catch{ box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2); } .eye-catch img{ height:auto!important; -webkit-filter:none; filter:none; opacity:1; transform: none; } a.cat-link, a.tag-link{ font-size:.7em; border-radius:10px; border:0; margin:0.5em; padding:0 0.5em 0; background:#333333!important;/*タグ色の変更はこちら*/ color:#fff!important; } .cat-link:hover ,.tag-link:hover { opacity: .5; transition: all .3s ease-in-out; } .entry-categories-tags { margin-bottom: 0.4em; } .date-tags{ font-size:1.2em; color:#7b7b7b; top:5px; right:0; left: 0; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } div.date-tags span.post-update{ order: 1; } span.fas.fa-history::before{ content:"\f2f1" } div.date-tags span.post-update,div.date-tags span.post-date{ margin-right: 10px; } /********************************* * 本文記事見出し H2 H3 H4 H5 ************************************/ .article h2:before { background-image: none; } .article h2{ line-height:2; background-color:#f6f6f6; font-size: 24px; color:#333333; border-radius:1px; border-left:solid 14px #636b64;/*H2の色の変更はこちら*/ padding:1em; margin-top:70px; margin-bottom:2em; } .article h3{ line-height:2; font-size:20px; border:none; color:#333333; border-radius:2px; border-left:10px solid #8b968d;/*H3の色の変更はこちら*/ padding: 0.4em 0.8em; margin-top:90px; } .article h3:before { width: 0em; } .article h4{ line-height:2; background-color:#F6F6F6;/*H4背景色の変更はこちら*/ font-size: 17px; font-weight:normal; color:#333333; border-radius:1px; padding:1.5em; margin-top:1.5em; margin-bottom:1.5em; } .article h5{ background: #F7F7F7;/*H5背景色の変更はこちら*/ font-size: 17px; font-weight:normal; line-height:2; color:#333333; border-bottom: none; border-radius: 4px; padding: 1.5em; margin-left:0 auto; border:1.5px dashed; border-color:#93b69c;/*H5枠色の変更はこちら*/ margin-top:1.5em; margin-bottom:1.5em; } @media (max-width:480px){ .article h2{ font-size:18px; padding:1.5em 1em 1.5em 0.5em; } .article h3{ font-weight:bold; font-size:17px!important; } .article h4, .article h5{ font-size:15px!important; } } /********************************* * リスト ************************************/
上記最初のメディアクエリに閉じ括弧"]"がないように思えます。
(ぱっと見ですので、間違っていたら教えてください)
そのため、それ以降はメディアクエリ内に記述されていることになります。
今回懸案の見出しh2~h5については、上記のように、当該メディアクエリよりもかなり後ろに記述があり、閉じ括弧がそれまでになければ、メディアクエリ内として、扱われると思います。
結果的に、以下のように、メディアクエリ内にあるものとして適用されています。
上記のように書けば伝わりますでしょうか。
では、もう寝ます。
見出しの件だけで、これだけ掛かるとなると・・・💧
(説明下手なのでここまでで)
(説明下手なのでここまでで)
わいひら reacted
Topic starter
2023年6月8日 02:10
2023年6月8日 06:32
mk2さん
解決いたしました!
おっしゃる通り、閉じかっこを追加したら対応しました。
お付き合いいただき、本当に感謝します!ありがとうございました!
Topic starter
2023年6月8日 06:50
fearpoorl2さん
解決したなら良かったです。
ちなみにアイキャッチの方も解決したのでしょうか?
(私は只今スマホですので、確認できません)
今回のように、PCとモバイルで表示が違う場合は、メディアクエリの可能性が極めて高いと思います。
まずはそこのチェックが基本だと思います。
そして、CSSについては、解説サイトが多数あります。
まずは検索が基本です。
そして細かいことをいうようで、恐縮ですが・・・。
フォーラム上部の案内にリンクもありますが、今回のケースは、サポート対象外のケースのように思います。
サポート対象外のもの
https://wp-cocoon.com/not-supported/
上記の「自前で行ったカスタマイズによる不具合対応」に該当すると思います。
それでも返信くださる方もいらっしゃいます。
ただ、その場合にも、できれば「質問」に対して、こうですと「答え」を1回書くだけで済むように、お問い合わせをしていただけると、助かります。
これだけトピックが長くなるのは、回答側の負荷としても、厳しいです。
ご考慮いただけますと助かります。
フォーラム上部の案内については、事前にご確認をお願い致します。
わいひら reacted
2023年6月8日 07:25
mk2さん
ご指摘の通りだと思います。
次回以降、質問があれば注意して投稿します。
本当にありがとうございました。
Topic starter
2023年6月8日 07:56
fearpoorl2さん
すみません。
アイキャッチの方も解決ということで、よろしいでしょうか。
(または、未解決だけどメディアクエリの確認で大丈夫そう。)
私は只今スマホですので、確認ができないもので。(解決していれば、このトピックをクローズさせていただければと思います)
わいひら reacted
Topic starter
2023年6月8日 08:25
fearpoorl2さん
ご連絡ありがとうございます。
それでは、クローズさせていただきます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。