本記事ではサイドバーにある人気記事一覧や新着記事一覧に境界線を入れる方法と，記事のアイキャッチ画像に影をつける方法について説明します．上記画像の左から右の状態へ変更します．トップページなどの投稿ページで記事の間に境界線を入れる解説はたくさんあるのですが，サイドバーでの方法はほとんど紹介されていなかったので試行錯誤しました．
本記事の内容
サイドバーの新着記事一覧で記事の間に境界線を入れる方法
サイドバーの新着記事一覧で記事間に境界線を入れる方法を紹介します．
①管理画面から「外観→テーマの編集」を選択します．
②テーマがSimplicity2 child: スタイルシート（style.css）になっているのを確認し，コードの一番最後に以下のコードを貼り付けます．
|
1 2 3 4 5 |
/*サイドバーの新着記事と記事の間に線 */ #sidebar .new-entry { border-bottom: 1px dotted #d3d3d3; padding-bottom: 35px; } |
各コードの意味を説明します．
#sidebar .new-entry { サイドバーの新着記事部分を編集しますという宣言です
border-bottom: 1px dotted #d3d3d3; 記事の下側に1pxの点線を灰色で引きます
padding-bottom: 35px; 記事紹介の部分を下35pxまで領域を広げ，そこに境界線が引かれるようにします
以上のコードを加えることでサイドバーの新着記事一覧で，記事と記事の間に境界線を入れることができます．
以上で完了です．今回は簡単に紹介したのですが，実は大変だったのはこの編集をどのクラス名に書けばよいのかが分からなかった点です．最終的に#sidebar .new-entryだったのですが，これを調べる方法を紹介します．
自分のサイトの編集すべきクラス名を調べる方法
今回はサイドバーの新着記事一覧を編集したかったのですが，そのスタイルシート上でのクラス名を調べる必要があります．
①ます自分のサイトをFirefoxで開きます
②調べたい部分をドラッグして，右クリックし「要素を調査（Q）」をクリックします．すると以下のような画面が表示されます．
③この画面の左側を見るとクラス名が<“new-entry”>と書かれています．この行をクリックしてください．
④この行をクリックすると右側にそのクラスの設定が表示されます．すると，最終的に#sidebar .new-entryがクラス名であることが分かります．下の画像ではborder-bottomなどが設定されており，上で変更したスタイルシートの設定が反映されています．
サイドバーの新着記事一覧で画像に影を入れる方法
サイドバーの新着記事一覧で記事のアイキャッチ画像に影を入れる方法を紹介します．
①管理画面から「外観→テーマの編集」を選択します．
②テーマがSimplicity2 child: スタイルシート（style.css）になっているのを確認し，コードの一番最後に以下のコードを貼り付けます．
|
1 2 3 4 |
/*サイドバーの新着記事の画像に影をつける */ .widget_new_entries ul li img, .widget_new_popular ul li img, .widget_popular_ranking ul li img { box-shadow: 3px 3px 6px #ddc; } |
各コードの意味を説明します．
.widget_new_entries ul li img, .widget_new_popular ul li img, .widget_popular_ranking ul li img { 長くてややこしいですが，前述の方法でクラスを調べました．サイドバーのアイキャッチ画像を編集しますという宣言です
box-shadow: 3px 3px 6px #ddc; 画像部分に影をつける設定です．数字部分は，１番目の値：数字分だけ影が右へ移動，２番目の値：数字分だけ影が下へ移動，３番目の値：影の大きさを設定します．
以上のコードを加えることでサイドバーの新着記事一覧で，アイキャッチ画像に影をつけることができます．
サイドバーの人気記事一覧で境界線をつける方法
ここまでサイドバーの新着記事一覧をカスタマイズしましたが，同様にして人気記事一覧も設定します．
①管理画面から「外観→テーマの編集」を選択します．
②テーマがSimplicity2 child: スタイルシート（style.css）になっているのを確認し，コードの一番最後に以下のコードを貼り付けます．
|
1 2 3 4 |
/*サイドバーの人気記事と記事の間に線*/ .widget_new_entries ul li, .widget_new_popular ul li, .widget_popular_ranking ul li{ border-bottom: 1px dotted #d3d3d3; } |
以上のコードを加えることでサイドバーの人気記事一覧で，境界線をつけることができます．
影は新着記事のコード変更と共通なので，特に新たなコードを足さなくても大丈夫です．
以上の設定変更でサイドバーの記事一覧部分に境界線と影が入り，以下の画像のように変更されます．
試行錯誤しながらだったので，もっと綺麗なコードも書ける気がするのですが，とりあえずできるようになったので報告します．同じような設定に苦労している人の参考になれば幸いです．
