当サイトでは、WordPressのテーマ「TwentyNineteen」を使用しています。

シンプルでとても良いのですが、デフォルトでは文字のサイズやヘッダー画像が大きすぎるのではないかなと感じていたので調整していきたいと思います。

子テーマの作成

子テーマを作成して、編集する準備をしておきます。

前回の記事で、子テーマを作成する方法を紹介していますので、準備がまだの方は参考にどうぞ。

CSSファイルの編集

では、子テーマの「style.css」ファイルを編集していきたいと思います。

文字サイズ

デフォルトのフォントサイズが少し大きいかなと感じたので、サイズを縮小してみます。

font-size: 18px;

段落の行間を少しだけ空けたいので、paddingプロパティを追加しました。

padding-bottom: 12px;

編集後

結果的に、以下のようなコードを追加しました。

style.css

/* 見出し2 */
h2 {
	/* フォントサイズを小さく. */
	font-size: 32px;
}

/* 見出し3 */
h3 {
	/* フォントサイズを小さく. */
	font-size: 28px;
}

/* 見出し4 */
h4 {
	/* フォントサイズを小さく. */
	font-size: 24px;
}

/* 段落 */
p {
	/* フォントサイズを小さく. */
	font-size: 18px;
	/* 段落の行間を空ける. */
	padding-bottom: 12px;
}

/* リスト要素 */
li {
	/* フォントサイズを小さく. */
	font-size: 18px;
}

まとめ

WordPressの子テーマのカスタマイズの例を紹介しました。

テーマの仕組みを理解すると、より柔軟にページの編集が行えるかと思いますので、是非試してみて下さい。

更新日 : 2019年6月20日

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

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

CAPTCHA