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カスタマイズ依頼

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

パソコン表示で指定したクラスのフォント...
 
共有:
通知
すべてクリア

パソコン表示で指定したクラスのフォントが大きくならない(レスポンシブ)

3 投稿
2 ユーザー
0 Reactions
13 表示
(@magiwogg)
New Member Registered
結合: 3時間前
投稿: 2
トピックスターター  

はじめまして。質問させていただきます。

テーマエディターに書き込み、スマホでは文字を小さくしたい強調表示の部分を小さくすることに成功したのですが、パソコン画面では文字が大きくならず、fz-18pxのクラス指定された18ptの文字で表示されてしまいます。

逆にテーマのブロックエディタで文字を大きくしたり小さくすると、今度はスマホ用の表示が効かなくなってしまいます。
おおよそスクリーンショットの通りにcssを記載しています。

この場合、どのようにすればcssで指定した通りの大きさで表示されるのでしょうか?1024pxを超えた瞬間、このカスタムcssが全く効かずにルートのcssで指定されていると思う「fz-18px」の表示に従い表示されています。

 

よろしくお願い申し上げます。


   
引用
(@magiwogg)
New Member Registered
結合: 3時間前
投稿: 2
トピックスターター  

大変失礼しました。環境情報の添付などができておりませんでした。

 

【質問の該当箇所】

トップページのフェードインする「ここにしかない学びのテーマパーク」の文字がパソコン環境ではcssでサイズ指定("point"の名前でクラス指定)をしたにもかかわらず、小さくなります。

スマートフォン、タブレットではテーマエディターで設定した先述のcssが反映されておりますが、ブラウザのデベロッパーツールで画面幅が1024pxを超えた際に別のcssが優先され、テーマ内にあると思われるクラス「fz-18px」が指定されてしまいます。

https://magiweb.daa.jp

----------------------------------------------
サイト名:音工房〇 ー STEAM教育や探究学習を自由なカリキュラムで学べる大阪市都島区の創作アトリエ/ 作曲家・教育研究家 福井陽介(magi.)
サイトURL: https://magiweb.daa.jp
ホームURL: https://magiweb.daa.jp
コンテンツ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
WordPressバージョン:6.7.1
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br, zstd
言語:ja,en;q=0.9
----------------------------------------------
テーマ名:Cocoon
バージョン:2.8.3.3
カテゴリー数:8
タグ数:149
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1479 バイト
functions.phpサイズ:777 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-spam: Spam Protection 5.3.5
BackWPup 4.1.7
Booking Calendar 10.9.3.2
CoBlocks 3.1.14
Confirm Plus Contact Form 7 1.1.10
Contact Form 7 6.0.3
FileBird Lite 6.4.2.1
Font Awesome 4.5.0
Jetpack 14.2.1
ReCaptcha v2 for Contact Form 7 1.4.8
Shortcodes Ultimate 7.3.3
SiteGuard WP Plugin 1.7.8
Visual Link Preview 2.2.6
WP Multibyte Patch 2.9
----------------------------------------------


   
返信引用
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8212
 

magiwoggさん

もうお眠で、何も考えずに機械的に確認しただけなのですが・・・。

デベロッパーツールで確認すると、以下のように何もない状態です。

 
子テーマのCSSを確認させていただきますと、「font-size」の前に、不正な文字コードが入っているようです。
 
この不正な文字コードを削除してください。
 
 
【追記】
不正な文字コード部分は「U+0020 U+00A0」×4になっちゃっていますね。
U+0020:半角スペース
U+00A0:ノーブレイクスペース( )
 
でも、これ、不正な文字コードが解消したら、全部48pxになりません?
(後に書いた方が強い・・・お眠で目も開かないので、もう寝ます。寝ぼけてたらすみません)
 
この投稿は2時間前 9回ずつmk2に変更されました

   
返信引用
共有:

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

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

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

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

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

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

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

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