WordPressでサイドバーウィジェットの中身をカード表示にする方法　最近の投稿や最近のコメントをカードっぽくするよ

WordPressで、サイドバーにあるウィジェットの「最近の投稿」や「最近のコメント」。

これらがテーマによっては少し味気ないこともあります。

そこで今回はサイドバーの中身をカードっぽく表示してみることにチャレンジしました。

サイドバーウィジェットの中身をカード表示

最初はこんな感じでした。

使っているテーマは「マテリアル2」。

シンプルさがいいところですが、ちょっとひと味足したくなったので少しカスタマイズします。

どこをイジればいいか

どこをいじったらいいのか、chromeのデベロッパーツールで確認します。

カード表示にしたい部分を右クリックから「検証」。
（今回は「カエレバの表示が崩れる・空白ができるときの対策　デザインを後からまとめて変更する方法【リザルト編】」の文字）

どうやら「最近の投稿」は<li>のタグで囲んであり、一覧になっているようです。

そしてこの<li>のスタイルは、 style.css の中で .under_content li, .side liとして指定されているようですね。

追加CSSでカスタマイズ

さて、それではCSSでカスタマイズしていきます。

カスタマイザーを開いて

一番下にある「追加CSS」を選びます。

「追加CSS」は、テーマに入っているスタイルシート（style.css）に書いてある内容について同じ項目があればそこだけを上書きしてくれて、さらにテーマがアップデートされても、ここに書いた内容は消されずに残るので便利ですよね。

CSSの内容は

今回追加CSSに書き込んだ内容はこちら。

これだけだと背景（白）＋文字色（白）となって見えなくなる部分もあったので、さらにこちらを追記。

これでこんな感じになりました。

テーマによって違う

今回はWordPressテーマ「マテリアル2」を使っている場合で、サイドバーウィジェットのなかみをカードタイプの表示にカスタマイズしてみました。

しかし、.under_content li, .side liの部分はテーマによって異なります。

例えばSimplicity2だと

.under_content li, .side li

の部分が

#sidebar li

になります。

テーマやカスタマイズした色の設定に合わせて調整してみてくださいね。

こちらを参考にしました

今回はこちらからCSSコードを参考にさせていただきました。

 サルワカ | サルでも分かる図解説明マガジン  280 shares 302 users

CSSで作る！押したくなるボタンデザイン100（Web用）

https://saruwakakun.com/html-css/reference/buttons

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

マテリアルデザインについての勉強もでき、いろいろCSSカスタマイズのサンプルもあって素敵なサイトです。

ありがとうございます。

少しおしゃれに

サイドバーウィジェットの中身をカード表示することで、ぐっとおしゃれになった気がします。

ほんのひと味だけで簡単にカスタマイズできるのもWordPressの魅力ですよね。

皆さんもどうぞお試しください。

少しでも誰かの参考になれば、まぐれヒット。