サイドバーを四角い枠線で囲むCSS

どーも、ダンゴです( ̄▽ ̄)ノ

賢威はデフォルトでは記事ページとサイドバーに枠線がなく、
ちょっと見にくいかなぁと思ったので、
今回はサイドバーを枠線で囲んでみたいと思います。

サイドバー デフォルト

 

・記事ページを枠線で囲む
・両方を枠線で囲む

としなかったのは、
当ブログの場合は記事いっぱいの大きさの画像を貼ることが多く、
逆に見にくくなってしまうかな、と思ったからです(・ω・)

 

サイドバーを枠線で囲むCSS

ダッシュボードから
「外観」⇒「エディター(テーマ編集)」と進み、
スタイル項目の「design.css」をクリック。

 

サイドバー CSS

「.sub-column .contents」というところを探して、

.sub-column .contents{
margin-bottom: 1.5em;
padding: 0.5em;
border:1px solid #000;
border-bottom: 1px solid #000;
}

 

と入力すればOKです(*^^)b

 

サイドバー カスタマイズ後

するとこんな感じでサイドバーが四角で囲まれ、
記事と区別しやすくなりました☆

 

ちなみに記事ページを四角で囲みたい場合は、
「コンテンツ全体」というところに、

#main-contents .post {
margin-bottom: 1.5em;
border:1px solid #000;
border-bottom: 1px solid #000;
}

 

このようにつけ加えればできます\(^o^)/

    管理人プロフィール
    ▼名前:ダンゴ
    ダンゴ プロフィール
    どーも、ダンゴです。

    お酒と漫画とお笑いが大好きな大学生で、現在はネットビジネスとスロットで学費と生活費を稼ぎながら、細々と暮らしてます。

    数年前ブラック企業に内定し、「雇われるリスク」を肌で感じた結果、就職を放棄。

    とはいえ食わねばいけないので、藁にもすがる思いでネットビジネスを始めたところ、毎月10万円以上の収入を生み出すことに成功!

    知識ゼロから月収10万円を稼ぐまでの道のりをメールで紹介していますので、興味があれば登録してみてください☆

    ⇒10万を稼ぐ第1歩


    コメントを残す

    サブコンテンツ

    このページの先頭へ