WP メインサイドバーの調整 TwentyEleven


ワードプレス初心者のカスタマイズ 作業6

wordpress

テーマを直接変更(WordPress)

ワードプレスのテーマTwentyElevenのメインサイドバーの調整

wordpress-サイドバー

①サイドバーの間隔:感覚が広いので狭くします
②サイドバーの高さ:高さ調整します

スタイルシート(style.css)を編集

管理画面『外観』 >> 『テーマ編集』からスタイルシート(style.css)を開いて編集します。
※小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい
テーマを更新(アップデート)した場合は、テーマに加えたカスタマイズがすべて失われます。テーマを修正する場合、子テーマの利用を検討してください。子テーマを使用すればテーマの変更は確実に保持されます。

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

※変更する前にバックアップしてください

.widget-area {
	font-size: 12px;
}
.widget {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	clear: both;
	margin: 0 0 2.2em;  /* ①サイドバーの間隔の変更箇所 */
}
.widget-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;  /* ②サイドバーの高さの変更箇所 */
	text-transform: uppercase;
}

変更後

.widget-area {
	font-size: 12px;
}
.widget {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	clear: both;
	margin: 0 0 0.8em;  /* ①サイドバーの間隔変更 */
}
.widget-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4em;  /* ②サイドバーの高さ変更 */
	text-transform: uppercase;
}

wordpress-サイドバー
メインサイドバーのサイズと間隔の調整完了しました。

WordPress テーマを更新

新しいバージョンに「テーマを更新」した場合は、テーマに加えたカスタマイズがすべて失われます。
テーマを修正する場合、子テーマの利用をした方がよさそうですが、勉強中なので子テーマのやり方がわかりません。
他のサイトで調べてください。

WordPress 作業カテゴリ

1.ヘッダータイトルの余白調整2.検索ボックスの位置変更3.『Proudly powered by WordPress』をCopyright ©に変更
4.固定ページのタイトルを非表示に変更5.メインサイドバーを変更6.メインサイドバーの調整
7.投稿(BLOG)タイトルの変更8.タグに枠をつける9.投稿にサイドバーを表示(プラグイン)
10.サイト全体の横幅サイズを1000pxから1400pxに変更11.サイトの余白をなくして横幅最大に変更12.サイトの上部余白を削除
13.ヘッダー画像のサイズ変更14.上部のグレーの線を削除15.マウスオーバーで画像半透明に変更
16.フッターエリアの色変更17.投稿ページにサイドバーを表示18.サイドバーの幅を変更
19.画像の枠線を消去20.表の上下の罫線を消去21.タイトルバーや文字の変更