サイト内検索
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年5月29日 17:17
相談内容:
スマホ(iphone等)でのレスポンシブ時にフォントサイズが変わらない。
スマホに合わせてフォントサイズを変更したい
解決のために試したこと:
@mediascreen andを試しましたが、スマホでのフォントサイズに変更がありませんでした。
全体フォントサイズは16px、モバイルは14px
モバイルフレンドリーは正常
よろしくお願いいたします。
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@mediascreen and (max-width: 1240px){
/*フォントサイズは16pxに設定*/
font-size: 16px;
}
/*1030px以下*/
@mediascreen and (max-width: 1030px){
/*フォントサイズは12pxに設定*/
font-size: 12px;
}
/*768px以下*/
@mediascreen and (max-width: 768px){
/*フォントサイズは10pxに設定*/
font-size: 10px;
}
/*480px以下*/
@mediascreen and (max-width: 480px){
/*フォントサイズは8pxに設定*/
font-size: 8px;
}
環境:
----------------------------------------------
サイト名:
サイトURL:
ホームURL:
コンテンツURL:/wp/wp-content
インクルードURL:/wp/wp-includes/
テンプレートURL:/wp/wp-content/themes/cocoon-master
スタイルシートURL:/wp/wp-content/themes/cocoon-master
親テーマスタイル:/wp/wp-content/themes/cocoon-master/style.css
スキン:/wp/wp-content/themes/cocoon-master/skins/skin-dark-enji/style.css
WordPressバージョン:6.0
PHPバージョン:7.4.29
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.2
カテゴリ数:4
タグ数:172
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Contact Form 7 5.4.2
Google Analytics for WordPress by MonsterInsights 7.18.0
LIQUID SPEECH BALLOON 1.1.5
Redirection 5.1.3
Site Kit by Google 1.39.0
XML Sitemaps 4.1.1
----------------------------------------------
2022年5月29日 17:31
rockrockさん
「@mediascreen and ~」の部分を…。
「@media screen and ~」にして、お試しいただけますでしょうか。
(「@media」と「screen」の間に半角スペースをいれる)
別件ですが・・・。
なお、親テーマが古いようです。
テーマ名:Cocoon
バージョン:2.3.2
上記バージョンでは、WordPress 6.0には対応していないと思いますので、最新バージョン(2.4.4くらい)にアップデートすることをお勧めします。
また、以下のプラグインは、WordPressの日本語環境において必須と言えるそうです。
無用なトラブルを避けるためにも、インストールなさることを強くお勧めします。
WP Multibyte Patch
https://ja.wordpress.org/plugins/wp-multibyte-patch/
わいひら reacted
Topic starter
2022年5月30日 15:58
@mk2様、@わいひら様
お返事いただきましてありがとうございます。
mk2様にご指摘いただいた通り、
@media screen and ~ に変更したところ
一部分は変更されました。
ありがとうございます。
ただし、写真のようにセミナー情報的な部分は変更されませんでした。
fontをいじりすぎたのでしょうか?
太文字にしたことと空白での隙間の作り方がわからず、
間に背景色に文字色を変えて、下線を追加しているのが問題でしょうか?
親テーマとプラグインについてもありがとうございます。
更新していなかったので、早速させていただいたのと、
プラグインは導入していたのですが、有効化されていませんでした。
わいひら様、ありがとうございます。
そちらも設定させていただいたのですが、反映されませんでした。
なのでstyle.cssから変更させていただきました。
ご回答ありがとうございます。
2022年5月30日 16:28
ただし、写真のようにセミナー情報的な部分は変更されませんでした。
見出しなど、個別にfont-sizeを指定しているものに対しては適用されません。
個別にfont-sizeを指定する必要があります。
わいひら reacted
Topic starter
2022年6月1日 11:30
@chu-ya ありがとうございます!
個別に指定ということは、<span>などを新たに付け足して、
個別にレスポンシブのCSSに書いていくということでしょうか?
Wordpress側のHTMLを直接いじってみたのですが、
エラーになることあり、それでやるしかないでしょうか?
2022年6月1日 14:35
rockrockさん
以下をご覧いただくのが良いかもしれないです。
CSSのセレクタとは?覚えておきたい25種類と書き方
https://saruwakakun.com/html-css/reference/selector
わいひら reacted
Topic starter
2022年6月1日 17:32
@chu-ya 様
何度もご回答いただきましてありがとうございます。
そこの要素がすっかり抜けておりました。
要素を追加させていただきまして、
@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 16px;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 10px;
}
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 8px;
}
}
上記の形と pのみと.has-text-align-centerのみの全てを実施してみました。
またdiv タグのentry-contentを追加してみましたが、
結果は画像のように変わらずです。
@mk2様
情報のご提供ありがとうございます。
サイトを参考にさせていただきました。
何度も何度も申し訳ないです。
ご回答いただけると幸いです。
よろしくお願いいたします。
2022年6月1日 18:14
rockrockさん
「fz-32px」にフォントのサイズが指定してあるはずです。
ただし、ここを変えると他のところにも影響がある思いますので、他に影響がないようにセレクタを詳細に書いておかねばならないと思います。
(そもそも32pxを指定しているのでは・・・)
実際のものを拝見できず、結局どこなんだと良く分からないところもあり、なかなか厳しい感じはしますけど。
(途中から見ると、もう良く分からないです・・・)
わいひら reacted
Topic starter
2022年6月2日 14:42
@mk2 様、@chu-ya様
ありがとうございます。
子テーマのレスポンシブをどれだけいじってもムリでした。
そもそもfz-22pxで指定していたので、変更が効かなかったみたいです。
全て外してしまってそこから個別に設定することで改善できました。
何度も教えていただいた上に、ご丁寧に説明いただきましてありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。