モバイル機器から見た際のタイトル文字拡大について - Cocoonテーマに関する質問 https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/ Cocoon ディスカッション掲示板 ja Thu, 21 May 2026 08:06:01 +0000 wpForo 60 RE: モバイル機器から見た際のタイトル文字拡大について https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/#post-81822 Sat, 26 Oct 2024 11:41:46 +0000 chu-ya　さま

早速のご回答、誠にありがとうございました。感動しました。長い間、ずっと疑問だったものが解決しました。見栄えが改善されました。ご指導、心から感謝します。本件は、これにて終了であります。ありがとうございました。

]]> Cocoonテーマに関する質問 TY_Cocoon https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/#post-81822 RE: モバイル機器から見た際のタイトル文字拡大について https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/#post-81817 Sat, 26 Oct 2024 10:06:54 +0000 ●回答

追加CSSでフォントサイズを60ptとしています。

.site-name-text {
  font-family: 'Amatic SC', cursive;
  font-size: 60pt;
}

親テーマCSSでは画面幅が480px以下のとき、フォントサイジが18pxとなっています。

https://github.com/xserver-inc/cocoon/blob/78205e3d9d96a5e8714443330a21efee5f5a364f/style.css#L12082-L12084

●修正案

上記のコードclampを用い、最小フォントサイズ30pt、最大フォントサイズ60ptでフォントサイズとし、フォントサイズを画面幅に応じ可変にします。

最小30 / 最小の画面サイズ480px　* 100 = 8.3vw

https://autoproject.nagoya/1846/

※最小フォントサイズは好みのサイズに調整してください。

#header .site-name-text {
  font-family: 'Amatic SC', cursive;
  font-size: clamp(30pt, 8.3vw, 60pt);
}
]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/#post-81817 モバイル機器から見た際のタイトル文字拡大について https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/#post-81816 Sat, 26 Oct 2024 09:47:55 +0000 何分初心者ですので、よろしくお願いします。

添付の写真は、私のブログの、モバイル機器から見た時のトップ画面です。

PCに比べて、縦画面なこともあり、手書き風のタイトル文字

MY SAVIOUR KING, JESUS

が非常に小さく、モバイル縦表示時にもう少し大きく表示できる方法はないかと思い、ご相談した次第です。

PCではいい具合に見えているので、こちらには影響を与えない方法がBestです。

よろしくご指導ください。


----------------------------------------------
サイト名：My Saviour King, JESUS
サイトURL：https://saviourking.net
ホームURL：https://saviourking.net
コンテンツ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/m-sora/style.css
WordPressバージョン：6.6.2
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.6
カテゴリー数：5
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：717 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools 5.9.2
Akismet Anti-spam: Spam Protection 5.3.3
Classic Editor 1.6.5
Contact Form 7 5.9.8
Google Analytics for WordPress by MonsterInsights 9.0.1
Jetpack 13.9.1
OptinMonster 2.16.4
Redirection 5.5.0
SiteGuard WP Plugin 1.7.8
UpdraftPlus - Backup/Restore 1.24.6
UserFeedback Lite 1.1.1
WPForms Lite 1.9.0.4
WP Multibyte Patch 2.9
----------------------------------------------

]]> Cocoonテーマに関する質問 TY_Cocoon https://wp-cocoon.com/community/cocoon-theme/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e6%a9%9f%e5%99%a8%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e9%9a%9b%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e6%96%87%e5%ad%97%e6%8b%a1%e5%a4%a7%e3%81%ab%e3%81%a4/#post-81816