関連記事
目次
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
関連記事