【テーマ：Innocentに変更】経緯やその後のちょっとしたカスタマイズを備忘録目的で書きました。
スポンサードリンク
目次
はじめに
他の方のblogを見てデザインにおいて真似したくなったり、こういう方がいいなというところがでてきました。
- 全体の幅を広めたい
- グローバルナビを置きたい（将来的に）
- レスポンシブデザインの方が運用性がいい
ということで、全てクリアしてくれる現在1位のブログテーマ【Innocent】を使用させていただきました。
作者の方、ありがとうございます。
before
テーマ変更前はEpicというテーマを使用していました。
ザシンプル！！
可もなく不可もなく！いや悪くはないんだけど、メインディッシュのない夕食のような感じでした。
after
自分は、下記より
【プレビューしてインストール】→【このテーマをインストール】でインストールしました。
この時、
テーマをインストールすると、現在設定されているテーマ、デザインCSS、背景画像が破棄されます。
と表示されますので、背景画像はローカルPCの中にファイルがあると思いますが、デザインCSSは必ずメモ帳などにコピーしておきましょう。
【このテーマをインストール】をクリックすると、即インストール完了します。
次に後述しますおすすめ記事リスト機能（メインビジュアルの位置の横並びの画像）を追加してキャプチャしました。
※おすすめ記事リストですが、スマホでは非表示というのもいいですね！
スマートフォン（幅が599px）では、おすすめ記事を表示すると一番目の記事がファーストビューに入らなくなる（＝ユーザビリティが損なわれる）のでおすすめ記事は表示されません。
それがこんな感じです。
さらにカスタマイズ
一気に印象が変わりましたが、一応もうひと手間加えておこうと思いました。
- まずは、デザイン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;
}それをしたものが次のキャプチャです。
beforeと比べるとこちらの方が全然良いですね！
