こんにちは！悠です！
ブロガーの方なら、サイドバーに人気記事を表示させていることが多いのではないでしょうか。
下の画像のように、各順位の記事ごとに囲み枠を表示させておくと読者が見やすくなりますよね。
そこで今回は、
をご紹介いたします！
人気記事に囲み枠を設定する方法
人気記事に囲み枠をつけられるんだ！知らなかった！
という方もいらっしゃるかもしれませんので、その設定方法をまずご紹介いたします。
WordPress管理画面を開いて、「外観」→「ウィジェット」を選択します。
人気記事を表示させている場所（私の場合はサイドバー）に移動し、対象ウィジェットの下矢印を押します。
表示タイプの中から「囲み枠」を選択します。
これで人気記事に囲み枠を表示することができます！
人気記事（囲み枠あり）のカスタマイズ方法
今回は、人気記事をマウスオーバー時に背景の色を変えて、囲み枠の周りに影を付ける方法をご紹介します。
下の画像のように、人気記事にマウスを合わせると背景色が薄黄色（変更可能）になって、影がつくため立体的に見えるようになります。
Cocoonの子テーマのスタイルシート（style.css）に下のコードを貼りつけます。
背景色は自分の好きな色に変更してくださいね！
ソースコードではオールドレイス（#fdf5e6）という色にしています。
/*人気記事（囲み枠あり）のカスタマイズ*/
.popular-entry-card-link.a-wrap:hover{
background-color: #fdf5e6;
box-shadow: 0 5px 10px -5px rgba(0,0,0,0.2);
}
Cocoonのスタイルシートは、WordPressの管理画面の「外観 」→「テーマエディター」から編集できます。
下画像の赤枠で囲んでいる『 /*必要ならばここにコードを書く*/ 』の下にコピペして貼りつければOKです。
まとめ
以上が、WordPressのテーマ『Cocoon』で、囲み枠を表示させた人気記事をカスタマイズする方法でした。
囲み枠がない場合のカスタマイズ方法しかググっても出てこなかったので、今回は備忘録的にまとめてみました！
同じような悩みの方の参考になれば幸いです。
では、ここまで読んでいただきありがとうございました！
プログラムの勉強に活用した参考書
私がHTML、CSS、JavaScriptの基本的な仕組みを勉強するのに活用した参考書です。
どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽｀*)
コメント