スタイルシート（子テーマ）への記述内容

全てに共通する記述

html {
 overflow: auto;
}
body {
 overflow: hidden;
}
@media screen and (min-width: 600px) {
 .site {
  overflow: visible;
 }
}

横幅を広げたい部分に関する記述

#example {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveの基本となるパーツのセレクタはこちら

注）グローバルメニューのセレクタについて

グローバルメニューのデザインを指定しているセレクタは、上記の id や class 以外にもいくつもあります。メニューをどのようにカスタマイズしているかで、指定すべきセレクタが変わってくるようです。
特に Twenty Twelve のグローバルナビメニューは、上下に 1px のボーダーが引かれていますが、実は上記の 2 つのセレクタでは、このボーダーまで横に伸ばすことができません。
ボーダーも横に伸ばしたい場合は、以下のセレクタを、左右のマージン、パディングともに引き延ばす必要があります。

デフォルト状態のグローバルナビメニュー

デフォルト状態のグローバルナビは、作成した固定ページへのリンクが順番に表示されるようになっています。1460 行目からの記述にマージンやパディングを追記すると、ボーダーも含めて横幅を広げることが可能です。

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .main-navigation ul.nav-menu,
 .main-navigation div.nav-menu > ul {
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  display: inline-block !important;
  text-align: left;
  width: 100%;
  margin-right: -500%;
  margin-left: -500%;
  padding-right: 500%;
  padding-left: 500%;
 }
}

カスタムメニューで変更した場合のグローバルナビメニュー

カスタムメニューで独自のメニューを作成し、グローバルナビに適用させた場合は、上記のセレクタ以外にも以下のセレクタが使えます。

#menu-global-nav {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveでの注意点とは？

Twenty Eleven の記事でもお伝えしたように、基本的な考え方は変わりません。なので、別に Twenty Eleven でなくても Twenty Twelve でなくても使えるテクニックです。
ただ、Twenty Twelve の場合はデフォルトの CSS で影響で、うまくいかず、ちょっとした工夫が必要になります。
以下は上記設定の考え方になりますので、興味のある方はどうぞ・・・。

グローバルナビゲーションメニューだけ広がらない

Twenty Eleven の場合と同じようにスタイルシートを記述した場合、グローバルメニューの部分がブラウザいっぱいに広がってくれません。以下のようにある範囲までしか広がらないのです。

その範囲はというと、どうやら【 .site 】というセレクタで指定されている部分のようです。

なぜ、グロナビはサイトの範囲内までしか横に広がってくれないのか？

その原因はスタイルシートに記述されている【 overflow 】の値にありました。デフォルトでは以下のように記述されています。

/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .site {
  margin: 0 auto;
  max-width: 960px;
  max-width: 68.571428571rem;
  overflow: hidden;
 }

この【 overflow 】ははみ出た部分をどうするか、ということを指定しています。デフォルトの指定は【 hidden 】なので、はみ出た部分は非表示になります。つまりこれが原因で横に広がった部分が表示されず、サイトの範囲内に収まったように見えていたわけです。
この部分を表示させるには、【 overflow 】の値を【 hidden 】から【 visible 】へ変更する必要があります。これで、グローバルナビゲーションメニューも左右横にちゃんと広がってくれます。

というのがベターだと思います。
しかし、WordPress のデフォルトテンプレートである Twenty Eleven や Twenty Twelve など、初期設定のままだとトップページやアーカイブページでも全文表示なっているます。いちいち タグを挿し込むのも面倒くさい・・・。他のテンプレートでも同じようになっているかもしれません。
この記事では、条件分岐タグを使って全文表示と抜粋表示を使い分ける方法をご紹介します。

条件分岐タグの役割を理解しよう

まず、簡単にWordPressの条件分岐タグについて説明しておきたいと思います。理屈はそんなに難しくないはずです。PHPを使っていますが、特に専門的な知識がなくても使えてしまう便利さがあります。（少なくともぼくはPHP、よく分っていません）
条件分岐タグの基本構造は・・・

というものです。簡単ですよね？これを実際のPHPのタグに合わせて見てみましょう。

<?php if ( 【条件１】 ) : ?>
【表示１】
<?php else : ?>
【表示２】
<?php endif; ?>

といった感じです。あとは、これらを踏まえて指定したい条件と表示させたい内容のタグを埋め込んでいけばいいというわけです。

条件を複数指定したい場合

条件を複数指定したい場合は、【 || 】この縦２本のラインを挟めばOKです。例えば、「もし、【条件１】【条件２】【条件３】の場合は・・・」というような指定をしたい場合は以下のように指定します。

<?php if ( 【条件１】 || 【条件２】 || 【条件３】 ) : ?>

多分、抜粋表示をさせたいのはカテゴリーページやタグページなど、複数に渡るはずなので、この複数の条件指定を覚えておきましょう。
ちなみに、この線（ → | ）なんて呼ぶのか分りませんが、キーボードの右上にあるはずです。。。

条件分岐タグを使って全文表示と抜粋表示を切り替える

さて、いよいよ実践です。今回は以下のように指定したいと思います。

つまり、文章にしてみると、『もし、トップページ・アーカイブページ・検索結果エページの場合は抜粋表示にして、それ以外の場合は全文表示にしてね』となります。
ちなみに、アーカイブページとは、「カテゴリーページ」・「タグページ」・「作成別ページ」・「日付別ページ」の結果を全て含んでいます。なので、条件としてはアーカイブページを指定しておけばOKです。

全文と抜粋を着替える条件分岐タグの指定例

全文表示と抜粋表示の切り替えを指定するためには以下のように記述します。

<?php if ( is_home() || is_archive() || is_search() ) : ?>
	<?php the_excerpt(); ?>
<?php else : ?>
	<?php the_content(); ?>
<?php endif; ?>

ちなみに、トップページを指定する WordPress の条件分岐タグは

is_home()

カテゴリーページを指定する条件分岐タグは

is_archive()

検索結果一覧ページを指定する条件分岐タグは

is_search()

です。
また、抜粋表示を示す WordPress のタグは

<?php the_excerpt(); ?>

全文表示を示すタグは

<?php the_content(); ?>

です。実際はスタイルシートの指定やその他の PHP が記述されていると思いますが、単純化するとこのようになっています。

タグはどこに書き込めばいいのか？

ここからは Twenty Eleven、もしくは Twenty Twelve を元に解説していきます。条件指定の仕方は WordPress 共通していますので、お使いのテンプレートに合わせてカスタマイズしてみてください。
それでは、まずは content.php を開きましょう。Twenty Eleven は 35 行目、Twenty Twelve は 33 行目辺りから、コンテンツの表示方法についての記述があります（子テーマに複製してから作業してくださいね）。

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>

元々の記述内容は、『もし、検索結果一覧ページなら抜粋表示にして、それ以外は全文表示にしてね〜』となっています。なので、単純に最初の

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

の部分を

<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>

に変更すれば OK です。
簡単ですね。ぜひ試してみてください。

WordPress がバージョンアップして 3.5 になりました。それに伴って、新テンプレートの Twenty Twelve も登場。だいぶシンプルで無駄のないデザインになっています。ミニマルデザイン好きなので個人的には好きです。カスタマイズの方もおもしろくなりそうです。
Twenty Twelve も、以前 Twenty Eleven 同様、ブログの最新の投稿が一覧で表示されているページは各投稿が全文表示されてしまいます。厳密に言うと検索結果などの場合は抜粋表示されるようになっていますが、トップページの最新投稿では全文表示の記事が数記事ならぶとスクロールが非常に面倒になってしまいます。
トップページに最新記事一覧を表示させる際には抜粋表示されていた方がいいと思うので、カスタマイズ方法をメモしておきたいと思います。

結論：最新投稿記事を一覧表示するには条件分岐タグを使う

条件分岐タグを使うとうまくいきました。
条件分岐タグとは、WordPress のタグのひとつで、「○○の場合は■■を表示して」のような指示を出すためのタグです。これを使う事によってトップページ（フロントページ）に記事全文が一覧表示されることはなくなり、抜粋表示ができるようになります。

変更するテンプレートと、タグの記述方法

変更を加えるテンプレートは【content.php】です。子テーマにコピーしてから編集してくださいね。
3 行目に以下のような記述があります。

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

これは、「もし検索結果なら・・・」という条件を示して、「その場合は【excerpt】、つまり抜粋で表示してね」という指示をしています。この条件を仮に【条件１】としておきます。
そして、その下に以下のようなタグを追記すると・・・

<?php elseif ( is_home() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->

「もし、【条件１】でない場合は、こっちの条件を適用してね」という指示を出すことができます。同じように抜粋にするタグを埋め込んでいるので、「もし、条件１でない場合は、抜粋で表示してね」という意味になります。一応こちらの条件は【条件２】としておきましょう。

条件分岐タグ【is_home】の意味

ここで指定している条件は、表示設定におけるフロントページの表示で【最新の投稿】を指定している場合のトップページや、【固定ページ】を指定している場合の投稿ページに反映されます。

各個別投稿記事を見る場合は全文表示に

これでトップページで投稿記事が一覧表示されている場合に抜粋記事として表示させることができます。そして、記事タイトルをクリックすると全文表示の個別投稿記事のページが表示されるようになります。
その条件を指定しているのは、先ほど【条件２】のタグを追記した後に書かれている【else】から始まる部分です。意味としては、「【条件１】でも【条件２】でもない場合は〜」ということで、この場合は全文表示などを指示しています。

参考にさせて頂いたブログ

ありがとうございます！