TwentyEleven サイトタイトル/キャッチフレーズを左に寄せる方法

ワードプレステーマTwentyElevenのヘッダータイトル部分及びキャッチフレーズ(サイトディスクリプション)の部分をもっと左に寄せる方法です。

以前の記事(ヘッダー部分の余白撤去)にて、コレ以上左には寄せられない的な発言をしましたが、大変失礼致しました…。

超簡単に左に寄せる事が出来、しかも余白部分も簡単に撤去する事が出来てしまいました。本当に申し訳ありませんでした(ペコリーっ!!

さてでは、気を取り直しまして本題を進めていきます…(汗 お伝えしてます通り、私自身も試行錯誤でカスタマイズしておりますので、ご勘弁下さい。

超簡単!!TwentyElevenヘッダータイトルの左寄せ

では、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

’スタイルシート’の中から、次の部分を見つけて下さい。

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup { /* ココです!! */
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}

この部分の’margin’の数値を変える事でTwentyElevenのヘッダータイトル/キャッチフレーズの位置が変わってきます。例えば、次の様に編集してみて下さい。↓

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup { /* ココです!! */
	margin: 0 1.8%;
}
#access div {
	margin: 0 7.6%;
}

これで、かなり左に寄ったハズです。また、余白部分の撤去もうまくいったんじゃないでしょうか?

いやぁ~、やっぱり思った通りでした…。自分で変更しておいて、出来ないと勘違いをしていたのですから、目も当てられません…(汗

こうやって書き残す事で、そう言った損失も防げるハズです。あなたもカスタマイズをする時には、そうゆうところにも気をつけてされると良いと思います。

サイト全体の構造を変化させることなく、ヘッダー部分だけをうまく移動できたましたね。これでまた、サイト作成に拍車がかかるってもんです(笑

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

 


にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です