WPのカスタマイズ(B)

「子テーマ」を修正する

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;
}

 「親テーマ」を変更しても「子テーマ」の修正内容は影響を受けません。スタイルシートに記述されているテーマ名は覚書程度に理解してください。
 ただし「親テーマ」が使用している要素名を変えると「子テーマ」の修正内容は反映されなくなります。テーマを変更する際には事前にテスト環境での確認をお願いします。


投稿日

カテゴリー:

,

投稿者:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です