１．クオリティの高い写真やイラストなどのグラフィック素材を使う

写真や画像のクオリティはとても重要です。プレーンで面白みのないサイトも、クオリティの高い写真があるだけで全然違う印象になります。これはお金をかけるのが一番手っ取り早いですが、最近は無料でも高解像度でクオリティの高い写真やイラストを入手できるので、いくつか有用なサイトをご紹介しておきます。

pixabay

＞ http://pixabay.com/

無料ですし、パブリックドメインの写真やイラストを見つけることができますパブリックドメインについてはこちら）。もちろん商用でも使えますし、加工も自由です。著作権のない素材なのであなたの好きに使うことができます。

写真AC

＞ http://www.photo-ac.com/

こちらも無料・商用利用可・クレジット表記不要・リンク不要の高品質素材があつまっています。日本のサイトなので日本人の写真もそろっています。

モデルピース

＞ http://www.modelpiece.com/

最近色んな媒体でここのモデルさんの写真を見るようになりましたよね。基本的に商用利用 OK で、クレジット表記やリンクなども不要です。モデルリリースも取得済みなのでとても使いやすく探しやすいサイトです。かわいい、美人なモデルさんがそろっています！
※2014.11 月現在、ポイント制の有料素材となっています。

ぱくたそ

＞ http://www.pakutaso.com/

こちらもとてもクオリティの高い写真がそろっています。商用利用も OK ですし、クレジット表記やリンクもいりません。モデルリリースに関しては、モデルさんごとに違うので、使用する前に必ずチェックしましょう。
そして、このサイトの写真は面白いのが多いです。時事ネタをすぐに素材にしてくれたり、、、注目を集めるアイキャッチ素材としてパワーを発揮するでしょう。

Freepik

＞ http://jp.freepik.com/

こちらは色んな素材サイトで提供されている写真やイラストを、横断的に検索できるサイトです。いろんなサイトをあちこち探さなくていいので、便利です。ただし、著作権や利用規約などは各サイトのルールに従ってください。

Icons DB

＞ http://www.iconsdb.com/

フラットデザインには欠かせない、フラットなアイコンが豊富にあります。サイズ、形式（jpg, png, gif など）、カラーなどが自由に選べます。変に凝っていないのでデザインのカスタマイズもとてもやりやすくなっています。商用利用も OK です。

写真やイラストの加工に関して

高品質な写真やイラストがあっても問題はそれを加工できないことです。加工できない理由は規約のせいではなく、スキルがないから（もちろん、ライセンスによっては加工不可の素材もありますが）。画像加工はノンデザイナーにとって一番厄介なものかもしれません。そこで、最低限これだけできれば問題ないという加工方法をご紹介します。
それは、、、

写真（イラスト）＋キャプション

です。写真の下に文字を入れるわけです。写真は人の目を引きます。そこにキャッチコピーなどを組み合わせると、メッセージがより明確に伝わるようになります。キャプションの入れ方にはポイントがあります。

広告の父・オグルヴィのレイアウトの法則に従う

広告の父を呼ばれるデビッド・オグルヴィは、広告のレイアウトに関してシンプルな法則を提唱しました。それが、「3 分の 2 ／ 3 分の 1 法則」です。この法則を説明すると、

この法則に従って、画像にもキャプションをつけましょう。画像が上 3 分の 2、キャプションが下 3 分の 1 の構図にします。もしくはその逆で、キャプションが上 3 分の 1、画像が下 3 分の 2 という構図です。ここに書き添える文字は読まれる確率が高いので、相手の中をさらに引くコピーにするとよいです。

その他は黄金比や白銀比などを参考にしてみてください。

画像の上に文字をもってこない

できるだけ画像の上に文字を持ってこないようにしましょう。画像の上に文字をかぶせてしまうと、文字が読みにくくなります。読みにくい文字を読もうとすると、目を細めたり目を凝らしたり若干のストレスを感じます。そのようなストレスを相手に与えないようにしましょう。
なるべく写真の背景がごちゃごちゃしておらず、単一色に近いような場所だとキャプションを入れやすくなります。もしくは、写真とキャプションは別枠にして表示させる、写真の上に半透明のレイヤーを重ねてその上にキャプションを記載する、などの方法がオススメです。

できれば覚えた方がいいテクニック……切り抜き

画像の加工で唯一スキルっぽいものを覚えるとしたら、それは切り抜きだと思います。写真の背景を除いて人物だけにしたい、被写体だけを使いたい、といったニーズが一番多いと思います。
そこで、切り抜きして背景をまっさらにする、そんなテクニックがあれば色々幅が広がるのは間違いありません。まぁでもブログコンテンツを更新していくような使い方なら、別に必要ないとは思います。
さて、切り抜きに関しては Gimp というフリーソフトを使った方法が、色んなサイトで紹介されていますので、参考にしてみてください。

２．1px のドロップシャドウをかける

ドロップシャドウとは影のことです。例えば文字にドロップシャドウを加えると、、、

また、一定の範囲（要素）にドロップシャドウを加えると、、、

分りやすく黄色の影にしていますが、通常はグレーで OK です。1px でもありませんので、だいぶぼやっとした感じにみえると思います。実際はこんなぼやっとした感じで使うことはないでしょう。

やってしまいがちなダサいドロップシャドウ

ぼくもこの CSS の記述を知ったときはやってしまっていました。今思うととてもかっこわるい使い方してたな〜と思います。それは、影を大きくつけることです。5px とか・・・。ぼかしも中途半端だったり。

もちろん、全体のデザインに応じて影の付け方もそれぞれですが、専門スキルのない素人は無難に 1px で、ぼかしも 1 px か　0px の影にしておきましょう。それで十分玄人っぽく見えます。

３．ほんのわずかに、微妙〜にグラデーションをかける

フラットデザインが流行しているので、べた塗りのサイトもよく見かけるようになりましたが、一見べた塗りっぽく見えても、微妙にグラデーションがかかっていたります。
グラデーションをかけるには、このようなウェブ上のサービスを利用するのが簡単です。そして、微妙なグラデーションのポイントは明度を微妙に上げるか落とすかすることです。
見た感じ分かるか分からないかのきわどいくらいに明度を変更させてください。それで質感に落ち着きがでます。はっきり分かり過ぎるグラデーションを付けるとダサくなるので注意。

４．リンクにマウスカーソルを乗せた際、ゆっくりした変化を付ける

リンク部分にマウスのカーソルを合わせると、アンダーバーが現れたり色が変化したりといった効果を付けているサイトがほとんどだと思います。この変化をスローにすることで、ちょっと落ち着いた感じが醸し出されます。変化が自然な感じでかっこいいのです。

CSS3 によって実現できます。

/* トランジションの設定：つまりスローな動き・変化の設定 */
a {
color: #004f8c;
text-decoration: none;
-webkit-transition-property: background,color;
-webkit-transition-duration: 1s;
-webkit-transition-delay: 0s;
-webkit-transition-timing-function: ease;
-moz-transition-property: background,color;
-moz-transition-duration: 1s;
-moz-transition-delay: 0s;
-moz-transition-timing-function: ease;
-o-transition-property: background,color;
-o-transition-duration: 1s;
-o-transition-delay: 0s;
-o-transition-timing-function: ease;
}
/* リンク部分の設定 */
.example a {
display: inline-block;
margin-bottom: 1em;
padding: 0.1em 1em;
float: right;
color: #eee;
background: #424242;
}
.example a:hover,
.example a:focus,
.example a:active {
border-bottom: 0px;
background: #004f8c;
}

５．サイトのカラー決めで迷った時はこの配色をパクる

ここで紹介されているシーン別の配色をそのまま参考にして取り入れれば、とんでもない配色になってしまうことは、避けられると思います。あとは配色パターンの中から 3 ~ 4 つくらいの色を選び、あまり複数の色を使いすぎないように注意してデザインを整えましょう。
また緩急が大事ですので、目立たせるべき部分とそうでない部分をはっきりさせ、色のコントラストで目立たせるべきところが目立つように整えていきましょう。

② コンテンツのフィードを、CSS だけでグリッドデザインする方法はあるのでしょうか、参考になるサイトがあれば教えていただけないでしょうか。わたしは以下のような記述をつかっていますが、レスポンシブには対応できません。

.content {
 width: 730px;
 margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8 {
 float: left;
 display: inline;
 margin: 4px 0 4px 17px;
 padding: 10px 0;
}
.grid1 {width: 66px;}
.grid2 {width: 149px;}
.grid3 {width: 232px;}
.grid4 {width: 315px;}
.grid5 {width: 398px;}
.grid6 {width: 481px;}
.grid7 {width: 564px;}
.grid8 {width: 647px;}
.first {margin-left: 0; clear: left;}
.cf:before,
.cf:after {
 content: “”;
 display: table;
}
.cf:after {
 clear: both;
}
.cf {
 zoom: 1;
}

さて、早速ですが回答です。
このサイトでも、グリッドデザインを取り入れているページがいくつかあります（例えばこちらの WordPress のカテゴリーページ）。ここでは 2 カラムを CSS で表現しています。で、その時に参考にさせて頂いたのがこちらのサイトです。

ただ、、、質問者さんがお困りのように、レスポンシブデザインに対応するにはこれだけではダメでした。iPhone とかで見ると、右側が切れて表示されてしまいます。なので、スマホなどで見るときは 1 カラムになるようにする必要がありました。そしてこのサイトはそれを行っています。

グリッドデザインをスマホやタブレットなどでキャンセルするCSSの書き方

ぼくの環境（このサイト）で行った記述は以下の通りです。

グリッドデザイン対応

.container {
	width: 940px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	display: inline;
	margin-left: 20px;
	margin-bottom: 2em;
}
.grid1 {width: 60px;}
.grid2 {width: 140px;}
.grid3 {width: 220px;}
.grid4 {width: 300px;}
.grid5 {width: 380px;}
.grid6 {width: 460px;}
.grid7 {width: 540px;}
.grid8 {width: 620px;}
.grid9 {width: 700px;}
.grid10 {width: 780px;}
.grid11 {width: 860px;}
.first {margin-left: 0;clear: left;}
/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix {zoom: 1;}

レスポンシブデザイン対応

@media (max-width: 800px) {
	.container {
		width: auto;
	}
	.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
		float: none;
		margin-left: 0px;
		}
		.grid1 {width: auto;}
		.grid2 {width: auto;}
		.grid3 {width: auto;}
		.grid4 {width: auto;}
		.grid5 {width: auto;}
		.grid6 {width: auto;}
		.grid7 {width: auto;}
		.grid8 {width: auto;}
		.grid9 {width: auto;}
		.grid10 {width: auto;}
		.grid11 {width: auto;}
}

解説

グリッドデザインの方はぼくも参考にさせて頂いたサイトからコピペしただけですし、解説は省きます。ただ、グリッドデザインはうまくいったんですが、スマホで見ると非常に見にくくなってました。
他はレスポンシブデザインになっているのに、2 カラムにしたところだけレスポンシブデザインに対応できていなかったのです。そこで、スマホや iPad などのタブレットの場合はグリッドデザインをキャンセルして 1 カラムになるようにしました。
上記の CSS を見てもらうと分かると思いますが、レスポンシブデザイン対応の方では、グリッドデザインのために指定した内容をことごとく打ち消しています。もっと具体的に言うと、グリッドデザインのために指定した横幅（ width ）を、全て auto にしています。あと大きなポイントは周り込みを解除したりといったところですね。

レスポンシブデザインに対応させるための CSS のポイント

上記のレスポンシブデザイン対応の CSS では、１ 行目と 20 行目をハイライトしています。この【@】で始まるハイライトで囲まれた範囲が、スマホやタブレットでのレイアウトやデザインを決めています。【 max-width 】で指定した数値以下になった場合に、スタイル変化させることができます。
Twenty Eleven の元々のスタイルシートにも、2286 行目からこの記述が見つかると思います。【 max-width: 800px 】から始まり、【 max-width: 650px 】、【 max-width: 450px 】と横幅がだんだん小さくなっています。このように、段階的にスタイルを変化させているわけですね。
このサイトは Twenty Eleven を親テーマにカスタマイズしています。Twenty Eleven は元々レスポンシブデザインに対応していますが、カスタマイズする中で PC 向けに色々変更していると、スマホなどで見た場合にレイアウトが崩れていることがあります。
そんな時は、レスポンシブデザインに対応させるために、変更箇所を指定しなおす必要があることを知りました。その方法が、【 @media (max-width: 800px) 】のような記述から始まる部分だったわけです。
スマホやタブレットでレイアウトが崩れている場合は、この部分の記述を変更・追記する必要が出てくると思います。グリッドデザインを取り入れた場合も、同様にスマホやタブレットでのレイアウトはどうするのかを指定し直しましょう。

グリッドデザインを取り入れたページをレスポンシブデザイン対応にしたページをチェック

以上が、ぼくの知識範囲での回答になります。ただ、もしかしたらもっとスマートな方法があるのかもしれません。もし他の方法を知っている方がいたら、ぜひ教えてください。
ちなみに、レスポンシブデザインの対応状況を確認できる便利サイト、Demonstrating Responsive Design を使うと、スマホやタブレットでのレイアウトの違いを簡単にチェックできますよ。
このサイトを使って、いろいろなサイトのページレイアウトを確認してみてください。上記のような CSS で、実際どのようなページレイアウトになるのか、またデバイスごとにどのようにレイアウトが変わるのかがイメージできると思います。

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

全てに共通する記述

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 】へ変更する必要があります。これで、グローバルナビゲーションメニューも左右横にちゃんと広がってくれます。

カスタムフィールドを使用して、任意のCSSファイルを適用させる

カスタムフィールドを使います。カスタムフィールドは投稿や固定ページの編集画面に表示されています。表示されていない場合は、左上の【表示オプション】を開いて、【カスタムフィールド】にチェックを入れてみてください。投稿エディタの下にカスタムフィールドという項目が表示されるはずです。

ここのカスタムフィールドに、個別の外部CSSファイルを読み込ませます。手順は以下の通りです。

１．functions.php に必要事項を追記

子テーマに作成した functions.php で構いません。以下の内容を追記してください。ちなみに、子テーマに functions.php を作成する場合はこちらを参照のこと。

/* カスタムフィールドで外部CSSを複数読み込み */
function include_custom_css(){
	if(is_single()||is_page()){
	if($css = get_post_meta(get_the_ID(), 'includeCSS', true)){
	echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$css}\" />\n";
						}
					}
				}
add_action('wp_head','include_custom_css');

２．子テーマ内にCSSファイルを作成

まずは分かりやすいように、CSSというディレクトリ（フォルダ）を作成しておきましょう。そして、そのディレクトリの中に任意のファイル名でCSSファイルを作成します。例えば以下のような感じです。

３．カスタムフィールドを追加

１．の作業を行うと、カスタムフィールドの【名前】の部分に【includeCSS】という選択が表示されているはずです。まずはこれを選択します。選択肢がない場合は、新たに【includeCSS】を追加入力してください（確か古いバージョンのWordPressの場合、直接入力だった気がします……）。

そして、【値】の部分に、CSSファイルまでの絶対パスを記載します。先ほど作成したCSSファイル（new-style.css）の場合、絶対パスは以下のようになります。

上記２点を入力したら、【カスタムフィールドを追加】をクリックします。これで、このページには new-style.css に記載したスタイルが適用されるようになります。

スタイルを記述する際の注意事項

新たに作成したスタイルシート（この例では new-style.css）に、スタイルを記述する際にはちょっとした注意が必要です。例えば Twenty Eleven の場合、任意のページの見出し２の色を赤に変えるには、new-style.css に以下のように記述必要があります。

.entry-content h2 {
	color: red;
}

単純に h2 とだけ書いて指定しても変化がありません。親テーマのスタイルシートの方で【 .entry-content h2 】と記載されているので、同じように記載して上書きする必要があります。このように、該当すると思われる id や class を指定してみても変化がない場合は、親テーマでどのように指定されているかをチェックしてみると、正しい記述方法が分かると思います。
Twenty Eleven 以外のテーマを使っている場合でも、同様に親テーマのスタイルシートを元に、新たに指定しなおしてみてください。これで全てのページのスタイルを簡単に自由に変更することができるようになります。

参考サイト

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

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

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 】を置き換えてください。
さて、以上でうまくいくはずです。画像じゃ分かりにくいですが、スマホで表示した際にレスポンシブデザインに対応しています。

ナビゲーションの「次へ」と「→（矢印）」を
一列に表示したい！

つまりこうしたいわけです。

これは CSS をちょっと変更すればうまく整いました。
まず Twenty Eleven のテーマファイルの【style.css】を開いてだいたい 1700 行目に差し掛かる辺りから【=Navigation】という部分がでてきます。その最後の方に【Singular navigation】という項目がありますが、その一部を以下のように変更します。
【該当箇所】

#nav-single .nav-previous,
#nav-single .nav-next {
float: none;
width: auto;
}

【変更後】

#nav-single .nav-previous,
#nav-single .nav-next {
float: left; /* 左に回り込むように指定 */
width: auto;
}

ナビゲーションの「前へ」と「次へ」に関する部分の回り込みが【none】となっていたので、【float: left;】というように左に回り込ませています。こうすると、ナビゲーションの「←前へ」と「次へ→」が一列にきれいに表示されるようになります。

ちょっと気になる点が・・・

でも、よくよく見ると、「←前へ」と「次へ→」の間が、以前より狭まってしまっていると思いませんか？　なので、この間隔を若干広げたいと思います。
先ほどの箇所のすぐ下にある以下の部分【#nav-single .nav-next】の padding をちょっとだけ広げてみてください。ぼくの場合は 0.5em だったのを 1em にしました。

#nav-single .nav-next {
padding-left: 1em;
}

これで、このように「前へ」と「次へ」間隔が広がって、元の間隔と同じくらいの表示なります。

以上です。

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%;
}

以上です。

Twenty Elevenのヘッダーの構造を押さえておく

まず、ヘッダーに関わる部分をパーツごとに見てみると、

• タイトル部分（＋ブログの説明部分）
• 検索窓
• 画像
• グローバルメニュー

の 4 つに分けることができるかなと思います。
Twenty Eleven のデフォルト画面と CSS で指定されている id を照らし合わせてみると、こんな感じになります。

Twenty Elevenのヘッダータイトルや画像に関するCSS

さて、肝腎の CSS の方ですが、まずは親テーマのスタイルシート 70 行目辺りから始まる「＝Structure」と書かれた部分。ここに【 #branding hgroup 】という記述があり、上図の黄色い枠の部分を指定しています。

/* =Structure
----------------------------------------------- */
body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
/* ここが上図の黄色い枠の部分 */
#branding hgroup {
	margin: 0 7.6%;
}

また、500 行目辺りに「=Header」と書かれた箇所があります。ここに、その他の要素がまとまっています。

/* =Header
----------------------------------------------- */
/* ヘッダー全体 */
#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
/* ブログタイトルスペース */
#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
/* ブログタイトル文字 */
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
/* ブログタイトルのリンクに関する事 */
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}
/* ブログの説明文、キャッチフレーズ部分 */
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}
/* ヘッダー画像 */
#branding img {
	height: auto;/* デフォルトは1000×288ですが、PHPを変更すれば好きな高さの画像をヘッダーイメージに挿入することができます。その際はここの値も画像の高さに合わせて変更しましょう。 */
	margin-bottom: -7px;/* マージンはbottomしか指定されていませんが、ヘッダー画像の大きさを変更した場合はtopやright、leftもちょうどいい位置に指定しましょう。 */
	width: 100%;/* 基本は100%＝1000pxです。もし、横幅も変更した場合はここの値も変更しましょう。 */
}

以上がヘッダー部分のブログタイトル・イメージ画像に関わる CSS の該当箇所です。
あとは id 部分と照らし合わせて好きなようにカスタマイズできますね。
ちなみに、いくつか解説を加えておくと・・・

タイトルの横幅を調節したい場合

【 #site-title 】の【 margin-right 】の値を変更すればOKです。右側のマージン（余白）のことですので、ここの値を大きくすればタイトルの横幅は狭くなり、ここの値を小さくすればタイトルの横幅は広くなります。

/* ブログタイトルスペース */
#site-title {
	margin-right: 270px;
}

タイトルを左に寄せたい

タイトルや、タイトル説明文のブロックは、80 行目辺りの【 #branding hgroup 】で指定されていますので、ここの【 margin: 0 7.6%; 】という部分を変更すれば、デフォルトでは真ん中に配置されていたものを自由に配置できます。
マージンのとこに 7.6％ とあるのは、右・左どちらの余白も 7.6％ 分ということですから、左に寄せたい場合は左の余白を小さくする必要があります。
というわけで、【 margin: 0 7.6%　0 ●%; 】のようにして、好きな左側の余白を指定すれば位置を自由に決められます。左に寄せる場合はより小さな値、もしくは ０ で OK です。

#branding hgroup {
	margin: 0 7.6%;　/* 上　右　下　左　の順なので、３番目、4番目にも値を指定してあげる */
}

Twenty Elevenのグローバルメニュー部分のCSS

次はナビゲーションメニュー（グローバルメニュー）に関わる部分です。540 行目あたりから始まります。
グローバルメニューの部分は【 access 】という id で指定されています。

/* =Menu
-------------------------------------------------------------- */
/* グローバルメニューのカスタマイズ */
#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);/* ここまではメニュー背景色のグラデーション指定です。 */
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;/* ここまではドロップシャドウの指定 */
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}
/* グローバルメニュー全体 */
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
/* グローバルメニューの各メニュー（ここでは横並びになるように指定してます） */
#access li {
	float: left;
	position: relative;
}
/* グローバルメニューの文字全般 */
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
/* グローバルメニューの２段目 */
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
/* グローバルメニューの３段目 */
#access ul ul ul {
	left: 100%;
	top: 0;
}
/* グローバルメニュー２段目の文字全般 */
#access ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #efefef;
}
/* グローバルメニューにカーソルを持っていった場合 */
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

グローバルメニューバーの背景色を変えたい

グローバルメニューの色を指定しているのは、冒頭の backgroud になります。これは単色ではなく、微妙にグラデーションがかかっています。最新のブラウザであればだいたい確認できるはずです。
デフォルトの場合だと、【 #252525 】は上から下へ向かう色、【 #0a0a0a 】は下から上へ向かう色を指定しています。
ここの色を変えるだけでもだいぶオリジナリティが出せそうですね！

#access {
	background: #222; /* Show a solid color for older browsers （つまり古いブラウザで見た場合の色です。）*/
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
}
<!-- ※色を変える場合は４カ所全て変えてください -->

Twenty Elevenの検索窓に関するCSS

グローバルメニューに関する CSS の次に来ているのが検索窓に関する CSS です。idは【 searchform 】になっていますね。

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 7.6%;/* 検索窓の位置を変えたい場合は基本的にtopとrightを変更してください */
	text-align: right;
}
#branding #searchform div {
	margin: 0;
}
#branding #s {
	float: right;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#branding #s:focus {
	background-color: #f9f9f9;
	width: 196px;
}
#branding #searchsubmit {
	display: none;
}

あと、Twenty Eleven は管理画面からヘッダーのタイトルを削除することができると思うんですが、その時に検索窓がグローバルメニューの中に移動しますよね。
その場合のスタイルに関しては、この後の部分で指定しています。

/* タイトルを削除した場合＝グローバルメニュー内に検索窓が移動した場合 */
#branding .only-search #searchform {
	top: 5px;
	z-index: 1;
}
#branding .only-search #s {
	background-color: #666;
	border-color: #000;
	color: #222;
}
#branding .only-search #s,
#branding .only-search #s:focus {
	width: 85%;
}
#branding .only-search #s:focus {
	background-color: #bbb;
}
#branding .with-image #searchform {
	top: auto;
	bottom: -27px;
	max-width: 195px;
}
#branding .only-search + #access div {
	padding-right: 205px;
}

もっと自由にヘッダーをカスタマイズしたい場合

一応、これでほぼ好きなようにカスタマイズできるかと思うんですが、ただ、もしこんな事をしてみたいという場合は CSS より PHP ファイルを直接いじったほうがよさそうです。
こんな場合というのは・・・

• グローバルメニューを一番上に持って行きたい
• 検索窓を消したい
• タイトル・画像・グローバルメニューの位置を自由に入れ替えたい

などなど・・・。
そういうわけで色々試行錯誤した結果を別途まとめたいと思います。こちらの記事を参考にしてみてください。

WordPressテーマTwenty Elevenのヘッダーレイアウトの変更方法