問題）レスポンシブデザインに対応できなくなった

Twenty Elevenはもともとレスポンシブデザインになっていました（レスポンシブデザインって何？　という場合は、ググってみてください）。しかし、横幅いっぱいにヘッダーやフッターを広げると、なぜかレスポンシブデザインではなくなってしまったのです。iPhone で確認すると、サイトは単純に縮小されたように表示され、第一印象では「小さすぎて何が書かれているか分からない……」という感じです。なのでタップして拡大しないといけません。
そういう不具合もあり、レスポンシブウェブデザイン対応の Twenty Eleven であるにも関わらず、WPtouch というプラグインを使ってスマホ表示を最適化していました。
しかし、せっかくのレスポンシブデザインを無下にするのももったいないと思い、なんとか解決してみようと思いました。また、レスポンシブデザインが昨年から流行のようなので、対応するための考え方や基礎を知るためにも必要な取り組みでした。
そういうわけで、改めて、ヘッダーやフッター、またはナビゲーションメニュー（グローバルメニュー）などを、ブラウザの横幅いっぱいに広げて表示させるカスタマイズ方法をまとめたいと思います。

ブラウザの幅を超えて表示させるCSSの基本的な考え方

こちらは過去にメニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法の記事で取り上げていますので、詳しくはそちらを見て頂きたいのですが、簡単にまとめておきます。

メニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法

主にマージンとパディングによって実現しています。ネガティブマージンという、マージンに負の値を指定して要素をはみ出す方法を使います。しかし、そのままだと中のコンテンツまではみ出してしまうので、パディングで同じ値だけ内側に押し込みます。そうすれば、見かけとして上の図のような、メニューなどの要素が body をはみ出して表示されるようになります。
ただし、このままだと右にいくらでもスクロールができてしまいます。マージンがはみ出した分、サイトの幅自体が広がってしまったのです。

そこで登場するのが【 overflow 】です。これを使うことで、はみ出した要素を表示させないようにできます。overflow を使うときのポイントは２つです。

【 overflow: hidden; 】によって、ブラウザの幅をはみ出した部分を非表示にしてくれます。なので、マージンを広げてもブラウザの幅以上にサイトが広がって表示されることはありません。そういうわけで、過去の記事に書いていた CSS の指定方法はこちらでした。

/* 前提条件の記述 */
html {
    overflow: auto;
}
body {
    overflow: hidden;
    position: relative;
    min-width: 1000px;
}
/* 横幅を背景いっぱいに広げたい場所に追記 */
#example {
    margin: 0 -500%; /* 上下の margin は元の値に合わせて適宜変更 */
    padding: 0 500%; /* 上下の margin は元の値に合わせて適宜変更 */
}

ただ、既に言ったようにこれだとレスポンシブデザインに対応してくれなくなります。そこで、Twenty Eleven のレスポンシブデザイン対応を活かしつつ、ブラウザや背景いっぱいに要素を広げて表示させる方法が必要になります。

結論）追記するのは overflow だけで良かった件

上記の書き方は、参考にさせて頂いたサイトからそのまま引っ張ってきたものなんですが、どうも Twenty Eleven の場合、不必要な記述があるようでした。まず、【 min-width 】はいりません。これが一番の原因です。これのせいでレスポンシブデザインがレスポンシブルじゃなくなっていたわけです。
また、【 position:relatvie; 】も不要でした。これが無くても問題なく横幅を広げられるようです。ただし、他の要素との関係で、【 positoin:relative; 】の指定がないと上手くいかないことがあったので、適宜追記して頂くといいと思います。なんかうまくいかない時は、position プロパティを疑ってください。
要するに、以下をスタイルシートに追記すればOKです。

html {
	overflow: auto;
}
body {
	overflow: hidden;
}

そして、ブラウザいっぱいに広げたい要素にネガティブマージンとパディングを指定します。この書き方に関しても、まとめて記述するより分けて記述した方が安全です。なぜなら、元々上下にマージンやパディングが指定されていた場合、うっかりその指定を打ち消してしまう可能性があるからです。そういうわけで、以下のような書き方がいいと思います。

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

Twenty Eleven の場合、記述する場所は以下のようになります。

画面いっぱいに広げたい要素のidと【 #example 】を置き換えてください。
さて、以上でうまくいくはずです。画像じゃ分かりにくいですが、スマホで表示した際にレスポンシブデザインに対応しています。

WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも）

さらにトップページの記事一覧を抜粋表示にする方法はこちらにまとめています。

トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-

上記 2 つのカスタマイズを行った上で、以下の内容へ進んでいくようになります。また、取り扱っているテンプレートはワードプレスにデフォルトで入っている Twenty Eleven になります。

記事へのパーマリンクをコピペで設定する

ワードプレスは主に PHP で動いているわけで、記事タイトルやパーマリンクなんかのタグは全て PHP のタグになっています。PHP についてはまだよく分からないのですが、記事タイトルをクリックすれば個別記事ページに飛ぶのだから、タイトル部分と同じような表記にすればうまくいくだろうことは何となく想像がつきます。
早速目的のタグを探してみましょう。

どのように個別記事へのパーマリンクは指定されているのか？

記事一覧ページに表示されている内容は、【 content.php 】で編集できます。すでに前述の別記事の通りにアイキャッチは表示されるように設定しているので、以下のようになっています（だいたい40行目あたりです）。

<div class="entry-content">
	<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span> /* サムネイル形式でのアイキャッチ表示 */
	<?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 -->

また、同じ【 content.php 】内で記事タイトルを吐き出すタグにどのようなリンクタグが貼ってあるかを見てみると、以下のようにタイトルを吐き出すタグをリンクタグが挟んでいました。15 行目の記述です。

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

つまり記事タイトルを表示させる【 <?php the_title( ) ; ?> 】タグの前後を、【 <a href=””> 〜 </a> 】のリンクタグで挟んでいるわけです。なので、同じようにアイキャッチを出力している PHP タグを <a> タグで挟めばアイキャッチをクリックした際に個別記事ページへ飛ぶようになるはずです。

アイキャッチ画像にパーマリンクを指定する

早速以下のようにしてアイキャッチをリンクタグで挟んでみます。

<div class="entry-content">
	<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span></a>
	<?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 -->

これでアイキャッチをクリックすると、個別記事のページが表示されるようになります。「タイトル」、「続きを読む」そしてアイキャッチと、記事を全文表示させるための導線が広がりました。これはユーザビリティ的にも必須ですね。早くしておけばよかった・・・。
ちなみに、<span> で指定しているスタイルは、アイキャッチ画像の表示を回り込ませるための指定なので、好みで変更するなり削除するなりしてください。

アイキャッチ画像の上にマウスを持って来た時に発光させる方法

これでアイキャッチからも個別記事へリンクできるのですが、今のままだとアイキャッチにマウスポインタを持って来ても変化がないので、リンクだと気付かれないかもしれません。
通常テキストリンクなどは、マウスポインタを重ねると（いわゆるロールオーバーで）アンダーラインが表示されたり色が変わったりしますよね？　また画像の場合でも枠線が現われたり光ったり暗くなったりと、「ココはリンクです！」ということを主張しているのが基本です。
なのでアイキャッチ画像も「リンクなんです！」ということを誇示できるようにしたいと思います。これらは全て CSS での指定になりますので、ここからは CSS のお話・・・。

結論

以下のように【 content.php 】と、【 style.css 】を変更すれば OK です。

content.phpの変更

<div class="entry-content">
	<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;" class="linkimg" ><?php the_post_thumbnail('thumbnail'); ?></span></a>
	<?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 -->

2 行目の <span> の中に【 class=”linkimg” 】を追記しました。これでサムネイルだけに class を指定したことになります。

style.cssに追記

/* =リンクの発光
----------------------------------------------- */
/* サムネイル */
a .linkimg {
	background:none!important;
}
.entry-content a:hover .linkimg {
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background:none!important;
}

CSS へは上記をそのまま追記すれば OK です。これでアイキャッチ画像にマウスのポインタを重ねると淡く発光するようになります。発光というか、正確には半透明にしているわけです。これで光っているかのように見えます。
クロスブラウザ対応のテクニックのようなので、どんどん使っても問題なさそうです。
半透明具合を調節したい場合も、CSS の方で変更できます。上記の 9、10、11 行目には 0.6 とか 60 といった数字が記載されていますが、これは透明度を表しています。なので、数字を小さくすると透明度が増してより発光しているように見えますし、数字を大きくすると変化が乏しくなります。
ちなみに上記の書き方は、アイキャッチだけに適用される書き方です。気になった方はぜひ試してみてください。

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

― Design Plus
ありがとうございました！

ブラウザの画面いっぱいにグローバルメニューを広げたい

今回目指しているのは、こんなデザインです。

よくグローバルメニューやヘッダー部分、あとはフッター部分でよく見るんですが、body 要素の横幅を無視してブラウザの画面一杯に広がるようになっているサイトがありますよね。元からそのようなデザインになっているテーマもありますが、今回は Twenty Eleven のように、そうなってはいないテーマでブラウザいっぱいんに広がる背景を実現しようというわけです。

仮説）要素をブラウザの画面いっぱいに広げるにはどうしたらいいか？

どうすればいいかと考えた結果、margin の右と左を負の値で横に広げればいいのではないかと仮説を立てました。margin に負の値を指定すると（ネガティブマージン）要素をはみ出します。しかし、そうすると中身のコンテンツまではみ出てしまうので、padding の右と左に同じ値を正で指定して元の位置まで戻す、という方法でうまくいくのではないか、という仮説です。。。が、言葉で説明が難しいのでこんなイメージです。

結果）サイトの横幅自体が広がって・・・

で、これを実践してみたのですが、本当にサイトそのものの横幅が広がっちゃって、右側へいくらでもスクロールできてしまう状態に・・・。ぱっと見 OK なんですが、横スクロールバーが拡大してしまい使い物になりませんでした・・・。
まぁつまり失敗だったわけです。

対策）横スクロールバーの拡大を防ぐ方法を発見！

ブラウザの画面一杯にメニューやヘッダー or フッターを広げる方法はあまり情報が見つからず苦戦していましたが、ひとつ、参考になったブログを発見したました。

このブログに書いてあった事は、横スクロールバーが拡大してしまった場合、その拡大を防ぐ方法があるということ。使ったのは CSS の【 overflow 】という要素。

「ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定するための要素」

という事でした。
この【 overflow 】に【 hidden 】と指定すれば、はみ出した部分を表示させないということが可能です。
以上を踏まえて、Twenty Eleven の CSS を変更してみました。

ヘッダーやメニューをブラウザの画面一杯に広げるための作業手順

テーマは Twenty Eleven で試しています。上記のブログに書いている class や id とは異なるので、あくまでも Twenty Eleven の class や id などの要素に対応している記述だという点はご注意ください。また ブラウザ対応も上記のブログに書かれている範囲に止まります。
ですが、id や class こそ違えど、どんなテーマでも応用ができると思います。

まずは下準備

まずは先ほど説明した【 overflow 】の要素を加えます。
Twenty Eleven の子テーマを作って、以下のスタイルを追記します。

html {
    overflow: auto;
}
body {
    overflow-x: hidden;
    position: relative;
    min-width: 1000px; /* 指定してもしなくてもいいと思います。指定するとブラウザの幅をち縮めても、横幅が 1000px 以下にはならなくなります。 */
}

【 html 】という要素は元々 Twenty Eleven の　CSS には記述されていませんので、追記してください。【 html 】は【 body 】のさらに親となる要素、、、というイメージでしょうか。
カスタマイズは、必ず子テーマを作成してから行うのを忘れないように！

グローバルメニューをブラウザ一杯に広げる

下準備が整いましたので、まずはグローバルメニューを body の要素をはみ出して、ブラウザ一杯に広がるようにしてみたいと思います。Twenty Eleven のグローバルメニューに関する指定は【 #access 】という部分です。だいたい 540 行目辺りです。
※ヘッダー部分のCSS要素に関してはこちらを参考ください。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

【 #access 】の【 margin 】と【 padding 】の左右を以下のように指定します。
どちらとも指定の仕方は【 上　右　下　左 】の順番ですが、4 番目の左を指定しなければ、2 番目の値が “左右同じ” というふうに解釈されます。

/* =Menu
-------------------------------------------------------------- */
#access {
/* paddingの追記とmarginの変更 */
    padding: 0 500%;
    margin: 0 -500% 6px;
    width: 100%;
}

【 margin 】は左右に関しては元々【 auto 】となっていますので、ここにマイナスの値（ネガティブマージンと言うらしい・・・）を入れて body 要素からはみ出させます。margin-bottom が 6px となっているのは、Twenty Eleven の親テーマのスタイルがそのようになっているので、それを引き継いでいます。
指定する値は【 -500% 】にしていますが、はみ出すくらい大きな値であれば問題ありません。好きな値を入れてください。
デフォルトでは【 padding 】は何も指定されていません。【 margin 】の左右にはみ出した分だけ、今度はプラスで指定して相殺させるわけですね。
純粋に margin と padding の左右のみを指定する場合は以下のように書いても OK です。

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

するとこんな感じでグローバルメニューがブラウザ一杯に広がります。

もちろん、横スクロールバーは出てきません（縦スクロールしかできません）。

ヘッダーも横一杯に広げてみましょうか

ついでにヘッダー部分もブラウザ一杯横に広がるようにしてみたいと思います。分かりやすくするために、まずはヘッダーの背景色を黄色にしてみました。

#branding { /* ヘッダーのデザインを指定するidです */
    background: #ff0; /* 背景色を黄色に指定 */
}

親テーマでは 500 行目辺りにありますが、子テーマに【 #branding 】の背景要素【 background（or background-color） 】を追記しています。

後はこの黄色の背景が横一杯に広がればいいわけですね。
下準備が終わっていれば、あとは margin にマイナスの値を、padding にはその絶対値を取るだけです。

#branding { /* ヘッダーのデザインを指定するidです */
    background: #ff0;
    margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%; /* マージンで横へはみ出した部分を相殺 */
}

これで黄色の背景が画面一杯に広がりました。

まとめ

Twenty Eleven を使っている場合は、最低限以下のようにスタイルを追記すれば、ブラウザいっぱいに広がるヘッダーやナビゲーションメニュー、フッターなどを実現することができます。
あとは広げたい要素の margin にはマイナス、padding にはプラスを、それぞれ left と right の部分に大きな値を指定しておけばいいわけですね。

/* はみ出した要素を表示させない */
html {
    overflow: auto;
}
body {
    overflow: hidden;
    position: relative;
}
/* 特定の要素をブラウザいっぱい横に広げる */
id や class {
    padding: 0 500%;
    margin: 0 -500%;
}

以上です。