syu_rei’s weblog

30代育休中女子の興味のあること。育児と株と英会話、その他日常。

MENU

はてなブログのトップページ、記事のカテゴリ下などの余白を消すカスタマイズ。一覧画面のはてなスターも消したよ。

f:id:syu_rei:20190902154716j:image
こんにちは。カスタマイズ大好きsyu_reiです。

最近GoogleChromeのディベロッパー機能を知って、自分なりにカスタマイズを始めました。

今まではコピペばっかりだったのにすごい成長!

自分のブログをスマホでみると、いたるところに余白があって、見づらいと感じていました。パソコンだと画面が大きいのでそんなに気にならないのですが、スマホだと記事ページを開いても、ほとんどヘッダーとグローバルメニューとパンくずリストしか目に入らないくらいの過剰な余白具合です。

今回、徹底的に余白を撲滅しました。

ちなみにこのブログでは、はてなブログ初期設定の公式テーマ「Smooth」を使用しています。

CSSを追加する場所

これから紹介するカスタマイズを貼り付ける場所は、

ダッシュボード→デザインカスタマイズデザインCSSです。 

はてなブログカスタマイズ CSSコード記載場所 デザインCSS

デザインCSS入力場所

トップページの余白撲滅

ヘッダー

はてなブログ ヘッダー ブログタイトル周り 余白調整 カスタマイズ

ヘッダーのブログタイトル周りの余白調整

ブログタイトル周りの余白を小さくします。とりあえず1%にしてみました。

コピペ用コード↓

#blog-title{
padding:1%;
}

画像を使っている人はまた違うコードになると思います。

あくまでタイトル周りの余白の調整です。

一覧記事の周り

はてなブログ トップページの一覧記事 周りの余白調整 カスタマイズ

一覧記事の周りの余白調整

コピペ用コード↓

.page-index .archive-entry{
    padding: 2% 3% 2%;
}

とりあえず、元の数字より小さくしました。

基本的に、余白の設定は「上、右、下、左」の順に設定されます。

3つだけ記載した時には「上、左右、下」になっているのかな…?

自分でいろいろ数字変えてみて、好みの余白にしてください。

ついでに一覧表示の時のスターも消した

もともとトップページの一覧表示の時にだけ、はてなスター非表示にしていたのですが、カテゴリ選択した時の記事一覧表示でも消すことにしました。

コピペ用コード↓

.star-container {
   display: none;
}

これで↑記事内のはてなスターは消えずに、一覧表示にしたときのみはてなスターの表示が消えます。

記事ページの余白撲滅

記事の周り 

はてなブログ 記事画面 余白調整 カスタマイズ

記事の周りの余白調整

コピペ用コード↓

.entry{
  padding:2% 3% 2%;
  }

一覧表示の時の余白と合わせてみました。

数字は自分でお好きなように調整して下さい。 

記事タイトル下のカテゴリ下

はてなブログ 記事 カテゴリ下 余白調整 カスタマイズ 

記事表示のカテゴリ下の余白を消したかった

.entry-header{
margin:0;}
.entry-categories.categories{
margin:0;}

カテゴリ下の設定だけをいじっても変わらず、なんでー!?と思っていたら、記事のヘッダー部分にも余白設定がされていました。

なので、「.entry-header」と「.entry-categories.categories」の二つの余白を調整する必要があります。

「.entry-categories.categories」を単なる「.categories」にしたら、一覧表示の時のカテゴリ下の余白も消えました。

.categories{
margin:0;}

余白の設定はmarginかpadding

CSSコードの中にあるmarginとpaddingが余白の設定です。

  • margin・・・要素の外の余白
  • padding・・・要素の中の余白

数値の設定は、上、右、下、左の「上から時計回り」順に記載します。

「SHUREI」が要素としたときのイメージ図↓

余白調整 marginとpaddingのイメージ

marginとpaddingイメージ


めっちゃ手書き感満載ですみません(´・ω・`) 

paddingは要素の内側なので、要素に色とかつけたときにpaddingの余白部分にも色が付きます。

詳しく知りたい方はサルワカ先生のHPへどうぞ↓分かりやすいです。

saruwakakun.com

まとめ

楽しくてチマチマしたカスタマイズを繰り返していたんですが、はてなブログのテーマを変えたらもしかして全部解決するんじゃ…?と思っています。

そのうち、テーマ変えるかも?…今のところテーマ変える勇気がないです。トグルメニューとかは結局どのテーマでも後付けみたいだし…

目次の表示も変えたいし、見出しの見た目も変えたいし…

カスタマイズに終わりはないです。

 ブログカスタマイズ楽しみましょう!