ワードプレスのテーマ「Stinger8」を使用している方でサイドバー部分の装飾に物足りなさを感じたことはありませんでしょうか？
Stinger8はシンプルで使いやすく、SEO観点でも優れたテーマですが、そのまま使うとデザインがシンプルすぎるが故、少し寂しい見た目になってしまいます。
今回は特に地味に感じるサイドバーの「最近の投稿」「人気の投稿」「カテゴリ」などのタイトル部分を装飾してサイト全体の印象を良くしてみようと思います。
装飾なしのデフォルト状態
まずは装飾無しの状態がどれだけ寂しいデザインなのか実際に見てみましょう。
※テキストリンクがそのまま置かれている感じがしてデザインとしては非常に地味です
SEO観点では特に影響はないのですが、見た目がとにかく地味でデザインとしてまとまっていない感じを受けないでしょうか？
サイトにおけるデザインというものは重要で、サイト訪問者だけでなく、更新する側のモチベーションにも関わってくる重要なポイントかと思います。
このサイドバーが地味な問題は特にスマホでサイトを見た際の悪い印象が強く、何とかしたいと更新の度に思っていました。
カスタマイズ方法
さて、早速この地味なサイドバーのデザインをいじってきたいと思います。
カスタマイズは「Stinger8」の子テーマ（STINGER8 Child）のスタイルシートに対して行います。
今回カスタマイズするサイドバータイトルは「.menu_underh2」に該当するので、それにデザインをあてていきましょう。
「style.css」の編集画面を開く
ワードプレスの管理画面のメニューを【外観】→【テーマエディター】→【スタイルシート（style.css）】の順で選択していき、スタイルシートの編集画面を開きます。
編集画面を開いたら下記で紹介するコードをコピペで編集画面の一番下に貼り付けて保存してください。
サイドバータイトルに色を付ける
※タイトルに色が付くだけで大分印象が変わりました
「.menu_underh2」の背景と文字色に対して色をあててみました。下記のコードをコピペして自分のサイト・ブログのイメージにあった色に変更してみてください。
【color】：サイドバータイトルの文字色
【padding】：パディング（内側の余白）を指定します ※意味がよくわからない人は特にいじらずにこのままにしておいてください
下記をコピペして保存してください
/*-- サイドバータイトル --*/
.menu_underh2{
background:#008080;
color:#fff;
padding:10px;
}サイドバータイトルの角を丸める
色が付いただけで大分印象が変わったと思いますが、更にもう少しデザインをいじってみましょう。
※サイドバータイトルの四隅の角を丸めてみました
色のついたサイドバータイトルの角を丸めるには「border-radius」を使います。
角を丸めるか、四角のままにするかは好みにもよると思いますので、角を丸めたデザインを使いたい場合は下記をコピペしてください。
【color】：サイドバータイトルの文字色
【padding】：パディング（内側の余白）を指定します ※意味がよくわからない人は特にいじらずにこのままにしておいてください
【border-radius】：角の丸の半径を指定します
下記をコピペして保存してください
/*-- サイドバータイトル --*/
.menu_underh2{
background:#008080;
color:#fff;
padding:10px;
border-radius: 10px;
}まとめ
・サイドバーのタイトル装飾は子テーマのstyle.cssを編集する
・自分でデザインを指定するのが難しい場合は上記コードをコピペで保存！
サイドバーのタイトルを装飾するだけで、サイトやブログの印象はグッと変わります。
作業自体はそんなに難しいものではないので、様々な色を試して自分のブログのテーマに合った色を見つけてください！
コメント