ゆるりーん

低空飛行の日々です。

ブログタイトルやメニューバーの余白を調整しました! が…!?

スポンサーリンク

ブログのデザインをwrittenに変えてから気になっていた部分↓↓
f:id:yururiururi:20160630193116j:plain
余白がうまくいかない!!

ゆきひーさんのこのページを見ながら、CSSの組み合わせを考えては試していると、
なんとなく形になったのでメモしておきます^^
www.yukihy.com
時間が飛んでいきました^^;

変えたところ

3か所変えました。
知識のない人間がいじったので、これで合っているのかは不明ですが、
自分的には改善したからOKということにしています^^;

こうなりました↓↓
f:id:yururiururi:20160707170039j:plain

①ブログタイトル下のブログ説明文の文字サイズ

小さすぎるなあと思っていたので、少し大きくしました。

#blog-description {
font-size: 15px;
}

これで少し大きくなりました。

②ブログ説明文下の余白を縮めた

空きすぎていると思っていたので、縮めました。

#blog-title {
margin-bottom: 10px;
}

数字はテキトーに調整しました。

③メニューバーと記事タイトルとの余白を広げた

ここが一番変えたかったところです。
だって、せますぎやろー!!!

上と同じ写真使いますが、

before
f:id:yururiururi:20160630193116j:plain

after
f:id:yururiururi:20160707170039j:plain

明らかに良くなりましたよね!

ここは一筋縄ではいかず苦戦しました。

メニューバーの下に余白を空けるのが、わたしの力ではどうしてもできなかったので、
いっそ、記事タイトルの上に空間を空けることにしました。

メニューバーから離れてくれさえすれば何でもいいや!

.entry-title{
padding-top: 20px;
}

ただ、このやり方だと、
他の記事もタイトルの上に余白ができてしまうので、トップページを見たらなんか微妙でした!

一番上の記事だけに適用できたらいいのにー(´・Д・)

もしくは、
やっぱりメニューバーの下に余白を作る方法を探すか。。。

むむむ。
カスタマイズは頭が痛くなります!!

良いやり方を知っておられましたら、
ぜひ教えてくださいませ!!!

それでは!

2016.7.24追記:出来ました→「タイトル下」に「

 

」を入れたら、うまく空間が空いてくれました♪