過去に「Amphibious」テーマを使っていた時の話です。
初期設定ではサイトタイトルと固定ページ本文の文字が大きすぎました。
特にスマホで見るとタイトルの文字が大きすぎました。
CSSを調査して追加CSSで設定を変更しました。
● CSS調査手順
Edgeの「その他ツール」→「管理者ツール」で左のファイル選択ツリーから「TOP」→「krrkrr.wp.xdomein.jp」→「wp-includes」→「(インデックス)」でHTMLをコピーしてローカル環境で動作確認します。
文字サイズを決めているのは「TOP」→「krrkrr.wp.xdomein.jp」→「wp-content」→「themes/amphibious」→「style.css?ver=5.8.3」です。
style.cssをいろいろ書き換えて表示の変化を見ます。
style.cssの
/————————————————————–
18.2 – Medium devices (tablets, $mq-md and up)
————————————————————–/
のところでフォントの大きさを決めていることが分かりました。
.site-title {
font-size: 44px;
font-size: 2.75rem; ←ここ
}
「追加 CSS」に以下を追加してうまくいきました。これでPCもモバイルも小さくなります。
.site-title {
font-size: 44px;
font-size: 1.2rem;
}
.post-wrapper-single .entry-header-wrapper {
margin: 0 auto 30px;
margin: 0 auto 1.875rem;
}
.post-wrapper-single .entry-title {
font-size: 38px;
font-size: 1.2rem;
}
● 参考文献
WordPressでサイトタイトルのフォントサイズ・スタイルを変更する方法【図解】 | なすがまま、鳴るがまま。なすがまま、鳴るがまま。 (haranarigorogoro.com)
コメント