[WordPress]ウィジェットとサイドバーのカスタマイズ方法

wordpress
Pocket

今回はウィジェット、サイドバーの見た目を変更する、簡単で基本的な方法をメモしていきます。
前回のグローバルナビゲーションのカスタマイズとほぼ同じやり方ですので、すぐに馴染めると思います。

ウィジェット、サイドバーのカスタマイズ

TwentyTwelveの初期設定ですね。シンプルですが、やっぱり味気ないですね。

今回もスタイルシートの記述で見た目を変更していきます。

ウィジェットタイトルの見た目を変更(カスタマイズ)する

グローバルナビゲーション、ウィジェット、サイドバーのカスタマイズ2

いつものように、「外観」→「テーマの編集」→「子テーマのスタイルシート(style.css)」へ移動します。

子テーマをまだ設定されてない方は、過去記事「子テーマを作成しよう」を参考に設定してみてくださいね。

では早速スタイルシートにソースコードを記述していきましょう。

今回使用するコードはこちら

 

.widget-title {
font-size: 18px;/*文字のサイズ*/
line-height: 1;/*ライン幅*/
color: #FFFFFF;/*文字色の設定*/
background: #364e96;/*背景色*/
padding: 5px 5px 2px;/*内側の余白*/
border: 1px solid #000000;/*枠線の設定*/
text-align: center;/*中央揃え*/
font-weight: bold;/*フォントを太字に*/
}

.widget-title { }がウィジェットタイトルの見た目を変更する命令を出しています。

色に関してはこちらのサイトを参考にしてください。

グローバルナビゲーション、ウィジェット、サイドバーのカスタマイズ8

こんな見た目になりました。ソースコードの数値等を変更することで自分好みの見た目に変更しましょう。

 

サイドバーの見た目変更(カスタマイズ)する

次はサイドバーの内容を変更していきます。下がソースコードです。

/* サイドバーの文字 */
.widget-area .widget p, .widget-area 
.widget li, .widget-area .widget .textwidget {
line-height: 28px; /* 文字の高さ */
font-size: 14px; /* 文字の大きさ */
}
/* サイドバーリンク関係*/
.widget-area .widget a {
color: #000000; /* リンク部分の文字色 */
text-decoration: underline; /* リンク部分にアンダーラインを入れる */
font-weight: normal; /* 文字の太さ設定 */
}
.widget-area .widget a:visited {color: #000000;}/* 訪問済み時の色*/
.widget-area .widget a:hover{color: #0000FF}/* カーソルが載った時の色*/

リンクにアンダーバーが必要ない時は「text-decoration: none;」と記述してください。
スタイルシートに上のコードを記述した結果がこちら。

背景に色が被ってたサイドバー文字を黒色に変更して見やすくなりましたね。
これも自分好みの色やフォントに変更してみてくださいね。

あと他に色々とサイドバーの見た目を変えることができるのでいくつか紹介します。

サイドバーにリストマークをつける

.widget-area .widget ul {
list-style: disc; /* リストマーク */
padding-left:30px; /* 左に余白 */
}

「list-style: 」がリストマーク記述の命令文です。「disc;」はドットを入れるという意味です。

適用させてみたのがこちらの画像です。

グローバルナビゲーション、ウィジェット、サイドバーのカスタマイズ10

文字の前にドットマークがつきましたね。

余白が必要なければ「padding-left:」は0pxでも大丈夫です。

またこのリストマークは画像やgifファイルを使用することもできます。
ただし画像をたくさん使うとサイトが重くなってしまうので注意してください。

画像を使う場合はこちらのコードを挿入します。

list-style-image: url( );/*カッコ内に画像のURLを入れる*/

グローバルナビゲーション、ウィジェット、サイドバーのカスタマイズ11

こんな感じにリストマークをボタンの様に変更することもできるという方法でした。

 

サイドバーのリンク間に仕切り線を入れる

これはリンクが縦に並んでいるでいると思いますが、線を引いて境界をはっきりさせる方法ですね。


.widget-area .widget li {
border-bottom: dashed 0.5px #000000;
}

試しに上のコードをスタイルシートに反映させてみたのがこちら。

グローバルナビゲーション、ウィジェット、サイドバーのカスタマイズ12

仕切り線を引く場合、リンクのアンダーバーは消したほうがいいかもしれませんね。

「dashed 」の部分を「solid」に変更すると点線ではなく実線になります。色々試してみてくださいね。

さてここまでがウィジェットタイトルとサイドバーの簡単なカスタマイズ手順になります。
色々な部分をいじくって、見やすいサイト作成を目指しましょう。それではお疲れ様でした。

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。