チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】本文とサイドバーの間に仕切り線を入れる

 スポンサード リンク

f:id:chipsforest:20160507175933j:plain

 今回は本文とサイドバーの間に仕切り線(上画像の赤枠部分)を表示させる方法をご紹介します。

 方法としては「記事本文の右側に線を表示」「サイドバーの左側に線を表示」の2パターンがあるので、この2つの表示方法と違いを書いていきます。

※今回使用するCSSクラスは、以前に「【はてなブログ】記事本文とサイドバーの幅の変更(調節)方法 - チップの日常」で書いたものと同じなので、解説を見たい方はリンク先の記事を読んでいただけるといいかと思います。

本文の右側に線を表示

CSSコード

結果

f:id:chipsforest:20160507173739j:plain

 ↑mainに書くとページの最下部まで線が引かれる。

サイドバーの左側に線を表示

CSSコード

結果

f:id:chipsforest:20160507173805j:plain

↑box2に書くとサイドバーのコンテンツが表示されているところまで線が引かれる。

まとめ

 上記の2パターンで少し結果が変わります。

 仕切り線をページの一番下まで表示させたい場合は「記事本文の右側に表示」、サイドバーのコンテンツがあるところまででいいよという場合は「サイドバーの左側に表示」という感じですね。

 paddingの数値、borderの数値と色はお好みで変更するといいと思います。

PAGE TOP