Twenty Elevenのヘッダー画像サイズの変更方法やテーマカスタマイズ法など

  • このエントリーをはてなブックマークに追加
  • 156
Twenty Eleven

WordPress にデフォルトで入っているテンプレートのひとつである Twenty Eleven。色々とカスタマイズができるようなので、勉強がてらちょこちょこいじっています。

本日やりたかった事は、Twenty Eleven のヘッダー部分に関してです。

Twenty Eleven のヘッダー部分はタイトル部分とイメージ画像部分の 2 カ所に分けれています。いや、正確にはタイトル部分とイメージ画像部分と検索窓、そしてグローバルメニューまでが header.php に記載されていることのようです。

※この辺りの事はこちらのブログに詳しく書かれていました。

WordPressのTwenty Elevenテーマ解説:ヘッダー (header.php):その1

ヘッダーイメージ画像を好きな画像に変更する

画像の変更はCSSとかいじらなくてもワードプレスの管理画面から行う事ができます。

【 外観 > ヘッダー > 画像をアップロード 】という部分から、好きな画像をアップロードしてヘッダーとして使う事ができます。

しかし、注意しなければならないのは、どんな大きさの画像でもサイズを【 1000 × 288 】にされてしまうということです。デフォルトのままだと、必ず横:縦の比率が 125:36(1000:288)に合うようにトリミングをしなければならなくなります。

例えば、310 × 222 の画像をアップしたとことろ、このように125:36の比率でトリミングを要求され、

ヘッダー画像のトリミング

結果トリミングされた上に 1000 × 288 に合うように拡大され、このような中途半端な感じになってしまいます。

トリミングされたヘッダー画像

ですので、アップロードする画像はできるだけ 1000 × 288 のサイズの画像か、比率が同じ画像を用意した方がいいと思います。(比率が同じでも、あまり小さいと拡大されて解像度が悪くなるので注意)

でも、できれば自分の好みのサイズのヘッダー画像もアップできたらいいと思いますよね?

ぼくもそう思いましたので、なんとか方法はないものかと調べてみました。

ヘッダーイメージ画像のサイズを変更する

最初は CSS をいじればどうにかなるかなと思っていたんですが、甘かったです。どうにもなりませんでした。CSS で高さを変更しても、結局そこにはまるようにイメージ画像がトリミングされるだけでした。

どうしたものかと調べていると、どうも functions.php をいじればヘッダーのサイズを変更できるらしいことが判明!

早速該当ヶ所を確認。

120 行目あたりにあります。(右にスクロールしてください。)

ここの数字の部分が 1000 とか、288 になっていますよね。まずはここの値を変更する必要があります。横幅(width)を変更した場合は、ブログ全体の幅も変更しないと収まりが悪くなるかもしれませんので、基本は縦だけでもいい気がします。

ちなみにぼくは横も変えてみました。そして画像の位置を右に寄せてコンテンツ背景にもイメージ画像を挿入する事で、画像を2種類挿入してみました。

あとは、ここの高さに合わせてCSSも変更する必要があります。

CSS の該当箇所はこちらの 542 行目あたり。

【 height 】が【 auto 】になってますから、画像の高さに合わせてピクセル値で指定すれば OK でしょう。例えば画像の高さが150pxなら【 height: 150px; 】となります。

【 width 】は 100% のままで問題ないと思いますが、もし画像の横幅が小さいなどして変更したい場合は、画像サイズに合わせてピクセル値で指定すれば OK だと思います。

【2012.4.23追記】

もしヘッダー画像の横幅を変えた場合、画像の横幅に合わせてwidthもピクセル値を指定すればいいと思ってましたが、そうするとブラウザの幅に対して固定された幅になってしまいます。(ブラウザの幅を狭めていってもヘッダー画像が小さくならない)

なので、パーセンテージで指定する方がいいようです。TwentyEleven の場合、デフォルトの横幅は 1000px=100% ですので、例えば横幅 700px の画像を使いたい場合は、70% にすれば OK です。

あとはそのままですと画像の表示位置が左寄せ、上寄せになっているので、【 margin 】の部分に数値を入れれば画像の表示位置を調節することができます。

もともと【 margin-bottom 】だけが指定されていますから、上・下・左・右全て指定できるように、【 margin: 上 右 下 左; 】と書き直せば大丈夫です。

これでヘッダー画像を好きな大きさ、好きな位置に表示させる事ができます!

  • このエントリーをはてなブックマークに追加

無料メール講座

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

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

無料メール講座

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

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

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

その勘違いとは・・・

コメントをどうぞ

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