この記事では Twenty Eleven の CSS でよく使いそうな箇所をメモして行きたいと思います。Twenty Eleven のスタイルシートを変更したい場合は、子テーマを作成し該当の id や class 部分を変更・追記してください。
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 ファイルを直接いじったほうがよさそうです。
こんな場合というのは・・・
- グローバルメニューを一番上に持って行きたい
- 検索窓を消したい
- タイトル・画像・グローバルメニューの位置を自由に入れ替えたい
などなど・・・。
そういうわけで色々試行錯誤した結果を別途まとめたいと思います。こちらの記事を参考にしてみてください。
コメントを残す