ワードプレステーマHestiaのカスタマイズ-余白調整のCSS

ワードプレステーマHestia

Hestiaというテーマを使い始めました。(ここのブログではない)

無料テーマで、使いやすいほうだと思いますが、日本で人気のテーマのようにカスタマイズ方法が、あちこちで説明されているものでもなく…

変えたいところは、ほんのちょっとなのに、知識がなくてすごい時間がかかっちゃいました。

情報の少ないテーマなので、同じように苦労している人がもしいたら役に立つかな?と、カスタマイズした点を書き残しておきます。

CSSを編集する前に、必ずCSSのバックアップを取っておいて下さい。

スポンサーリンク
スポンサーリンク

Hestiaの見出し上下の余白を広げる

見出し上下の余白が狭いように感じたので、そこを広げました。

見出しH2の上下を広げるには、これをCSSに書いてください。

/*見出しh2上下の余白*/
.single-post .blog-post h2 {
    padding-top: 30px;   
    padding-bottom: 15px;
}

H3、H4も広げるなら

.single-post .blog-post h2 {

をh3、h4と書き換えたものを続きに書き加えて下さい。

padding-top: ○○px;
これが上の余白

padding-bottom: ○○px;
これが下の余白

なので、数値は適宜調整で。

見出<h2>行間を調整する

H2の見出しが2行になると、行間が広すぎで読みにくかったので、ここを狭くしました。

line-heightが1.5だったのを1.3に。

/*見出しh2行間を狭く*/
.single-post .blog-post h2{
    line-height: 1.3;
}

ブログ全体の左右の余白を調整

サイトの左右余白を広げる(PCのみ)

Hestiaは、どうもブログ左右の余白が小さくてせせこましい感じがしたので、ここに少し余白を作りました。

記事本文や記事一覧の左右余白のことです。

この部分の余白を広げたいってことです。

Hestiaカスタマイズ-本文余白

スマホからの見え方は余白狭めのほうが見やすくていいと思ったので、PCから見た時だけ両サイドの余白が広がるようにしました。

CSSにこれを書きます。

/*PC両サイド余白を広く*/
@media screen and (min-width : 1024px) { 
.container  {
    padding-left: 30px;
    padding-right: 30px;
}}

スマホも広げたい人は、

.container {
padding-left: 30px;
padding-right: 30px;
}

これだけでいいです。

数値はお好みで変えてください。

左右余白+サイドバーを内側に寄せてサイドバーを広げる(PC)

私のブログでは、右側にサイドバーを表示しているのですが、本文とサイドバーの幅だけがムダに広く残ってしまうように感じたので、サイドバーを内側に寄せてサイドバー自体の幅を少し広げました。

つまり…

PCから見た時

  • ブログ両サイドに余白を作って
  • 右サイドバーを左にちょっと移動
  • サイドバーの幅を広げる

という設定です。

この設定にしているブログはこれ→「海が見えるまで」 なので、「このバランスでいいや」という人は、↓を丸コピーしてください。

@media screen and (min-width : 1024px) {
/*PC左サイド余白を広く*/
.container {
padding-left: 25px;
padding-right: 25px;
}
/*サイドバー(左)を内側に寄せる*/
.col-md-offset-1 {
margin-left: 5.33333333%;
}
/*サイドバーの幅を広げる*/
.col-md-3 {
width: 28%;
}}

テーブル下に余白を設定

もうひとつ気になったのは、テーブル(表)を入れたときの下の余白でした。

表が入ったら、下のテキストは少し余白を置いて表示したいのですが、ぴったりくっついていて、表下の1行目がなんとも読みにくいのです。

言っているのは、こういう↓ことです。

Hestiaカスタマイズ-表下の余白が狭い

これもCSSで解決できるので書いておきます。

/*テーブルの下に余白*/
table{
    margin-bottom:20px;
}

こんな感じにテーブルの下に余白ができました。

Hestiaカスタマイズ-テーブル下余白を作る

もっとスマートなCSSの書き方があるかもしれませんが、私に分かる書き方ではこうなります。

Hestiaトップページのカスタマイズについてはこちらに

個別記事のカスタマイズについてはこちらに