【WordPressテーマ】Lemon Creamのコピペで使えるCSSカスタマイズ一覧

このブログでは以前、DgiPressのWordPressテンプレート『Lemon Cream』を使用していました。現在は別のテンプレートを使用していますが、使用しているときはナチュラルで上品なデザインが個人的には大好きでした。

一方で、この謙虚なデザインや色使いはシーンによっては主張が弱いかも、、と感じる場面もあります。そこで、個人的にCSSをカスタマイズして文字フォントやレイアウトを変えてみたので忘備録を兼ねてこちらの記事でご紹介したいと思います。

CSSはコピペで使えるようにしていますが、あくまで私のサイトで試しただけなのでレイアウト崩れなどの責任は負いかねますのでその点だけはご了承ください。CSSをLemon Creamで試す際は、必ず事前にプラグインなどでバックアップを取得しておくようにお願いします。

CSSのどこを変更したらいいの？
CSSカスタマイズ一覧
さいごに

CSSのどこを変更したらいいの？

WordPressでCSSを変更する際は、基本的にもとのCSSは変更せずに別途CSSを追記していく形式が推奨されています。Lemon Creamでもオリジナルスタイルシートと呼ばれる追記CSSが用意されています。

管理画面の「DigiPress」 → 「ビジュアル設定」 → 「オリジナルスタイルシート」でCSSを追記できます。

CSSカスタマイズ一覧

ここからはコピペで使えるCSSを紹介していきたいと思います。変更後のイメージを掴んでもらうために僕の設定値も記載しますが、細かい値はご自身の好みで編集してみてください。

記事本文フォントサイズ

/*本文フォント*/
.entry {
font-size: 15.5px;
}

記事本文の行間、改行幅

/*行間*/
.commentlist_div div, .textwidget, .dp_text_widget, .single-article .entry {
line-height: 1.9;
}

/*改行幅*/
.single-article .entry address {
margin-bottom: 2.10em;
}

TOPページの記事タイトルを太字にする

/*TOP記事、太字*/
a, a:hover, a:visited, a:active {
font-style: normal;
font-weight: bold;
}

サイドバーのウィジェットのタイトル(h1)

h1.sidebar-title {
font-size: 16px;
}

hタグの色設定

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6, .widget_text h2, .widget_text h3, .widget_text h4, .widget_text h5, .widget_text h6, .dp_custom_text_widget h1, .dp_custom_text_widget h2, .dp_custom_text_widget h3, .dp_custom_text_widget h4, .dp_custom_text_widget h5, .dp_custom_text_widget h6, .comment div h1, .comment div h2, .comment div h3, .comment div h4, .comment div h5, .comment div h6 {
border-color: rgba(156, 219, 229, 0.6);
}

※ ただしこちらはサイドバーのhタグは適用されません。