1.ブログ

記事とサイドバーに枠線を入れる

ワードプレスで記事とサイドバーに枠線を入れたかったので

以前、色々試してみた時の様子です。

わたしはデザインが崩れないように、カスタマイズの「追加CSS」で確認しながら行っています。

サイトがだめになってしまう可能性があるので、変更前はバックアップをしてください

枠線に色を付けて四隅を丸くします

 

分かりにくいので、緑で枠にしてみました

/* 枠線 ************************************/
#main {
    background: transparent;
    border: none;
}
.single #main, .page #main {
    border: 5px solid #008000;
    border-radius:20px;
    background:#FFF;
}
.home #main, .archive #main, .search #main {
    padding: 0 !important;
}
.entry {
    border: 5px solid #008000;
    padding: 20px;
    background: #FFF;
}
#sidebar{
    border:none;
    background: transparent;
    padding: 0;
}
#sidebar .widget {
    border: 5px solid #008000;
    border-radius:20px;
    background: #FFF;
}

角を丸めたくないときは、「20px」の所を、「0px」にします。

参考記事・えむ氏様

 

枠線を白くして、角を丸める

 

/* 枠線 ************************************/
#main {
    background: transparent;
    border: none;
}
.single #main, .page #main {
    border: 5px solid #FFF;
    border-radius: 0;
    background:#FFF;
}
.home #main, .archive #main, .search #main {
    padding: 0 !important;
}
.entry {
    border: 5px solid #FFF;
    padding: 20px;
    background: #FFF;
}
#sidebar{
    border:none;
    background: transparent;
    padding:0px ;
}
#sidebar .widget {
    border: 5px solid #FFF;
    padding: 20px;
    background: #FFF;
}

投稿時のわたしのサイトは、真っ白がどぎつく作業がつらかったので、少しアイボリーにしていました。

記事のCSSは、真っ白バージョンです(;^ω^)

 

 

色見本のページです。わたしは「和式大辞典」の方をよく使います

悩んだときはこちらを使用します