WordPressのTwenty Elevenをカスタマイズする方法

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

このブログは WordPress に最初から入っているテーマ Twenty Eleven を使っています(2012 年 1 月時点)。色々と大きさや配置換え、デザインもカスタマイズしていきたいと思いますし、プラグインも今 30 個近く入れています。

ブログ記事にはソーシャルプラグインをいくつか導入してみました。Facebook の「いいね!ボタン」と「送信ボタン」。それに Facebook 用のコメント欄( OGP 設定済み)。Google+ の「プラスワンボタン」に Twitter の「ツイートボタン」といったところです。 ま、今のところぼくがソーシャルメディアほとんど使ってないので、あんまり意味ないかもしれませんけどね。

ですが、設置の方法とか役立つだろうから、そのうち備忘録的に記したいと思います。

Twenty Elevenのヘッダーカスタマイズ

今日はヘッダーをいじりました。ヘッダーの画像ではなくタイトル文字の部分です。ヘッダーのタイトル文字が大きいな〜と思っていたので、小さくしたいかったのと、本当は画像も小さくたかったんですが、いまいち分からなかったので断念。後日に持ち越します。

いじったのは CSS だけ。

ヘッダーのタイトル部分とキャッチフレーズ(説明文)をカスタマイズする

だいたい 500 行目辺りから始まっているヘッダー部分は、ブログタイトル部分と説明部分に分かれています。で、タイトル部分は上のソースの 17 行目からの、

という部分ですね。ここでブログタイトルの文字色(color)、大きさ(font-size)なんかが変えられます。【 font-weight: bold; 】っていうのは太字ってことだし、【 line-height: 36px; 】っていうのは行間のことらしいけど、タイトル文字小さくしたら 1 行で収まっているのであまり関係ないだろうということでデフォルトのまま。

【 text-decoration 】ってのは、テキストデコレーションということで、下線を付けたり(underline)、上線を付けたり(overline)、取り消し線を付けたり(line-through)できるみたいですね。値を【 blink 】にしたら点滅するみたいです。

タイトルの説明文は、上記コードでは 33 行目からの、

という部分で変更できました。変えたのは【 margin 】の部分だけです。マージンの部分は外側の余白ということですが、【 margin: 上 右 下 左; 】という感じで値を設定していきます。今回はできるだけ縦幅を小さくしたかったので、上(トップ)と下(ボトム)の値を変更しました。

といっても、トップは元々 0 だったので、下だけの変更です。ヘッダー画像も高さを低くしたかったんですが、【 height 】を変更しても画像の表示スペースが小さくなるのみで、うまくいきません。画像自体はデフォルトの 1000 × 288 のサイズでしかアップロードできず、好きな画像を好きなサイズで差し込む事ができませんでした。この辺はまた調べてなんとか変更できるようにしたいと思います。

ちなみに、 11 行目にあるブログタイトルのマージンなんかを設定する部分では、

padding のトップの部分を小さな値に設定しました。これでタイトル部分の高さが低くなって、あんまりタイトルが主張しない感じになりました。

WordPressのTwenty Elevenのヘッダー検索窓の位置を変更する

と、思ったら、検索窓の位置がそのままだったため、グローバルメニーにかぶってしまってました。

で、Firefox の Firebug を使ってどこを変えたらいいのか探していたら、どうやら見つかったようです。

Twenty Eleven の CSS の 460 行目辺りにある要素で、検索窓に付いて色々指定できるようです。が、今回はとりあえず位置調節だけということで、マージン要素を追加して位置を上に上げました。 こんな感じ。

ここであまり詳しくない人はきっとマイナスが付いている事に疑問を持ったかもしれませんね。が、これはぼくも最近知ったテクニックなので、もう少し使いこなせるようになってからあれこれ記録して行きたいと思います。

というわけで、無事検索窓の位置もいい感じになり、ヘッダーがすっきりしたのかなと思います。

ま、これも試験的に行っただけなんで、いつまでこんな感じにするか分かりませんけどね。

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

無料メール講座

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

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

無料メール講座

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

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

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

その勘違いとは・・・

コメントをどうぞ

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