ブログカスタマイズの雑談BLOG

以前の記事＜■【Seesaaブログ新デザインシステム】記事ページを線で囲む（1）線で囲むというclassを作る＞では、Seesaaブログの個別記事ページの記事部分を点線で囲むように設定しました。



紹介した記事のように設定すると記事ページを点線で囲むことができますが、現時点の記事ページは、記事コンテンツの下部に余白が入ったままなので少しおかしな感じです。





このままでもいいんですが、やっぱりTwitter等マークの下の余白が気になります。
囲み線との距離（余白）が広すぎると思うんですよね。
ついでに、文章の終わりと「posted by」との間も調整したいと思います。

記事ページの「posted by」や「Twitterのマーク」の余白を調整

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「article__footer」というclassを探します。
CSSの該当部分に下記「編集後」のコードをコピペまたは直接変更して、「保存」します。


＜元コード＞


＜編集後＞


●コメントアウトで見出しを付けています。
●私は記事本文と「posted by」の間をちょっと大きめに開きたいと思いましたので「.article__footer .posted」に「margin-top: 50px;」を追加しました。
大きめにしておくと、記事の最後に改行を入れなくていいのでラクなのです。
●Twitterマークは「.article__footer .bookmark」部分ですので、「margin-bottom」の数値を60pxから10pxに変更して、マーク下の余白を狭くしています。

コード編集後のCSSと実際のページ

コードを編集した後の記事ページです。
こんな感じで、余白を調整することができました。




次の記事の紹介

次の記事では、Seesaaブログの記事ページ下「前ページ・次ページ案内リンク」を編集する方法を説明します。