こんにちは。カスタマイズ大好きsyu_reiです。
最近GoogleChromeのディベロッパー機能を知って、自分なりにカスタマイズを始めました。
今まではコピペばっかりだったのにすごい成長！
自分のブログをスマホでみると、いたるところに余白があって、見づらいと感じていました。パソコンだと画面が大きいのでそんなに気にならないのですが、スマホだと記事ページを開いても、ほとんどヘッダーとグローバルメニューとパンくずリストしか目に入らないくらいの過剰な余白具合です。
今回、徹底的に余白を撲滅しました。
ちなみにこのブログでは、はてなブログ初期設定の公式テーマ「Smooth」を使用しています。
CSSを追加する場所
これから紹介するカスタマイズを貼り付ける場所は、
ダッシュボード→デザイン →カスタマイズ→デザインCSSです。
トップページの余白撲滅
ヘッダー
ブログタイトル周りの余白を小さくします。とりあえず１％にしてみました。
コピペ用コード↓
#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」が要素としたときのイメージ図↓
めっちゃ手書き感満載ですみません(´･ω･｀)
paddingは要素の内側なので、要素に色とかつけたときにpaddingの余白部分にも色が付きます。
詳しく知りたい方はサルワカ先生のHPへどうぞ↓分かりやすいです。
まとめ
楽しくてチマチマしたカスタマイズを繰り返していたんですが、はてなブログのテーマを変えたらもしかして全部解決するんじゃ…？と思っています。
そのうち、テーマ変えるかも？…今のところテーマ変える勇気がないです。トグルメニューとかは結局どのテーマでも後付けみたいだし…
目次の表示も変えたいし、見出しの見た目も変えたいし…
カスタマイズに終わりはないです。
ブログカスタマイズ楽しみましょう！
