【はてなブログをカスタマイズ】トップページ記事一覧をカード風に枠で囲う方法

f:id:higeshige:20181020005002j:plain

はてなブログ「ひげしげノート」はBrooklynというテーマを使わせてもらっています。

ひげしげの性格的に、記事の一覧など記事と記事の境界がなくただ文字が置かれているだけの状態（デフォルト）だとなんだか気持ちが悪いんです。

訪問してくれた人にとっても記事が分かれていた方が一つ一つの記事を認識しやすいので分かりやすくていいと思ってます。

ということで、今回トップページやサイドバー、記事を枠で区切りカード風にするカスタマイズ方法についてまとめていきます。

（トップページの記事を一覧表示できるのはpro仕様のみとなっています。ご了承ください。）

現状

記事一覧の投稿日やサイドバーのタイトルには囲いがありますが、それぞれのセクションの間仕切りがないのでイマイチすっきりしないんです。

＜トップページの記事一覧とサイドバー＞

f:id:higeshige:20181022002807j:plain

＜記事ページとサイドバー＞

f:id:higeshige:20181022002817j:plain

カスタマイズ方法

それで記事一覧やサイドバーの各セクション毎に囲いの枠をつけることにします。

枠だけでなく小さな影も追加しています。

次のコードを

「デザイン」→「カスタマイズ」→「デザインCSS」

にコピペすれば完了です！

/*記事エントリ一覧のカスタマイズ*/
section {
border: 0.5px solid #dcdcdc;
background-color:#ffffff;
padding:20px;
box-shadow: 3px 3px 5px rgba(128,128,128,0.8);
}
/*サイドバーのカスタマイズ*/
.hatena-module{
border: 0.5px solid #dcdcdc;
background-color: #ffffff;
padding:15px;
box-shadow: 3px 3px 5px rgba(128,128,128,0.8);
}
/*記事のカスタマイズ*/
.entry-inner {
border: 0.5px solid #dcdcdc;
background-color:#ffffff;
padding:20px;
box-shadow: 3px 3px 5px rgba(128,128,128,0.8);
}