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

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

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

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

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

Contents

1 枠線に色を付けて四隅を丸くします
2 枠線を白くして、角を丸める

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

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

/* 枠線 ************************************/
#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」にします。

参考記事・えむ氏様

えむ氏のログ

Simplicityで記事ごと、サイドバーごとに枠線で囲む方法[WordPress]

https://mlog.xyz/simplicity-border/

何度でも言います、Simplicityはほんとカスタマイズしやすいテーマだと思います、えむ氏（@mlog_xyz）です。友達のブログデザイン作業が一段落して、やっと自分のブログデザインの構想を練る作業に入りました。「こんなことできるかな？」

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

/* 枠線 ************************************/
#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は、真っ白バージョンです(;^ω^)

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