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

  • このエントリーをはてなブックマークに追加
  • 0
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 】という記述があり、上図の黄色い枠の部分を指定しています。

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

以上がヘッダー部分のブログタイトル・イメージ画像に関わる CSS の該当箇所です。

あとは id 部分と照らし合わせて好きなようにカスタマイズできますね。

ちなみに、いくつか解説を加えておくと・・・

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

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

タイトルを左に寄せたい

タイトルや、タイトル説明文のブロックは、80 行目辺りの【 #branding hgroup 】で指定されていますので、ここの【 margin: 0 7.6%; 】という部分を変更すれば、デフォルトでは真ん中に配置されていたものを自由に配置できます。

マージンのとこに 7.6% とあるのは、右・左どちらの余白も 7.6% 分ということですから、左に寄せたい場合は左の余白を小さくする必要があります。

というわけで、【 margin: 0 7.6% 0 ●%; 】のようにして、好きな左側の余白を指定すれば位置を自由に決められます。左に寄せる場合はより小さな値、もしくは 0 で OK です。

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

次はナビゲーションメニュー(グローバルメニュー)に関わる部分です。540 行目あたりから始まります。

グローバルメニューの部分は【 access 】という id で指定されています。

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

グローバルメニューの色を指定しているのは、冒頭の backgroud になります。これは単色ではなく、微妙にグラデーションがかかっています。最新のブラウザであればだいたい確認できるはずです。

デフォルトの場合だと、【 #252525 】は上から下へ向かう色、【 #0a0a0a 】は下から上へ向かう色を指定しています。

ここの色を変えるだけでもだいぶオリジナリティが出せそうですね!

Twenty Elevenの検索窓に関するCSS

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

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

その場合のスタイルに関しては、この後の部分で指定しています。

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

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

こんな場合というのは・・・

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

などなど・・・。

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

WordPressテーマTwenty Elevenのヘッダーレイアウトの変更方法
Twenty Eleven のヘッダーのカスタマイズ方法について、以下のことをまとめておきたいと思います。 グローバルメニューを一番上に持って行きたい 検索窓を消したい タイトル・画像・グローバルメニューのレイアウトを自由に入れ替えたい header.phpの構成をなんとなくつかんでおく グローバルメニュー...
  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメント

  1. arowana より:

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

    • ThePresentNote より:

      > arowanaさん

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

    • Kiera より:

      That initshg’s just what I’ve been looking for. Thanks!

  2. lappsleaf より:

    こんにちわ。
    初めてメールします。
    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;

    宜しくお願い致します。

    • ThePresentNote より:

      > lappsleafさん

      コメントありがとうございます。

      問題の部分をぼくの方でも変更してみましたが、
      特に問題は発生しませんでした。

      つまり、カーソルを当てていないときはもちろん、
      当てた時も2.2emの高さに調整されていましたよ。

      Twenty Elevenのバージョンは1.4と1.5、
      どちらも試してみましたが、やはり同じ結果でした。

      何か他の部分が影響を与えているのではないでしょうか?

      ちなみに、line-heightを削除して、
      paddingで余白を指定することもできます。

      つまり、今は、

      padding: 0 1.2125em;

      になっていますが、

      padding: 0.5em 1.2125em;

      など、上限にも余白を与えてあげることで、
      メニューバーの幅を変化させることもできます。

      試してみてください。

      • lappsleaf より:

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

  3. arowana より:

    グローバルメニューそのものの太さを変更するにはどうしたらいいのでしょうか?

    初歩的な質問で申し訳ありません・・・。

    • ThePresentNote より:

      arowanaさん

      ご質問ありがとうございます。

      【 #access a 】の【 line-height 】の値を大きくすると、グローバルメニューが太くなるはずです。

      それと同時に、【 #access ul ul 】の【 top 】の値も、同じにしてください。でないとメニューを2階層にした時に表示がずれてしまうので。

コメントをどうぞ

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