ブログ最適化への道　ヘッダ画像の隙間をなくしてみよう(*´∀｀*)

f:id:Doraneko1986:20160127185929p:plain

こんちわ、おいさんです。

みなさん、はてなブログいじってますか？

以前お伝えしたとおり、ワタクシ、このブログを絶賛改装中ですｗ

今回はそのブログリニューアルの様子を書いてみたいと思います。

LINEスタンプ大好評発売中！

ヘッダ画像の隙間をなくす

f:id:Doraneko1986:20160124174830p:plain

以前も書いたが、このブログに出ていたメニューバーを消した。

そうするとヘッダと本文の境に空白が開いてしまった。

う～ん、みっともない(；´∀｀)

これさえなければしっかりとした良いデザインなのにｗ

なのでこの空白を消してみることにしたｗ

参考にしたのはこちらのブログ。

akiueo.hatenablog.com

いつもお世話になってますｗ

今回もちょこっと参考にさせてもらいました。

/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:100px;
}

これを管理画面のデザイン＞カスタマイズ＞デザインCSSに追記する。これだけ……のはずだった。

f:id:Doraneko1986:20160127192430p:plain

上のCSSのまま挿入すると、こんな風に表示が崩れてしまった( ；∀；)

わしのブログテーマはFLATだからそのままでは合わないんだねｗ

/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:320px;
}

なのでこのようにheightの部分を320pxに直すと、

f:id:Doraneko1986:20160127185929p:plain

このようにしっかりと隙間がなくなったｗ

最初はheightの数を少なく設定して更に記事とヘッダ画像が重なっちゃったけど、長くすることによってなんとか表示を調度良い形に変えることができました。ばんざーい！ヽ(=´▽`=)ﾉ

引用枠の表示を変える

ついでにこちらのブログを参考に引用枠の表示を変えてみました。

www.task-notes.com

こちらの記事にも書かれているようにそのままだと引用記事の表示がわかりにくいということで、もっと目立つやり方で変えています。

こちらは読書日記・旅日記・絵日記と３つのブログで表示を変えています。

/* 引用のデザイン1 */
.entry-content blockquote {
    padding: 20px 55px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}
/* 引用のデザイン2 */
.entry-content blockquote:before {
    color: rgba(200, 200, 200, 1);
    content: "“";
    font-family: serif;
    font-size: 600%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
}
/* 引用のデザイン3 */
.entry-content blockquote:after {
    content: "”";
    font-family: serif;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 600%;
    color: rgba(200,200,200,1);
    line-height: 0;
}

これを先ほどと一緒のデザインCSSに記します。

f:id:Doraneko1986:20160127194118p:plain

そうするとこのように引用部分の”部分が大きく表示され、この部分がより一層引用部分であることがわかりやすくなっていると思います。

サイドバーの最新記事の表示を一行に

そして最後に、サイドバーの最新記事の表示のブログタイトルが長い場合、何段にも表示されてスペースが圧迫されてしまうので、これを一行にしました。

/* 最新記事の表示(折り返さない) */
.hatena-module-recent-entries li a, .hatena-module-recent-comments li {
    word-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.hatena-module-recent-entries .hatena-urllist li a, .hatena-module-links .hatena-urllist li a {
    display: block;
    padding: 0.4em 0;
}