テーマのカスタマイズ:追加 CSS

追加CSSWordPress テーマ

過去に「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)

コメント

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