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


この記事では Twenty Eleven の CSS でよく使いそうな箇所をメモして行きたいと思います。Twenty Eleven のスタイルシートを変更したい場合は、子テーマを作成し該当の id や class 部分を変更・追記してください。

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

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

  • タイトル部分(+ブログの説明部分)
  • 検索窓
  • 画像
  • グローバルメニュー

の 4 つに分けることができるかなと思います。
Twenty Eleven のデフォルト画面と CSS で指定されている id を照らし合わせてみると、こんな感じになります。
Twenty Elevenヘッダーの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 ●%; 】のようにして、好きな左側の余白を指定すれば位置を自由に決められます。左に寄せる場合はより小さな値、もしくは 0 で OK です。

#branding hgroup {
	margin: 0 7.6%; /* 上 右 下 左 の順なので、3番目、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;
}
/* グローバルメニューの2段目 */
#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;
}
/* グローバルメニューの3段目 */
#access ul ul ul {
	left: 100%;
	top: 0;
}
/* グローバルメニュー2段目の文字全般 */
#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);
}
<!-- ※色を変える場合は4カ所全て変えてください -->

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のヘッダーレイアウトの変更方法


“WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ” への10件のフィードバック

  1. このサイトには大変お世話になってます
    何かわからない時ここにくれば解決できます!
    これからもよろしくおねがいします

    • > arowanaさん
      コメントありがとうございます!
      役に立ってますか!?うれしいです。
      コンテンツの追加が滞りぎみですが、、、今後も頑張ります。
      また遊びにきてください。

  2. こんにちわ。
    初めてメールします。
    wordpress メニューバー の検索でpresentnote.com を見つけました。
    最近wordpressを始め、何も分からない状態で参考にさせてもらってます。
    今回、「Twenty Elevenのグローバルメニュー部分のCSS」でメニューの高さを変えたところ、カーソルを持って行って反転した高さが合わなくなってしまいました。いろいろ数字を変えてみましたがずれたままです。
    よろしければご教示お願い致します。
    style.css の /* =Menu の 3.333em を 2.2em にしました。
    #access a {
    color: #ccc;
    display: block;
    line-height: 2.2em;
    padding: 0 1.2125em;
    text-decoration: none;
    宜しくお願い致します。

    • > lappsleafさん
      コメントありがとうございます。
      問題の部分をぼくの方でも変更してみましたが、
      特に問題は発生しませんでした。
      つまり、カーソルを当てていないときはもちろん、
      当てた時も2.2emの高さに調整されていましたよ。
      Twenty Elevenのバージョンは1.4と1.5、
      どちらも試してみましたが、やはり同じ結果でした。
      何か他の部分が影響を与えているのではないでしょうか?
      ちなみに、line-heightを削除して、
      paddingで余白を指定することもできます。
      つまり、今は、
      padding: 0 1.2125em;
      になっていますが、
      padding: 0.5em 1.2125em;
      など、上限にも余白を与えてあげることで、
      メニューバーの幅を変化させることもできます。
      試してみてください。

      • おはようございます。
        お返事ありがとうございます。
        早速試してみましたが、解決しませんでした。
        他の部分が影響をあたえているのでしょうね…
        cssはまったく分からない状態ですのでちんぷんかんぷんです (^^;)
        一旦元に戻してもう一度トライしてみます。
        変化がありましたら又メールします。

  3. グローバルメニューそのものの太さを変更するにはどうしたらいいのでしょうか?
    初歩的な質問で申し訳ありません・・・。

    • arowanaさん
      ご質問ありがとうございます。
      【 #access a 】の【 line-height 】の値を大きくすると、グローバルメニューが太くなるはずです。
      それと同時に、【 #access ul ul 】の【 top 】の値も、同じにしてください。でないとメニューを2階層にした時に表示がずれてしまうので。

ThePresentNote へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。