ワードプレステーマTwentyElevenで、記事コンテンツ(サマリー)の表示部の’幅’を広げる方法です。投稿記事内の背景色に色を付ける方法はコチラ、投稿記事内の文字の変更はコチラを参考にしてみて下さい。

チョッと気取って記事コンテンツ部に影なんかつけちゃったら、なんだか狭くなった感じがしました。また、文字(記事)が窮屈に感じてなんだか読みづらく感じたんですね。

そこで、なんとか記事表示部を広げられないかなぁ?と試行錯誤していたら、広げる事に成功しました(笑　それを、忘れない様に書き残しておきます。

繰り返しになりますが’スタイルシート’を編集する場合は、必ず’ファイルの保存’をしてすぐにデフォルトまたは以前の状態に戻れる様にして下さいね。

ちなみに私は、数え切れないくらいの失敗を重ねています。そして、全て白紙からやり直すなんて事もしばしば…(涙　みなさんは、そうならない様にして下さい☆

記事コンテンツ表示部のカスタマイズはココを編集する!!

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開き、次の箇所を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

/* =Content
----------------------------------------------- */

#main {
	clear: both;
	padding: 1.625em 0 0;
}

～～～～～～～～　中略　～～～～～～～

.entry-content,
.entry-summary {　/* ココです!! */
	padding: 1.625em 0 0;
}

この様に、デフォルトでは何も装飾されていません。記事コンテンツ部の背景色を変えるでも同じ様にココを編集しているハズです。

枠線や背景色を変えていないと、広がったかどうか分からないと思います。なので、最終的に元に戻せば良いので、背景色をつけてからこのカスタマイズをした方が良いでしょう。(分かりやすいってことね。)

それでは、以下の様に追加/編集してみて下さい。

/* =Content
----------------------------------------------- */

#main {
	clear: both;
	padding: 1.625em 0 0;
}

～～～～～～～～　中略　～～～～～～～

.entry-content,
.entry-summary {　/* ココです!! */
	/* padding: 1.625em 0 0; */
	clear: both;
	width: 95%;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1.5em;
}

いかがでしょうか?これで、投稿記事内(記事コンテンツ)の表示部の幅が変わったハズです。

ここで一つだけ注意点!!記事表示部を変更すると、見出し(記事タイトル)や小見出しの表示部がずれる場合があります。ってか、私はずれました…(汗

その場合は、’.entry-title’や’h1’などの位置を調整してみて下さい。記事タイトルの表示変更を参考に’padding’などの数値を変更すると良いでしょう。

ちなみに、私もいつも苦しんでいるんですが、この’padding’と’margin’、ハッキリ言って混乱します…(汗　えぇ、メダパニをくらったかの様…(古い!?

ってことで、分かりやすい記事の紹介です♫　サイトさまは、コチラで紹介しています。

参考記事：marginとpaddingの違い

一番重要なコンテンツの表示部分です。見やすい表示にしたいモノですね☆