funclur

東京の片隅で社畜を謳う

【テーマ:Innocentに変更】経緯やその後のちょっとしたカスタマイズを備忘録目的で書きました。

スポンサードリンク

目次

はじめに

他の方のblogを見てデザインにおいて真似したくなったり、こういう方がいいなというところがでてきました。

  • 全体の幅を広めたい
  • グローバルナビを置きたい(将来的に)
  • レスポンシブデザインの方が運用性がいい

ということで、全てクリアしてくれる現在1位のブログテーマ【Innocent】を使用させていただきました。
作者の方、ありがとうございます。

before

テーマ変更前はEpicというテーマを使用していました。

f:id:funclur:20160507190909p:plain:w300

ザシンプル!!

可もなく不可もなく!いや悪くはないんだけど、メインディッシュのない夕食のような感じでした。

after

自分は、下記より
【プレビューしてインストール】→【このテーマをインストール】でインストールしました。

Innocent - テーマ ストア - はてなブログ

この時、

テーマをインストールすると、現在設定されているテーマ、デザインCSS、背景画像が破棄されます。

と表示されますので、背景画像はローカルPCの中にファイルがあると思いますが、デザインCSSは必ずメモ帳などにコピーしておきましょう。

【このテーマをインストール】をクリックすると、即インストール完了します。

次に後述しますおすすめ記事リスト機能(メインビジュアルの位置の横並びの画像)を追加してキャプチャしました。
※おすすめ記事リストですが、スマホでは非表示というのもいいですね!

スマートフォン(幅が599px)では、おすすめ記事を表示すると一番目の記事がファーストビューに入らなくなる(=ユーザビリティが損なわれる)のでおすすめ記事は表示されません。

それがこんな感じです。

f:id:funclur:20160507190925p:plain:w300

さらにカスタマイズ

一気に印象が変わりましたが、一応もうひと手間加えておこうと思いました。

  • まずは、デザインCSSに先ほどコピーしたソースを貼り付け(見出しなど)
  • 作者の方が書いているおすすめ記事リスト機能の100%表示

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote

  • メインビジュアルが高さとりすぎているので、おすすめ記事リスト機能上下のpaddingを0
#recommend-entries {
    padding: 0;
}
.hatena-module-entries-access-ranking {
    padding-bottom: 0;
}
>||

-おすすめ記事リスト機能やサイドコンテンツの切れ目をはっきりさせたいのでボーダーで区切り

>||
#recommend-entries {
    border-top: 3px solid #222;
}
.hatena-module {
    border-bottom: 3px solid #222;
    font-size: 0.9375em;
    line-height: 1.5;
}
.hatena-module {
    margin-bottom: 24px;
    padding-bottom: 24px;
}

それをしたものが次のキャプチャです。

f:id:funclur:20160507190935p:plain:w300

beforeと比べるとこちらの方が全然良いですね!

変えて良かった点

  • おすすめ記事リストがメインビジュアルの役割もしているため華やかさUP
  • メインとサイドにメリハリがついてサイドの幅が広くなって読みやすくなった
  • レスポンシブデザインのため下記記事で実現できなかったスマホのTOPに戻るボタンも出現(追記:と思ったらスマホ実機で見たら出てこないので後程修正します。)

funclur.hatenablog.com

  • 以上のことから回遊率UP?

今後は

  • 記事が増えたらグローバルナビの設置
  • 見出しのカスタマイズ

などもしていきたいと思います。