Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマホのフォントサイズが変わらないです...
 
共有:
通知
すべてクリア

[解決済] スマホのフォントサイズが変わらないです。

16 投稿
4 ユーザー
8 Likes
619 表示
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

相談内容:
スマホ(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
----------------------------------------------


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4448
 

rockrockさん

「@mediascreen and ~」の部分を…。

@media screen and ~」にして、お試しいただけますでしょうか。
(「@media」と「screen」の間に半角スペースをいれる)

 

別件ですが・・・。

なお、親テーマが古いようです。

投稿者:: @rockrock

テーマ名:Cocoon
バージョン:2.3.2

上記バージョンでは、WordPress 6.0には対応していないと思いますので、最新バージョン(2.4.4くらい)にアップデートすることをお勧めします。

また、以下のプラグインは、WordPressの日本語環境において必須と言えるそうです。
無用なトラブルを避けるためにも、インストールなさることを強くお勧めします。

WP Multibyte Patch
https://ja.wordpress.org/plugins/wp-multibyte-patch/


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 5年前
投稿: 14161
 

画面幅によって細かな設定はできませんが、スマホ幅(480px以下)の設定の変更機能ならあります。
Cocoon設定の「全体」タブの「モバイルサイトフォント」から変更できます。
ただ、端末幅ごとに細かな設定をしたい場合は、CSSを書く必要はあります。


   
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

@mk2様、@わいひら様

お返事いただきましてありがとうございます。

mk2様にご指摘いただいた通り、

@media screen and ~ に変更したところ
一部分は変更されました。
ありがとうございます。
ただし、写真のようにセミナー情報的な部分は変更されませんでした。

fontをいじりすぎたのでしょうか?
太文字にしたことと空白での隙間の作り方がわからず、
間に背景色に文字色を変えて、下線を追加しているのが問題でしょうか?

親テーマとプラグインについてもありがとうございます。
更新していなかったので、早速させていただいたのと、
プラグインは導入していたのですが、有効化されていませんでした。

わいひら様、ありがとうございます。
そちらも設定させていただいたのですが、反映されませんでした。
なのでstyle.cssから変更させていただきました。
ご回答ありがとうございます。


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @rockrock

ただし、写真のようにセミナー情報的な部分は変更されませんでした。

見出しなど、個別にfont-sizeを指定しているものに対しては適用されません。
個別にfont-sizeを指定する必要があります。


   
わいひら reacted
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

@chu-ya ありがとうございます!

個別に指定ということは、<span>などを新たに付け足して、
個別にレスポンシブのCSSに書いていくということでしょうか?

Wordpress側のHTMLを直接いじってみたのですが、
エラーになることあり、それでやるしかないでしょうか?


   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 
投稿者:: @rockrock

個別に指定ということは、などを新たに付け足して、

個別にレスポンシブのCSSに書いていくということでしょうか?

以下に例を示します。
知って通り、個々の要素を特定できるようにclassが付いています。
図の赤枠のように、新エディタでfont-sizeを変えた場合でも個別のclassが付加されます。
この為、変更したい要素を特定させる必要があります。

<span>などの要素追加の必要はないと思います。

@media screen and (max-width: 480px) {
  .xxxx {←要素を特定して書いていますか?
    font-size: 8px;
  }
}

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4448
 

rockrockさん

以下をご覧いただくのが良いかもしれないです。

CSSのセレクタとは?覚えておきたい25種類と書き方
https://saruwakakun.com/html-css/reference/selector


   
わいひら reacted
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

@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様

情報のご提供ありがとうございます。
サイトを参考にさせていただきました。

何度も何度も申し訳ないです。
ご回答いただけると幸いです。

よろしくお願いいたします。


   
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

検証結果等載せさせていただきます。

 

This post was modified 6か月前 by rockrock

   
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@rockrock さん

上図、検証結果で左右の指し示す所が違います。
親テーマのスキン「ダークエンジ」で上記CSSをコピーし、検証しましたが、添付図のようにp.has-text-align-centerにはfont-sizeが反映されます。
肝心なCSSが見えないので、状況がつかみ難いです。


   
わいひら reacted
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

@chu-ya
何度もありがとうございます。
こちらの不手際でなかなかうまく伝えられず申し訳ないです。

検証結果になります。

 

   
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

続けてで申し訳ないですが、現在のstyle.cssになります。

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 2年前
投稿: 4448
 

rockrockさん

「fz-32px」にフォントのサイズが指定してあるはずです。

ただし、ここを変えると他のところにも影響がある思いますので、他に影響がないようにセレクタを詳細に書いておかねばならないと思います。
(そもそも32pxを指定しているのでは・・・)

 

実際のものを拝見できず、結局どこなんだと良く分からないところもあり、なかなか厳しい感じはしますけど。
(途中から見ると、もう良く分からないです・・・)


   
わいひら reacted
chu-ya
(@chu-ya)
Noble Member Registered
結合: 8か月前
投稿: 624
 

@rockrock さん

CSSを書く場所がそもそも間違っています。

  • 親テーマCSSの上部に書いていますが、下部にfont-size:16pxの指定があるので、そちらが優先される。
  • /wp/wp-content/themes/cocoon-master/style.css、親テーマCSSを直接弄るべきではない
    CSSの優先順、子テーマCSS>親テーマスキン>親テーマCSSとなます。
    →子テーマCSSに記述して下さい。
    もしくは、[外観]→[カスタマイズ]→[追加CSS]に書くべきです。

 


   
わいひら reacted
rockrock
(@rockrock)
Active Member Registered
結合: 6か月前
投稿: 8
Topic starter  

@mk2 様、@chu-ya様

ありがとうございます。

子テーマのレスポンシブをどれだけいじってもムリでした。
そもそもfz-22pxで指定していたので、変更が効かなかったみたいです。

全て外してしまってそこから個別に設定することで改善できました。
何度も教えていただいた上に、ご丁寧に説明いただきましてありがとうございました。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な回答があった場合は「いいね!」もご活用ください。回答者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました