WordPressテーマUnderStrapの寸詰まりなUIを改善するCSS

Bootstrap4のCSSにほとんど手を付けていないUnderStrap

日本人の感覚からするとBootstrap4の標準のmarginやpaddingの取り方はやや寸詰まりに感じます。

見栄えを改善するために導入したCSSを記載します。

子テーマのstyle.cssをunderstrap-childが読み込むようにする

https://github.com/understrap/understrap-child

understrap-childは子テーマ直下のstyle.cssを読み込まないと言う挑戦的な設定になっているので、style.cssを読み込ませるにはfunctions.phpに以下の記述をする必要があります。

if (!is_admin()) {
    $the_theme = wp_get_theme();
    wp_enqueue_style( 'child-understrap-custom-styles', get_stylesheet_directory_uri() . '/style.css', [], $the_theme->get( 'Version' ) );
}

記事一覧ページの記事同士が近すぎるのを修正

body:not(.single) article:nth-child(n+2) {
    margin-top: 3rem;
    border-top: .2rem solid lightgray;
    padding-top: 1rem;
}

記事一覧ページも個別記事ページもHTML構成はほぼ同じですが、bodyタグのclassが異なります。

上記のCSS指定で『クラス名singleを含まないbodyタグ』の下にある『2個目以降のarticle』のmargin-topを空けると言う指定が可能です。

Bootstrap系は基本的にremと言うフォントサイズ単位でmarginやpaddingを指定した方がいいでしょう。

投稿日時などのメタ表示と記事タイトルが近すぎるのを修正

.entry-meta {
    margin: 1rem;	
}

日本人の感覚からすると近すぎるように感じるので修正します。

その他色々と細々した修正をしていますが、当然のことながら当ブログのCSSの再利用はご自由にどうぞ。

WordPress関連記事

• WordPressテーマUnderStrapで投稿者名を非表示にする
• UnderStrapで投稿日時を日本語にしてカテゴリーと更新日時を表示する
• UnderStrapの寸詰まりなUIを改善するCSS
• UnderStrapの『Posted in WordPress/コメントする』を非表示にする
• Understrapのアイキャッチ画像を小さくし、記事個別ページでは非表示にする
• WordPressのメディアや記事全文の文字を置換して日付も更新するSQL