雑記ブログをやってみる-ひげしげノート

雑記ブログです。日記的なもの、興味のあるもの、買ったもののレビューとか書いたり書かなかったり。

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

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);
}

 

黄色のマーカー部の数値や色を変更して好みの枠にすることができます。

 

カスタマイズの結果

こんな感じに枠を張ることができました。

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

f:id:higeshige:20181022014531j:plain

 

<記事ページとサイドバー>

f:id:higeshige:20181022015532j:plain

 

取り合えず設置完了!

 

<注意事項> 

ひげしげはHTMLやCSSなどあまり知識のない素人です。そんなやつが、カスタマイズについて書かれているサイトから持ってきて、くっ付けて、ちょっと変えて、を繰り返して作ったものです。ご自分のサイトでもし使う場合はご注意ください。形が崩れたり、機能しないなんてこともあるかもしれません。

 

それと、ひげしげの別のブログを作る時に使ったものなのでどこから頂いたものかもうわからない状態です。悪しからずご了承ください。(判明したものはもちろん紹介させてもらいます!)

 

では!