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

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

【はてなブログをカスタマイズ】記事やモジュールの上下間隔を変更する

f:id:higeshige:20181020005002j:plain

今回はトップページに表示される記事一覧の記事間隔とサイドバーモジュールの間隔を変更する方法について説明していきます。
※記事間隔についてはてなブログproでトップページの表示形式を一覧表示にしているブログ限定です。

 

記事やモジュールの間隔を狭くする理由

記事やモジュールの間隔が広いと空白が多くなってスカスカの状態になります。これがなんだか寂しさや活気のなさみたいなものを助長するんです。本当に活気がないので嘘でも見せ方があるならそうしようと、今回間隔をうるさくなり過ぎない程度に詰めてみました。

 

元々の間隔の広い状態がこちら

f:id:higeshige:20181027020630j:plain

 

記事とモジュールの間隔変更方法 

次のコードを

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

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

 

/*サイドバーモジュールの上下間隔*/

.hatena-module {

margin-bottom:20px;

margin-left:-10px;

}



/*一覧の記事上下間隔*/

.page-index .archive-entry {

  margin-bottom: 10px!important;

}

 

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

 

今回上の「margin-left:-10px;」は不要です。スマホで見たときサイドバーのモジュールたちがどうしてもスマホ画面に収まらず見切れてしまうので追加してみました。これが正しいやり方かわかりませんが、収まるようになりました。

 

変更後

こんな風に間隔を狭めることに成功。

f:id:higeshige:20181027021050j:plain

どんどん良くなっていってます!

 

<注意事項> 

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

 

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

 

では!