Wordpress3.4のテーマ「TwentyEleven」のカスタマイズについて、

以下の点を教えてください。

1.ヘッダー画像とトップまでの高さを低く(狭める)方法

2.サイトのタイトル と キャッチフレーズ

http://www.near-mint.com/blog/software/wp-syntaxhighlighter
のサイトのように、
左右に並べて表示する修正。

3.上記のサイトは、全体が黒い細線で囲まれています。
このやり方。

style.css
の修正だと思うのですが、
どこかわかりません。

http://1811way.com/work008/header-hatena001.png
を参照してください。

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/09/11 17:20:50
  • 終了:2012/09/17 10:04:05

ベストアンサー

id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512012/09/12 01:56:34

ポイント150pt

1.ヘッダー画像とトップまでの高さを低く(狭く)
タイトル(#site-title)とキャッチフレーズ(#site-description)に指定された余白が原因ですので、その値を小さくします。

・510行目

#site-title {
	margin-right: 50px; /* 元の値 270px */
	padding: 1.2em 0 0; /* 元の値 3.65625em 0 0 */
}


・526行目

#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 30px 100px 0.5em 0; /* 元の値 0 270px 3.65625em 0 */
}



※上記のままだと検索フォームが下に下がって中途半端な位置になります。
どの位置に表示させたいか分かりませんが、キャッチフレーズの右に表示するには次のようにしてみてください。

・626行目

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 1em; /* 元の値 3.8em */
	right: 2.6%; /* 元の値 7.6% */
	text-align: right;
}



2.サイトのタイトルとキャッチフレーズを左右に並べて表示
それぞれ「float」で右寄せ・左寄せを追加で指定します。

・510行目

#site-title {
	margin-right: 50px; /* 元の値 270px */
	padding: 1.2em 0 0; /* 元の値 3.65625em 0 0 */
	float: left;
}


・526行目(※上記変更後527行目)

#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 30px 100px 0.5em 0; /* 元の値 0 270px 3.65625em 0 */
	float: right;
	clear: none;
}


次の記述を一番最後(※最終行)に追加して、h2に対するfloatクリアの指定を無効にします。
上記にキャッチフレーズ(#site-description)への指定に加えた方がいいと思います。こちらは必要ありません。

h2 {
	clear: none;
}


上記で大丈夫だと思いますが、一応floatのクリアをヘッダー画像に指定します。

・531行目(※これまでの修正を加えていると533行目?)

#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
	clear: both;
}



3.コンテンツ表示部全体を黒い細線で囲む
コンテンツ全体を囲んでいる要素にボーダーを指定します。

・326行目

#page {
	background: #fff;
	border: 1px solid #000;
}


もしヘッダー上部のグレーの部分が不要な場合は、次のようにして無効にします。

・504行目

#branding {
	/* border-top: 2px solid #bbb; */
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}



希望の表示と違う部分があったら返信で知らせてください。
【※回答一部修正済み】

id:kohhi

いつも、ご丁寧な回答ありがとうございます。
たいへんわかりやすいです。

2012/09/17 10:03:39

その他の回答(1件)

id:language_and_engineering No.1

lang_and_engine回答回数170ベストアンサー獲得回数632012/09/11 17:51:30

ポイント100pt

修正したいテーマのフォルダ内にあるstyle.cssで,それぞれ該当する要素のCSS属性を書き換えたり,追記したりします。

行番号はバージョンで変動しますので,修正すべき要素の名前を下記に列挙します。


1:上の高さ

#site-title 要素のスタイルで,例えば margin : 0; などしてみてください。


2:タイトルの横並び

#site-description要素に float:right; clear: right;

#site-title 要素に float:left;


3:全体の枠線

#wrapper要素に border : solid 1px #222222;



Firebugを使えば,特定の要素のCSS属性を簡単に調べられます。お試しください。

id:kohhi

お返事ありがとうございました。
Firebug使わせてもらってます。

2012/09/17 10:02:56
id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512012/09/12 01:56:34ここでベストアンサー

ポイント150pt

1.ヘッダー画像とトップまでの高さを低く(狭く)
タイトル(#site-title)とキャッチフレーズ(#site-description)に指定された余白が原因ですので、その値を小さくします。

・510行目

#site-title {
	margin-right: 50px; /* 元の値 270px */
	padding: 1.2em 0 0; /* 元の値 3.65625em 0 0 */
}


・526行目

#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 30px 100px 0.5em 0; /* 元の値 0 270px 3.65625em 0 */
}



※上記のままだと検索フォームが下に下がって中途半端な位置になります。
どの位置に表示させたいか分かりませんが、キャッチフレーズの右に表示するには次のようにしてみてください。

・626行目

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 1em; /* 元の値 3.8em */
	right: 2.6%; /* 元の値 7.6% */
	text-align: right;
}



2.サイトのタイトルとキャッチフレーズを左右に並べて表示
それぞれ「float」で右寄せ・左寄せを追加で指定します。

・510行目

#site-title {
	margin-right: 50px; /* 元の値 270px */
	padding: 1.2em 0 0; /* 元の値 3.65625em 0 0 */
	float: left;
}


・526行目(※上記変更後527行目)

#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 30px 100px 0.5em 0; /* 元の値 0 270px 3.65625em 0 */
	float: right;
	clear: none;
}


次の記述を一番最後(※最終行)に追加して、h2に対するfloatクリアの指定を無効にします。
上記にキャッチフレーズ(#site-description)への指定に加えた方がいいと思います。こちらは必要ありません。

h2 {
	clear: none;
}


上記で大丈夫だと思いますが、一応floatのクリアをヘッダー画像に指定します。

・531行目(※これまでの修正を加えていると533行目?)

#branding img {
	height: auto;
	margin-bottom: -7px;
	width: 100%;
	clear: both;
}



3.コンテンツ表示部全体を黒い細線で囲む
コンテンツ全体を囲んでいる要素にボーダーを指定します。

・326行目

#page {
	background: #fff;
	border: 1px solid #000;
}


もしヘッダー上部のグレーの部分が不要な場合は、次のようにして無効にします。

・504行目

#branding {
	/* border-top: 2px solid #bbb; */
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}



希望の表示と違う部分があったら返信で知らせてください。
【※回答一部修正済み】

id:kohhi

いつも、ご丁寧な回答ありがとうございます。
たいへんわかりやすいです。

2012/09/17 10:03:39

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません