サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年9月25日 01:05
対象のページのURL： https://oishikutanoshimu.com/
相談内容：見出しデザインが変えられません
解決のために試したこと：CSSをコピぺすればデザインが変更できるものの頭をarticleに変更・キャッシュの削除・PCの再起動
以下CSSです。追加CSSでなくスタイルシートより変更しました
/*見出し初期化*/
.article h1 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h2 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h4 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h5 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
.article h6 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
環境情報：
---------------------------------------------- サイト名：WAONBLOG サイトURL： https://oishikutanoshimu.com ホームURL： https://oishikutanoshimu.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/skin-modernblack/style.css WordPressバージョン：5.8.1 PHPバージョン：7.4.13 ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7 ---------------------------------------------- テーマ名：Cocoon バージョン：2.3.6.1 カテゴリ数：8 タグ数：7 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：2341バイト functions.phpサイズ：262バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：1 ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：1 WEBフォントLazy Load：0 ---------------------------------------------- 利用中のプラグイン： Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0 Akismet Anti-Spam 4.1.12 BackWPup 3.10.0 Classic Editor 1.6.2 Contact Form 7 5.4.2 Insert Headers and Footers 1.6.0 Table of Contents Plus 2106 Word Balloon 4.18.2 ----------------------------------------------
2021年9月25日 01:15
WAONさん
以下の部分に閉じ括弧が足りないのだと思われます。
/*834px以下*/
@media screen and (max-width: 834px){
.ff-yu-gothic {
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic"
/*必要ならばここにコードを書く*/
}
結果的に、全部834px以下に適用されているのだと思われます。
試しに、モバイル表示してみると、適用されている感じがします。
2021年9月25日 01:18
ちなみに以下は、実際に不具合の発生しているページのURLを記載してください。
対象のページのURL： https://oishikutanoshimu.com/
トップページに見出しはないように思います。
回答者側が、実際に不具合の発生しているページを探すのは難しいです。
管理者さんには分かるのでしょうけど、初見でどこに見出しがあるのか探すのは、時間が掛かってしまいます。
（場合によっては諦めます。できれば、投稿ページのどこかも画像などでおしえていただきたいです。）
結果的に、解決に時間が掛かり、ご質問者さんにとっても利益にならないと思います。
トピックスターター 2021年9月25日 18:35
@mk2_mk2 様、お返事・ご指導ありがとうございます
慣れないことを調べて回っていたため頭がパンクしていました。記事が編集中・未公開なため他の方から見られない状態だということを失念していました。
貴重なお時間ありがとうございました
2021年9月25日 19:05
WAONさん
そういうものだと思います。
分からなくにって頭が真っ白になってしまうと。。。ですよね。
私も経験あります。
次からご注意いただけると、助かります。
ちなみにですが。。。
今現在、ちょっと良く分からないことになっている様子です。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.ff-yu-gothic {
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic"
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.ff-yu-gothic {
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic"
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.ff-yu-gothic {
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic"
/*必要ならばここにコードを書く*/
}
一時的なものであれば良いのですが。。。
この「font-family」の指定は必要なものなのか、ご検討いただくのが良い気はします。
もし、必要なものであれば、この書き方であれば、1023px以下のメディアクエリに1つあれば十分です。
そして、各メディアクエリに、閉じ括弧が足りないです。
開き括弧"{"が2つあるのに対して、閉じ括弧"}"は1つしかないです。
まだ編集途中の一時的な状態。。。であれば良いのですが。
不明点があれば、再度ご質問ください。
2021年9月25日 19:07
WAONさん
編集途中ですね。
今度は以下のような状態です。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
.ff-yu-gothic {
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic"
今度は、font-family指定のところに閉じ括弧"}"がないです。
.ff-yu-gothic {
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic"
上記の部分です。
編集途中であれば、あまり言っても。。。と思いますので、これで一旦おしまいにしておきます。
わいひら reacted
トピックスターター 2021年9月28日 04:54
@mk2_mk2様、色々勉強させていただきました。ありがとうございました。
もろもろいじってみたところどうやらcocoonのスキンが悪さをしていました笑
解決できたのが嬉しくて書き込ませていただきました笑
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。