サイト内検索
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
2022年9月2日 09:47
不具合・カスタマイズ対象ページのURL: https://a-road-to-freedom.com/
相談内容:テーマ更新に伴いトップページのブログタイトルが大きくなりすぎる
解決のために試したこと:
Google等で調べたり、
トップページのカスタマイズをお願いした方と連絡が取れなかったため、質問しました。
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:
※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
----------------------------------------------
サイト名:くり部/仮想通貨カレッジ
サイトURL: https://a-road-to-freedom.com
ホームURL: https://a-road-to-freedom.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-season-spring/style.css
WordPressバージョン:6.0.2
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (iPad; CPU OS 15_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/104.0.5112.99 Mobile/15E148 Safari/604.1
サーバーソフト:Apache
サーバープロトコル:HTTP/1.0
エンコーディング:none
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.4.8.3
カテゴリ数:19
タグ数:138
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:5863バイト
functions.phpサイズ:467バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2022/05/F5CD01B5-CE8F-4874-A2F2-416F3278AEC1.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 5.0
BackWPup 3.10.0
Contact Form 7 5.6.3
Edit Author Slug 1.8.4
EWWW Image Optimizer 6.8.0
Google XML Sitemaps 4.1.5
Redirection 5.3.2
SIMPLE BLOG DESIGN 1.1.6
SiteGuard WP Plugin 1.6.1
Useful Blocks 1.6.2
WebSub (FKA. PubSubHubbub) 3.1.2
WP Fastest Cache 1.0.4
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.5
----------------------------------------------
2022年9月2日 11:53
●原因
新着記事、初心者タブ中の各リストにPCの時、class="list ect-entry-card front-page-type-tab-index"となっている。
しかし、モバイルの時、class="list ect-entry-card"となり、front-page-type-tab-indexが削除されている。
この為、リスト中のfont-sizeが、投稿ページの見出しh2と同じになり、大きくなってしまう。
●補足
ver:2.4.7.9でclassの見直しが行われています。
この為、リスト単位にclassは削除されています。
●回答
私の見間違えでなければ、Cocoon標準のインデックスページと同じように、その部分をコピーしたのか、独自にタブ切り替えを設けていると思われます。
トップページのカスタマイズをお願いした方と連絡が取れなかったため、質問しました。
上記と言う事ですが、どのように作ったか分からない為、やはりカスタマイズした方にお願いするのが望ましいと思います。
わいひら and crypto_college reacted
2022年9月2日 12:09
●追加CSS
以下を.listに修正
/*エントリーカード*/
.front-page-type-tab-index h2.entry-card-title {
font-size: 1.2em;
}
/*スマホ表示時は文字を小さめに*/
@media screen and (max-width: 834px) {
.front-page-type-tab-index h2.entry-card-title {
font-size: .9em;
}
}
わいひら reacted
Topic starter
2022年9月2日 12:16
@chu-ya お願いしていた方が多忙で現在、お願いができなさそうな状況です。
ただ、今後、修正等する場合は手順書ということでPDFをいただいています。
参考に添付させていただきます。
手順書に該当箇所について触れていただいているのですが、設定方法がうまく分からずで。
2022年9月2日 12:33
提示頂いた資料の中に「カスタマイズで実装した[show_list_tab_index]ショートコード」と記述があり。
その部分に当たります。
Cocoonの標準機能で無い為、どのようコードか分かりかねます。
ただ、上記CSSで問題ないとは思いますが。
わいひら reacted
2022年9月2日 15:09
高速化にチェックがあるのか、見えない部分もありますが、確か上記CSSが何処かに記述されていました。
追加CSSに以下を追加して下さい。
以下の注意の通り、本来フォーラムのルールに反しています。
また、たとえ業者に依頼したと言え、ご自分のブログ、内容を理解すべきだと私は思います。
基本的に、独自で行ったカスタマイズにより起きた不具合の原因究明や、JavaScript、PHPカスタマイズはサポート対象外させていただいています。
.list h2.entry-card-title { font-size: 1.2em; } @media screen and (max-width: 834px) { .list h2.entry-card-title { font-size: .9em; } }
2022年9月2日 15:17
crypto_collegeさん
トップページは、固定ページで作成なさっているのではないかと思います。
その、固定ページのカスタムCSSに以下はお書きになっていませんでしょうか。
ただ、chu-yaさんも仰っているように、圧縮がかかっており、正直良く分かりません。
これは、ConoHaのWEXALで圧縮されていると思います。
もし、chu-yaさんがお書きになったものや、私が書いたものでなければ、WEXALの解除が必要だと思います。
高速化機能の解除は、お問い合わせ時には必要だと思いますので、本来はWEXALも解除していただきたいところでです。
WEXALの圧縮は結構強力で、HTMLだけでなくCSSも圧縮してしまいます。
(設定によると思いますが)
WEXALの圧縮は結構強力で、HTMLだけでなくCSSも圧縮してしまいます。
(設定によると思いますが)
例えば、HTMLは以下のような感じで見えてしまいます。
正直、人の目で調べるのは難しいです。
わいひら reacted
2022年9月2日 15:23
固定ページのカスタムCSS
はじめ見た時、何処かに上記「.front-page-type-tab-index h2.entry-card-title」が書かれており。
(私はそのコードをコピペしただけです。)
わいひら reacted
2022年9月2日 15:47
crypto_collegeさん
とりあえず、これまでchu-yaさんや私が書いたことをご確認いただいたり、試してみてください。
(途中から見ていて、今どこまでご確認なさったかを、良く把握しておりません、申し訳ない。)
それでも解消しない場合は、以下は必要かと思います。
- Cocoonの高速化の無効化
- ConaHaのWEXALの無効化
- 途中で状態を変えない(お問い合わせ時の状態をキープしていただく)
但し、独自カスタマイズなさっていて、その不具合は本来サポート対象外です。
サポート対象外のもの
https://wp-cocoon.com/not-supported/
PHPなど絡んでいる場合、外部からは確認できませんので、対処できない場合もあるかと思います。
(独自のショートコードがあるようですし)
上記はご了承ください。
すみませんが、しばらく離席します。
わいひら reacted
2022年9月2日 15:49
chu-yaさん
私は最初スマホで見ていたのですが、そこからちょっと変わったような感じはするんですよね。
今は、確かに変わらない感じはします。
圧縮状態が、解除されたり圧縮が掛かったり、何度かしていて、その度に?マークです。
すみません、しばらく離席してしまいます。
わいひら reacted
Topic starter
2022年9月2日 16:09
皆さんありがとうございます。
以下を行いました。
- Cocoonの高速化の無効化
- ConaHaのWEXALの無効化
Topic starter
2022年9月2日 17:56
以下の情報がありました。
/*不要要素の削除*/
.article-header,
.article-footer {
display: none;
}
/*記事上部の余白を消す*/
div#content {
margin-top: 0;
}
.content-top {
display: none;
}
/*見出し*/
.article h2 {
position: relative;
font-size: 40px;
margin-top: 0;
margin-bottom: 1em;
padding: 0;
border: none;
background: none;
color: #000;
}
@media screen and (max-width: 834px) {
.article h2 {
font-size: 24px;
}
}
.article .sub-title {
color: #89c997;
font-size: 18px;
margin-bottom: 0;
}
.article h3 {
text-align: center;
border: 2px solid #89c997;
max-width: 335px;
margin: 3em auto;
color: #89c997;
position: relative;
z-index: 3;
}
.article h3::before {
content: "";
position: absolute;
bottom: -23px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-top: 12px solid #fff;
z-index: 2;
}
.article h3::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-top: 14px solid #89c997;
z-index: 1;
}
h3.margin-bottom-05 {
margin-bottom: .5em;
max-width: 600px;
}
/*3つ横に並んだカード*/
/*カード全体*/
.top-page-card .toggle-box {
box-shadow: 0px 3px 6px #00000029;
border: 1px solid #fff;
position: relative;
transition: all ease-in-out .3s;
}
/*左上に三角背景の文字を入れる*/
.top-page-card .toggle-box::before {
position: absolute;
top: -1px;
left: -1px;
content: "";
border-bottom: 80px solid transparent;
border-left: 80px solid #df4f1a;
}
.top-page-card .toggle-box::after {
position: absolute;
z-index: 2;
color: #fff;
transform: rotate(-45deg);
}
.top-page-card .toggle-button::before,
.top-page-card .toggle-checkbox:checked ~ .toggle-button::before {
position: absolute;
top: -2px;
left: -2px;
content: "";
border-bottom: 40px solid #0ef18e00;
border-left: 40px solid #ffffff;
opacity: 1;
}
/*初心者のあなたに*/
.top-page-card.recommend .wp-block-column .toggle-box::after {
top: 14px;
left: 3px;
}
.top-page-card.recommend .wp-block-column:nth-child(1) .toggle-box::after {
content: "STEP1";
}
.top-page-card.recommend .wp-block-column:nth-child(2) .toggle-box::after {
content: "STEP2";
}
.top-page-card.recommend .wp-block-column:nth-child(3) .toggle-box::after {
content: "STEP3";
}
/*Q&A*/
.top-page-card.qanda .wp-block-column .toggle-box::after {
top: 12px;
left: 25px;
}
.top-page-card.qanda .wp-block-column:nth-child(1) .toggle-box::after {
content: "1";
}
.top-page-card.qanda .wp-block-column:nth-child(2) .toggle-box::after {
content: "2";
}
.top-page-card.qanda .wp-block-column:nth-child(3) .toggle-box::after {
content: "3";
}
/*お得なキャンペーン*/
.top-page-card.campaign .wp-block-column .toggle-box::after {
top: 13px;
left: 7px;
}
.top-page-card.campaign .wp-block-column:nth-child(1) .toggle-box::after {
content: "特典1";
}
.top-page-card.campaign .wp-block-column:nth-child(2) .toggle-box::after {
content: "特典2";
}
.top-page-card.campaign .wp-block-column:nth-child(3) .toggle-box::after {
content: "特典3";
}
/*スペックの欄はリボンを表示しない*/
.top-page-card.spec .toggle-button::before,
.top-page-card.spec .toggle-checkbox:checked ~ .toggle-button::before,
.top-page-card.spec .toggle-box::before {
display: none;
}
/*トグルボタン部分*/
.top-page-card .toggle-button {
border: none;
background-color: transparent;
min-height: 80px;
padding: 25px 0 0;
}
/*3つカードのスマホ表示時*/
@media screen and (max-width: 834px) {
.top-page-card .toggle-button {
font-size: .9em;
font-weight: 600;
}
.top-page-card .toggle-box::before {
border-bottom: 40px solid transparent;
border-left: 40px solid #df4f1a;
}
.top-page-card .toggle-button::before,
.top-page-card .toggle-checkbox:checked ~ .toggle-button::before {
border-bottom: 24px solid #0ef18e00;
border-left: 24px solid #ffffff;
}
.top-page-card .toggle-box::after {
font-size: 12px;
}
.top-page-card.recommend .wp-block-column .toggle-box::after {
top: 4px;
left: -3px;
}
.top-page-card.qanda .wp-block-column .toggle-box::after {
top: 4px;
left: 11px;
}
.top-page-card.campaign .wp-block-column .toggle-box::after {
top: 3px;
left: 0px;
}
}
.top-page-card .toggle-checkbox:checked ~ .toggle-button {
border-bottom: 1px dashed #00000029;
}
/*コンテンツ部分*/
.top-page-card .toggle-checkbox:checked ~ .toggle-content {
border: none;
/*position: relative;*/
padding: 0;
}
.top-page-card .blank-box {
padding: 0;
}
.top-page-card .blank-box ul {
padding-left: 14px;
}
/*リンク部分*/
.top-page-card .toggle-content a {
color: #000;
text-decoration: none;
}
.top-page-card .toggle-content a img {
width: 100%;
}
.top-page-card .toggle-checkbox:checked ~ .toggle-content a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
/*マウスオーバー時*/
.top-page-card .toggle-box:hover {
border: 1px solid #89c997;
}
.top-page-card .toggle-box:hover a {
color: #89c997;
}
/*スマホ表示時*/
@media screen and (max-width: 834px) {
/*.top-page-card .toggle-content {
display: none;
}*/
div.wp-block-columns {
gap: .5em;
}
}
/*検索ボックス*/
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border: 1px solid #89c997;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
font-size: 14px;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
background: transparent;
border: none;
color: #89c997;
flex-basis: fit-content;
}
.search-word-buttons .wp-block-button a {
padding: 8px 24px;
}
@media screen and (max-width: 834px) {
.search-word-buttons .wp-block-button a {
font-size: .8em;
padding: 3px 12px;
}
}
/*記事から探す*/
.index-tab-buttons {
flex-wrap: wrap;
}
.index-tab-buttons .index-tab-button {
margin: 0;
margin-left: -1px;
margin-top: -1px;
width: 50%;
height: 50px;
border: 1px solid #89c997;
border-radius: 0;
position: relative;
text-align: left;
color: #89c997;
font-size: 18px;
line-height: 50px;
padding-top: 0;
}
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
background-color: #89c99729;
color: #89c997;
border: 1px solid #89c997;
}
/*エントリーカード*/
.front-page-type-tab-index h2.entry-card-title {
font-size: 1.2em;
}
/*スマホ表示時は文字を小さめに*/
@media screen and (max-width: 834px) {
.front-page-type-tab-index h2.entry-card-title {
font-size: .9em;
}
}
/*テーブル*/
.wp-block-table table tr {
background-color: #fff;
}
.wp-block-table table tr td {
font-size: 16px;
border: 2px solid #bebebe;
}
.wp-block-table table tr td img {
vertical-align: middle;
margin-right: 1.5em;
}
.wp-block-table table tr td strong {
vertical-align: middle;
}
2022年9月2日 18:02
私が回答した、上記、追加CSSに記載の赤字の部分を修正して下さい。
普通、個別ページのCSS、javascriptでなく、子テーマに記すべきだと思います。
それと申し訳ないですが、以前のフォーラムでの質問含め、crypto_collegeさん自身、WordPressを勉強された方が良いかと思います。
わいひら reacted
2022年9月2日 18:42
crypto_collegeさん
少し戻ってきました。
また、直ぐに離席します。
chu-yaさんのご提示の対応で、今回の事象は解消するものと思います。
ただ、先にchu-yaさんが仰っている通りの気がします。
トップページのカスタマイズをお願いした方と連絡が取れなかったため、質問しました。
上記と言う事ですが、どのように作ったか分からない為、やはりカスタマイズした方にお願いするのが望ましいと思います。
我々には、責任はとれないと思います。
カスタマイズしていただいた方にお願いするのが筋だと思います。
または、 crypto_collegeさんの自己責任ということでお願いするしかないかと。
そして・・・。
大変申し訳ないのですが、WordPressの基本的な用語がある程度通じないと、フォーラムでの会話は難しいこともあるようには思います。
(どうしても、フォーラムでのやりとりには制限があります。隣で会話している訳ではありませんので。)
おそらくその辺りも、カスタマイズをお願いしていることが関係しているかと思います。
そうなると益々、カスタマイズをお願いした方に、対応をお願いするのが良い気はしてしまいますね。
(crypto_collegeさんが調べたり悩んでいる間、回答側が貼りつかねばならないような感じに・・・。かなりchu-yaさんのお時間を奪ってしまったように見えてしまいます。)
申し訳ないですが、その辺りご了承いただいたり、お気遣いいただけますと幸いです。
わいひら reacted
Topic starter
2022年9月2日 19:16
chu-yaさん
mk2さん
大変お世話になりました。ほぼ同じようになりました。ありがとうございます。
お時間をいただきありがとうございました。
今後、ブログ運営する上で大切なスキルなので、勉強していきます。
2022年9月2日 20:13
ほぼ同じようになりました。
font-sizeの定義は元のままで、classを正しい物に変更しただけです。
なので「ほぼ」でなく同じです。
フォーラムのマナーとして解決済みなら「解決済」ボタンをクリック願います。
わいひら reacted
2022年9月2日 22:21
crypto_collegeさん
元々を存じませんので、分かりませんが、以下のような感じで良いのでしょうか。
上記であれば、「.list h2.entry-card-title」に「color:#89c997;」を追加すれば、とりあえずは変更できます。
(元々どうなっていたのか、そしてカスタマイズの詳細などは拝見しておりませんので、やっつけ感があります。)
(元々どうなっていたのか、そしてカスタマイズの詳細などは拝見しておりませんので、やっつけ感があります。)
ただ…。
今回の事象は、Cocoon側が変わったことによって、影響を受けているのかもしれないです。
そうであった場合、他にも影響があるかもしれませんし、1度カスタマイズをお願いした方に、ご確認いただくのが良さそうには思います。
(全体的な仕様を含めて)
(全体的な仕様を含めて)
また、色だけの話であれば、ご自分で調べていただくことも、正直そんな難しいことではないです。
以下などを参考に、デベロッパーツールの使い方を覚えておくと良いと思います。
(検索すれば、他にも解説なさっているサイトとは見つかります。)
(検索すれば、他にも解説なさっているサイトとは見つかります。)
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool
https://saruwakakun.com/html-css/basic/chrome-dev-tool
これを良い機会になさると良い気はします。
(カスタマイズには費用がかかったと思います。そのカスタマイズの仕様をこちらにお問い合わせいただくのは・・・正直・・・。)
(カスタマイズには費用がかかったと思います。そのカスタマイズの仕様をこちらにお問い合わせいただくのは・・・正直・・・。)
わいひら and crypto_college reacted
2022年9月2日 22:38
色が違うんです。
提示してくれたpdfを見てもカードの文字色は黒のようですが。
前を知らないので、聞くこと自体、筋違いです。
無くなったclassを変更しただけなので、色の事は、依頼した業者にお願いするか、ご自分で対応願います。
この件はこれでクローズです。
わいひら and crypto_college reacted
2022年9月3日 00:29
crypto_collegeさん
老婆心ながら。
WordPressの標準機能で、テーマをバージョンダウンすることは可能です。
詳細は以下をご覧ください。
Cocoonテーマを手動でダウングレードする最も手軽な方法
https://wp-cocoon.com/manual-downgrade-of-cocoon-theme/
プラグインも同様の手順です。
(バージョンアップもダウンも。)
WordPressのサイトというものは、1度構築したら、それで終わりではないと思います。
Cocoonも、不具合があれば修正されます。
皆様のご要望によっては、機能追加もあります。
何より、WordPressのバージョンアップによる仕様変更に対応すべく、どんどん変わっていっています。
それは他のテーマやプラグインでも同様かと思います。
そういう感じですので、今回のようなこともあります。
WordPressで構築したサイトは、メンテナンスし続けなければ運用はできないということは、ご認識くださいませ。
今回のようなことがあった場合に・・・。
自分でメンテナンスするのか。
また他の方にご依頼なさるのか。
そういうようなことも、あらかじめ想定しておいた方が良いと思います。
わいひら and crypto_college reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。