Twenty Thirteenのサイドバー(右)をカスタマイズ

「Twenty Thirteen」のサイドバー(右)をカスタマイズします。

はじめに

「Twenty Thirteen」のサイドバー(右)をカスタマイズします。
・スタイルシート(style.css)を変更

スタイルシート(style.css)を変更

スタイルシートで、サイドバー(右)をカスタマイズします。

<サイドバーの幅>
変更前は300pxですが、300x250pxの広告を入れるのと、そもそも幅が狭いためサイドバーの幅を広げます。

.site-main .widget-area {
    width: 340px;
}

<ウェジェット間の幅>
ウェジェットを一つにまとめたほうがデザインが落ち着くでしょうか。

.widget {
	background-color: rgba(225, 255, 205, 1);
	font-size: 12px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0;
	padding: 20px;
	word-wrap: break-word;
}

<ウェジェットの背景色と透明度>
ウェジェットの背景色を変更して、透明度をなしに設定してみました。

.widget {
	background-color: rgba(225, 255, 205, 1);
	font-size: 12px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0;
	padding: 20px;
	word-wrap: break-word;
}

<タイトルの文字のスタイル/サイズ/フォント>
タイトルの文字のスタイル等を変更します。

.widget .widget-title {
    font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
}

<リストの表示>
下線にしてみました。

.widget ul,
.widget ol {
	list-style-type: none;
	margin: 0;
	padding: 0 4px;
}

.widget li {
	border-bottom: 1px solid #d0d0d0;
	padding: 2px;
}

<リストのタイトル表示>
リストを下線にしたのに合わせて、タイトルを太い下線にしてみました。

.widget-title {
	padding       : 0 2px 3px 2px;
	border-bottom : 4px solid #d0d0d0;
}

おわりに

サイドバーの幅を広げると、ウィンドウサイズを変えたときにサイドバーが本文にかぶってしまう対応に苦慮しました。今回は、”width: 94%”で対応しましたが他にもにも方法はありそうです。

関連記事(Twenty Thirteenの共通エリアの表示をカスタマイズ)

  1. Twenty Thirteenのヘッダーをカスタマイズ
  2. Twenty Thirteenのメニューをカスタマイズ
  3. Twenty Thirteenのサイドバー(右)をカスタマイズ
  4. Twenty Thirteenのサイドバー(下)をカスタマイズ
  5. Twenty Thirteenのフッターをカスタマイズ
  6. Twenty Thirteenで記事の高さをカスタマイズ

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)