読者です 読者をやめる 読者になる 読者になる

Doraneko&Donuts

おすすめの本と映画と音楽をお茶を飲みながらまったりと語るブログ

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

はてなブログ・お題

f:id:Doraneko1986:20160127185929p:plain

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

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

 

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

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

LINEスタンプ大好評発売中!
f:id:Doraneko1986:20140213211017p:plain

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

f:id:Doraneko1986:20160124174830p:plain

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

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

 

う~ん、みっともない(;´∀`)

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

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

 

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

akiueo.hatenablog.com

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

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

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

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

f:id:Doraneko1986:20160127192430p:plain

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

 

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

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

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

f:id:Doraneko1986:20160127185929p:plain

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

 

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

 

スポンサーリンク

引用枠の表示を変える

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

www.task-notes.com

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

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

/* 引用のデザイン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;
}

こちらはそのままいじらずにこの文章をデザインCSSに記すだけ。

そうすると、

f:id:Doraneko1986:20160127194450p:plain

このように長いブログタイトルが一行で表示され、スペースが節約されましたw

ただこの改造はブログタイトルが全て表示されなくなってしまうためにリンクをクリックされなくなるかもしれないけど、まぁ今のところはこれでいってみることにしますw

 

これでよりオシャレになった当読書日記、ブログリニューアルの道のりはまだまだ続く。