とらやぎです。
僕が今まで悩んでいた事が解決しましたので、その内容を
紹介したいと思います。
今回紹介することで何ができるのか？
自分のページの、編集したい場所のデザイン設定がどうなっているかが分かります。
（どんなidやclassで指定されているのか分かります。）
cssの何行目をいじれば良いのか分かります。
（いじる場所が分かるので、数字だけ変えれば良いこともあります。）
これを覚えれば、初心者でもわりと簡単にデザインをいじれますので、この機会にチャレンジしてみてはいかがでしょうか。
変更したい所のidが分からない
そもそもidやclassなんていう言葉すら知りませんでしたし、検索してそれを知ったのまでは良かったです。
ですが、自分が今変えたいと思っているのはどのidやclassで指定されているのか分からないのです。
なので、自分の変更したい事を検索して、コードをコピペさせて頂いていました。
（コードを載せてくれている方々、ありがとうございます。）
解決方法
Google Chromeの拡張機能「Web Developer Tools」で解決できました。
僕の行った内容を紹介致します。
１．「Web Developer Tools」をインストールする
Web Developer Tools - Chrome Web Store
２．「Web Developer Tools」で、自分のブログページのcssを表示する。
３．全選択してコピーする。
４．はてなブログのデザインcssに上書きする。
以上です。
これを行うことで、 「Web Developer Tools」で表示されるcssコードと、はてなブログカスタマイズ画面に表示されるcssコードが同じになります。
そうすると、
「Web Developer Toolsで、いじりたい場所のcssコードと行数を確認して、はてなブログのcss編集画面で同じ行数の所をいじる」
ということができるようになります。
具体的なやり方
「Web Developer Tools」をインストールした状態で、自分のページを右クリック→「検証」を押します。
（今回は記事下の余白部分で右クリックしています。）
するとこの画面になります。
ここで右上の「style」タブのとなり→「computed」を押します。
右側の窓に赤い字で「margin-bottom」と書いてある部分があるので、その左側の三角を押します。
するとさらに行が表示され、右側に出てきた青字をクリックすると、このページの全cssの中で、この余白が設定されているコードの場所が表示されます。
このコードを全選択してコピーし、はてなブログに貼り付ければOKです。
はてなブログへの貼り付け方法
はてなブログのダッシュボードから、「デザイン」を選択。
さらに「カスタマイズ」→「デザインcss」を選択し、ここに先程のコードをコピペします。
【参考】アーカイブページの余白を変更する場合
今回の場合は、コードの1139番目に「margin-bottom」が設定されていました。
cssを全部コピペした後は、デザインcssの1139番目にも「margin-bottom」の設定があります。
その部分の数値を変更すると、余白を変更できます。
数字をいじるだけです。
これなら初心者の僕でもなんとかなりそうです。
前回、余白をいじる方法を紹介させて頂きましたが、あれはデザインテーマに上書きしていました。
【はてなブログカスタマイズ】アーカイブページ 記事下の余白を調整する - とらやぎ日記
こんな風に、同じコードを重ね書きしているイメージです。
/* archive ページ */
.page-archive .archive-entries .archive-entry {
margin-bottom: 48px;
margin-bottom: 16px; /* こちらが優先 */
}
もし既にcssの設定があれば、直接編集する方が重ね書きよりシンプルで、管理もしやすいのでオススメです。
どうして今までできなかったのか？
できなかった理由はデザインテーマにありました。
僕はブログを始めてすぐにデザインテーマを設定しており、cssにこのコードが書かれていました。
/* <system section="theme" selected="6653586347155924442"> */
@import "http://hatenablog.com/theme/6653586347155924442.css";
/* </system> */
こうして見ると10行もないコードですが、「Web Developer Tools」で表示すると、この中に1500行以上の設定が組み込まれていました。
「Web Developer Tools」で表示したcssは、このデザインテーマのコードを全て生データとして表示してくれます。
それをそのまま、自分のcssにコピペします。そうすると、
今までと同じデザインを維持しつつ、テーマの設定内容もいじれるようになりました。
まとめ
注意点として、変更する前にcssの元データは別の場所に保存しておいたほうがいいです。
これをしていないと、デザインが元に戻せなくなるかもしれません。
はてなブログのカスタマイズ画面で保存しない限り、「Web Developer Tools」でいくらいじってもデザインは保存されませんので、いろいろ試してみることをオススメ致します。
以上っ！