Simplicityのサイドバーは初期のままだと背景の上になんの区切りもなく表示されています。
具体的にはこんな感じです↓
このままでもいいのですが、個人的に「区切りたい！」と思ったので当ブログを見てもらうとわかる通り、サイドバーを１項目ごとに区切っています。
区切った理由は、他のブログを見ていると結構区切っている方が多く、そしてキレイに見えるなーと思ったのがきっかけでした。
今回は、この「サイドバーを項目ごとに区切る」やり方を紹介します。
サイドバーに区切り線を入れる
まずは、区切り線を作る方法です。
「外観」から「カスタマイズ」を開きます。
「カスタマイズ」のページにある「レイアウト（全体・リスト）」をクリックします。
その中にある「サイドバーの背景を白色に」にチェックを入れます。
「保存して公開」をクリックします。
ここまで設定したら、実際にブログを見てみましょう。
サイドバーの周りを枠線が囲うようになりました。
この枠線は、サイドバー全体を囲っておりそれぞれの項目ごとに区切ってはいません。
なので、次はサイドバーの項目ごとに枠線で区切っていきます。
サイドバーの枠線を項目ごとに囲うようにする
サイドバーに枠線を付ける方法はSimplicityの機能で備わっていましたが、項目ごとに分ける設定は備わっておりません。
なので、直接CSSコードをテーマに記入する必要があります。
難しそうと思うかもしれませんが、大丈夫です。
これから紹介する手順に沿って操作すればOKです。
まず、「外観」から「テーマの編集」をクリックします。
テーマの編集のページを開いたら下の画像のようになっている事を確認してください。
もし、違っていたら「編集するテーマを選択：」から「Simplicity2 child」を選択して「選択」ボタンをクリックすると切り替わります。
「Simplicity2 child：スタイルシート(style.css)」と書かれている下のテキスト蘭に何やらいろいろ書かれていると思います。
一番下に「/* Simplicity子テーマ用のスタイルを書く */」という一文があります。
この文の下に、下のコードを全てコピーして貼り付けます。
#sidebar{
border:none;
background: transparent;
padding: 0;
}
#sidebar .widget {
background-color: #fff;
padding: 5px 8px;
border-radius: 4px;
border: 1px solid #ddd;
}
すると、こんな感じになると思います↓
ここまで設定出来たら、ページ下にある「ファイルを更新」ボタンをクリックします。
ここまで行ったらブログを確認してみましょう。
このように、項目ごとに枠線で分離するように変わったと思います。
以上が、サイドバーを項目ごとに枠線で分ける方法でした！
