とらやぎ日記

とらやぎ日記

お金、時間、ブログ、小さなことからコツコツ勉強中。

【はてなブログカスタマイズ】アーカイブページ 記事下の余白を調整する

 f:id:k-k-a-k-s-k-t-n-t:20170411213155j:image

とらやぎです。

 

はてなブログのアーカイブページでは、標準で各記事の下に余白があります。

 

これが広すぎるので調整したい

 

と思います。

 

変更前後のイメージはこちら

f:id:k-k-a-k-s-k-t-n-t:20170411154506p:plain

初心者にオススメのブログ編集ツール

まず、google chromeの拡張機能「Web Developer Tools」をインストールします。

Web Developer Tools - Chrome Web Store

 

(編集したい場所は決まっているのに、どんなコードを書けば良いか分からない。。。そんな時にこのツールが役に立ちます。)

※コピペするだけの場合や、このツールは使えない・不要という方はここは飛ばして頂いて大丈夫です。

 

インストールしたら、ブログページの変更したい箇所で右クリック→「検証」を押します。(今回は記事下の余白部分で右クリックしています。)

f:id:k-k-a-k-s-k-t-n-t:20170411145255p:plain

 

するとこの画面になります。

f:id:k-k-a-k-s-k-t-n-t:20170411150947p:plain

 

ここで右上の「style」タブのとなり→「computed」を押します。

f:id:k-k-a-k-s-k-t-n-t:20170411150116p:plain

 

この画面で真ん中の窓の下の方、グレーになっている部分にカーソルを合わせると、左の記事の一部がハイライトされます。これがこのソースの対象箇所という意味です。

 

そして、記事の余白がオレンジ色にハイライトされています。さらに右上のカラフルな四角にもオレンジ色があります。

「margin」と書かれており、上左右に「-」、下に「48」とあります。これは、余白が下にだけ48px設定されている。という意味です。

 

ここから実際に変更していきます。

カラフルな四角の下に、同じように「margin-bottom       48px」とありますので、ここの左端の三角マークを押します。するとさらに行が表示されます。

f:id:k-k-a-k-s-k-t-n-t:20170411151648p:plain

 

青い字で「bdb49f5~」と書かれている部分をクリックします。

するとこの画面になります。

f:id:k-k-a-k-s-k-t-n-t:20170411152556p:plain

この中の一瞬黄色くなり、カーソルが点滅している部分が対象箇所のデザイン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に貼り付けます。 

 

はてなブログへの貼り付け方法

はてなブログのダッシュボードから、「デザイン」を選択

f:id:k-k-a-k-s-k-t-n-t:20170411153933p:plain

さらに「カスタマイズ」→「デザインcss」を選択し、ここに先程のコードをコピペします。

f:id:k-k-a-k-s-k-t-n-t:20170411154019p:plain

 

 これで完了です。

※この方法は、既にデザインテーマで余白が設定されているものに対して上書きするものです。

ですので貼り付ける位置はデザインテーマのコードよりも下に貼り付けるようにお願い致します。

もしよく分からない場合は、一番下にコピペしてみると反映されるかもしれません。

 

変更前後の比較はこちら

f:id:k-k-a-k-s-k-t-n-t:20170411154506p:plain

 

最初に僕がやりたかった通り、余計な余白を無くすことができました。良かったです。

 

以上っ!

 

※僕は超初心者でどこかに間違いがあるかもしれません。ですので、参考程度にして頂ければと思います。また、もし良ければ気軽にご指摘頂けると助かります。m(_ _)m

管理人とらやぎ
id:k-k-a-k-s-k-t-n-t
フォロー