「子テーマ」を修正する
1.ヘッダーの文字サイズを小さくする
タイトル文字の「h1.entry-title」の文字サイズ「font-size: var(–global–font-size-page-title);」を修正してタイトルを小さく表示させる。
現状はCSS変数として「4rem」が指定されているので、CSSを修正して文字の大きさを「2.5rem」とする。
CSSの修正に際しては、要素名が直ぐには分からないのでブラウザーを使って「開発者ツール」または「デベロッパーツール」を呼び出し要素名を探し出す。WPの投稿記事をブラウザーで表示した状態で「PF12」キーを押下すれば直ぐにツールが起動します。カーソル等を移動させながら丹念に目的とする要素名を探し出します。
要素名が分かれば、後は規則に則って修正用のCSSを用意します。
WPは複雑にスタイルシートが定義されており、それぞれ適用させる優先順位があって中々直ぐには目的とする結果が得られない場合があります。やむを得ず「!important」パラメータを使って結果を求めることも必要です。
@charset "UTF-8";
/*
Theme Name: Twenty Twentyone Child
Template: twentytwentyone
Theme URI: ●●●省略●●●
Description: Twenty Twentyone Child Theme
Author: 河内・水簾洞
Author URI: https://ksrd.jp/suirendou/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-twentyone-child
*/
.singular .entry-title {
font-size: 2.5rem !important;
}
「親テーマ」を変更しても「子テーマ」の修正内容は影響を受けません。スタイルシートに記述されているテーマ名は覚書程度に理解してください。
ただし「親テーマ」が使用している要素名を変えると「子テーマ」の修正内容は反映されなくなります。テーマを変更する際には事前にテスト環境での確認をお願いします。
コメントを残す