とらやぎです。
はてなブログのアーカイブページでは、標準で各記事の下に余白があります。
これが広すぎるので調整したい
と思います。
変更前後のイメージはこちら
初心者にオススメのブログ編集ツール
まず、google chromeの拡張機能「Web Developer Tools」をインストールします。
Web Developer Tools - Chrome Web Store
（編集したい場所は決まっているのに、どんなコードを書けば良いか分からない。。。そんな時にこのツールが役に立ちます。）
※コピペするだけの場合や、このツールは使えない・不要という方はここは飛ばして頂いて大丈夫です。
インストールしたら、ブログページの変更したい箇所で右クリック→「検証」を押します。（今回は記事下の余白部分で右クリックしています。）
するとこの画面になります。
ここで右上の「style」タブのとなり→「computed」を押します。
この画面で真ん中の窓の下の方、グレーになっている部分にカーソルを合わせると、左の記事の一部がハイライトされます。これがこのソースの対象箇所という意味です。
そして、記事の余白がオレンジ色にハイライトされています。さらに右上のカラフルな四角にもオレンジ色があります。
「margin」と書かれており、上左右に「-」、下に「48」とあります。これは、余白が下にだけ48px設定されている。という意味です。
ここから実際に変更していきます。
カラフルな四角の下に、同じように「margin-bottom 48px」とありますので、ここの左端の三角マークを押します。するとさらに行が表示されます。
青い字で「bdb49f5～」と書かれている部分をクリックします。
するとこの画面になります。
この中の一瞬黄色くなり、カーソルが点滅している部分が対象箇所のデザインcssです。
/* archive ページ */
.page-archive .archive-entries .archive-entry {
margin-bottom: 3em;
}
具体的には、この部分が現在のデザインの元になっています。
.page-archive .archive-entries .archive-entry （アーカイブページは、）
{ margin-bottom: （記事の下に余白を、）
3em;} （3emつける。）
ざっくりいうとこんな設定です。
※3emとは本文のフォントの3倍という意味です。
※今回は本文が16pxだったのでその3倍の48pxという意味なのですが、話すと長くなりますので、ここでは割愛させて頂きます。
コピペコード
ここから下記をコピーします。
3em（48px）を変更することで余白を調整できます。今回は16pxにします。
・元のコード
/* archive ページ */
.page-archive .archive-entries .archive-entry {
margin-bottom: 3em;
}
・新しくしたコード
/* archive ページ */
.page-archive .archive-entries .archive-entry {
margin-bottom: 16px;
}
16pxに変更したこちらのコードを、はてなブログのデザインcssに貼り付けます。
はてなブログへの貼り付け方法
はてなブログのダッシュボードから、「デザイン」を選択
さらに「カスタマイズ」→「デザインcss」を選択し、ここに先程のコードをコピペします。
これで完了です。
※この方法は、既にデザインテーマで余白が設定されているものに対して上書きするものです。
ですので貼り付ける位置はデザインテーマのコードよりも下に貼り付けるようにお願い致します。
もしよく分からない場合は、一番下にコピペしてみると反映されるかもしれません。
変更前後の比較はこちら
最初に僕がやりたかった通り、余計な余白を無くすことができました。良かったです。
以上っ！
※僕は超初心者でどこかに間違いがあるかもしれません。ですので、参考程度にして頂ければと思います。また、もし良ければ気軽にご指摘頂けると助かります。m(_ _)m