最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

サイドバーの記事一覧ページをカスタマイズ|境界線を入れる,影を入れる変更方法

本記事ではサイドバーにある人気記事一覧や新着記事一覧に境界線を入れる方法と,記事のアイキャッチ画像に影をつける方法について説明します.上記画像の左から右の状態へ変更します.トップページなどの投稿ページで記事の間に境界線を入れる解説はたくさんあるのですが,サイドバーでの方法はほとんど紹介されていなかったので試行錯誤しました.

サイドバーの新着記事一覧で記事の間に境界線を入れる方法

サイドバーの新着記事一覧で記事間に境界線を入れる方法を紹介します.

①管理画面から「外観→テーマの編集」を選択します.

161021_kyoukaisen1

②テーマがSimplicity2 child: スタイルシート(style.css)になっているのを確認し,コードの一番最後に以下のコードを貼り付けます.

161021_kyoukaisen2

各コードの意味を説明します.

#sidebar .new-entry { サイドバーの新着記事部分を編集しますという宣言です
border-bottom: 1px dotted #d3d3d3; 記事の下側に1pxの点線を灰色で引きます
padding-bottom: 35px; 記事紹介の部分を下35pxまで領域を広げ,そこに境界線が引かれるようにします

以上のコードを加えることでサイドバーの新着記事一覧で,記事と記事の間に境界線を入れることができます.

以上で完了です.今回は簡単に紹介したのですが,実は大変だったのはこの編集をどのクラス名に書けばよいのかが分からなかった点です.最終的に#sidebar .new-entryだったのですが,これを調べる方法を紹介します.

自分のサイトの編集すべきクラス名を調べる方法

今回はサイドバーの新着記事一覧を編集したかったのですが,そのスタイルシート上でのクラス名を調べる必要があります.

①ます自分のサイトをFirefoxで開きます

②調べたい部分をドラッグして,右クリックし「要素を調査(Q)」をクリックします.すると以下のような画面が表示されます.

161028_side2

③この画面の左側を見るとクラス名が<“new-entry”>と書かれています.この行をクリックしてください.

161028_side3

④この行をクリックすると右側にそのクラスの設定が表示されます.すると,最終的に#sidebar .new-entryがクラス名であることが分かります.下の画像ではborder-bottomなどが設定されており,上で変更したスタイルシートの設定が反映されています.

161028_side4

サイドバーの新着記事一覧で画像に影を入れる方法

サイドバーの新着記事一覧で記事のアイキャッチ画像に影を入れる方法を紹介します.

①管理画面から「外観→テーマの編集」を選択します.

②テーマがSimplicity2 child: スタイルシート(style.css)になっているのを確認し,コードの一番最後に以下のコードを貼り付けます.

各コードの意味を説明します.

.widget_new_entries ul li img, .widget_new_popular ul li img, .widget_popular_ranking ul li img { 長くてややこしいですが,前述の方法でクラスを調べました.サイドバーのアイキャッチ画像を編集しますという宣言です
box-shadow: 3px 3px 6px #ddc; 画像部分に影をつける設定です.数字部分は,1番目の値:数字分だけ影が右へ移動,2番目の値:数字分だけ影が下へ移動,3番目の値:影の大きさを設定します.

以上のコードを加えることでサイドバーの新着記事一覧で,アイキャッチ画像に影をつけることができます.

サイドバーの人気記事一覧で境界線をつける方法

ここまでサイドバーの新着記事一覧をカスタマイズしましたが,同様にして人気記事一覧も設定します.

①管理画面から「外観→テーマの編集」を選択します.

②テーマがSimplicity2 child: スタイルシート(style.css)になっているのを確認し,コードの一番最後に以下のコードを貼り付けます.

以上のコードを加えることでサイドバーの人気記事一覧で,境界線をつけることができます.

影は新着記事のコード変更と共通なので,特に新たなコードを足さなくても大丈夫です.

以上の設定変更でサイドバーの記事一覧部分に境界線と影が入り,以下の画像のように変更されます.

161028_side1

試行錯誤しながらだったので,もっと綺麗なコードも書ける気がするのですが,とりあえずできるようになったので報告します.同じような設定に苦労している人の参考になれば幸いです.